flutter 组件 Baseline,FractionallySizedBox,LimitedBox,Offstage,SizedBox,IndexedStack,Table

1.Baseline

const Baseline({
    Key key,
    @required this.baseline, //基准线位置，像素为基本单位 从顶部算
    @required this.baselineType, //分为两种：alphabetic -用于对齐字母字符的字形底部的水平线；ideographic-用来对齐表意文字的水平线
    Widget child,
})

import 'package:flutter/material.dart';

class MyIos extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyIos();
  }
}

class _MyIos extends State<MyIos> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text(
                "文字18号",
                style: TextStyle(fontSize: 18.0),
              ),
              Text(
                "文字30号",
                style: TextStyle(fontSize: 50.0),
              )
            ],
            crossAxisAlignment: CrossAxisAlignment.baseline,
            textBaseline: TextBaseline.alphabetic,
          ),
          Row(
            children: <Widget>[
              Baseline(
                baseline: 50.0,
                baselineType: TextBaseline.alphabetic,
                child: Text(
                  "文字18号",
                  style: TextStyle(
                      fontSize: 18.0),
                ),
              ),
              Baseline(
                baseline: 50.0,
                baselineType: TextBaseline.alphabetic,
                child: Text(
                  "文字30号",
                  style: TextStyle(
                      fontSize: 50.0),
                )
                ,
              )
            ],
          ),
        ],
      ),
    );
  }
}

2.FractionallySizedBox

FractionallySizedBox控件会根据现有空间，来调整child的尺寸，所以说child就算设置了具体的尺寸数值，也不起作用 

//当设置了具体的宽高因子，具体的宽高则根据现有空间宽高 * 因子，有可能会超出父控件的范围，当宽高因子大于1的时候

//当没有设置宽高因子，则填满可用区域


const FractionallySizedBox({
    Key key,
    this.alignment = Alignment.center, //对齐方式
    this.widthFactor,
    this.heightFactor,
    Widget child,
}) 

 3.LimitedBox

//限制条件稍微少点，只有 maxWidth,maxHeight 

const LimitedBox({
    Key key,
    this.maxWidth = double.infinity,
    this.maxHeight = double.infinity,
    Widget child,
 }) 

4.Offstage

Offstage({ Key key, this.offstage = true, Widget child })

//当offstage为true，当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间

//当offstage为false，当前控件则跟平常用的控件一样渲染绘制

//当Offstage不可见的时候，如果child有动画，应该手动停掉，Offstage并不会停掉动画

import 'package:flutter/material.dart';

class MyIos extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyIos();
  }
}

class _MyIos extends State<MyIos> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Column(
        children: <Widget>[
          //不绘制
          Offstage(
            offstage: true,
            child: Container(
              width: 100.0,
              height: 100.0,
              color: Colors.redAccent,
            ),
          ),
          //绘制
          Offstage(
            offstage: false,
            child: Container(
              width: 100.0,
              height: 100.0,
              color: Colors.redAccent,
            ),
          )
        ],
      ),
    );
  }
}

4.SizedBox

SizedBox就是ConstrainedBox的一个特例

SizedBox({ Key key, this.width, this.height, Widget child })

// child不为null时，如果设置了宽高，则会强制把child尺寸调到此宽高；如果没有设置宽高，则会根据child尺寸进行调整

// child为null时，如果设置了宽高，则自身尺寸调整到此宽高值，如果没设置，则尺寸为0

 5.IndexedStack

IndexedStack继承自Stack，它的作用是显示第index个child，其他child都是不可见的。所以IndexedStack的尺寸永远是跟最大的子节点尺寸一致

IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart, //对齐方式
    TextDirection textDirection, //文字方向
    StackFit sizing = StackFit.loose, //此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小
    this.index = 0, //展示的是哪个
    List<Widget> children = const <Widget>[], //子集
}) 

Container(
  color: Colors.yellow,
  child: IndexedStack(
    index: 1,
    alignment: const Alignment(0.6, 0.6),
    children: [
      CircleAvatar(
        backgroundImage: AssetImage('images/pic.jpg'),
        radius: 100.0,
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.black45,
        ),
        child: Text(
          'Mia B',
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    ],
  ),
)

6.Table

Table({

    Key key,

    this.children = const <TableRow>[], //子集

    this.columnWidths, //设置每一列的宽度

    this.defaultColumnWidth = const FlexColumnWidth(1.0), //默认的每一列宽度值，默认情况下均分

    this.textDirection, //文字方向

    this.border, //表格边框

    this.defaultVerticalAlignment = TableCellVerticalAlignment.top, 
    //每一个cell的垂直方向的alignment
    //top：被放置在的顶部  middle：垂直居中  bottom：放置在底部  baseline：文本baseline对齐  fill：充满整个cell

    this.textBaseline, //defaultVerticalAlignment为baseline的时候，会用到这个属性

})

 

const TableRow({ this.key, this.decoration, this.children });

import 'package:flutter/material.dart';

class MyIos extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyIos();
  }
}

class _MyIos extends State<MyIos> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Column(
        children: <Widget>[
          Table(
            columnWidths: <int, TableColumnWidth>{
              0: FixedColumnWidth(50.0),
              1: FixedColumnWidth(100.0),
              2: FixedColumnWidth(50.0)
            },
            border: TableBorder.all(color: Colors.black38,width: 1.0),
            children: [
              TableRow(children: [
                Text('A1'),
                Text('B1'),
                Text('C1'),
                Text('D1'),
              ]),
              TableRow(
                children: <Widget>[
                  Text('A2'),
                  Text('B2'),
                  Text('C2'),
                  Text('D2'),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}