Flutter（51）：Layout组件之Baseline

Flutter教学目录持续更新中

Github源代码持续更新中

1.Baseline介绍

根据子项的基线对它们的位置进行定位的widget。即子元素的基线到Baseline组件顶部的距离为baseline数值。
这里有几个注意点：

• Baseline的子节点是文本，会以文本的TextBaseline为基线，不是文本则已widget底部为线
• Baseline的父节点的内边距，外边距会对位置产生影响，top会使位置相对基线下降，bottom会使位置相对基线上升
• Baseline内部嵌套复杂的布局也会使位置相对基线产生变化
  因此这个组件并不能强行约束子空间，受多种条件的影响。

2.Baseline属性

• baseline：baseline数值，必要参数，从顶部算。
• baselineType：TextBaseline 必要参数，目前有两种类型，alphabetic对齐字符底部的水平线，ideographic对齐表意字符的水平线
• child：

3.使用

1602738846735.jpg

  Baseline _myBaseline(Widget widget) {
    return Baseline(
      baseline: 100,
      baselineType: TextBaseline.alphabetic,
      child: widget,
    );
  }

  _myBaselineChildren() {
    return [
      Container(
        margin: EdgeInsets.only(top: 20),
        padding: EdgeInsets.only(top: 20),
        child: _myBaseline(Text(
          'text1',
          style: TextStyle(fontSize: 14, backgroundColor: Colors.amber),
        )),
      ),
      _myBaseline(Text(
        'text2',
        style: TextStyle(fontSize: 14, backgroundColor: Colors.amber),
      )),
      _myBaseline(Text(
        'text3',
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontSize: 20,
          backgroundColor: Colors.amber,
        ),
      )),
      _myBaseline(
        Container(
          margin: EdgeInsets.only(top: 200),
          padding: EdgeInsets.only(top: 10),
          width: 50,
          height: 50,
          color: Colors.blue,
        ),
      ),
      _myBaseline(
        Container(
          margin: EdgeInsets.only(top: 200),
          padding: EdgeInsets.only(top: 10),
          width: 50,
          height: 50,
          color: Colors.blue,
          child: Image.asset('images/scan.png'),
        ),
      ),
      _myBaseline(
        Container(
          margin: EdgeInsets.only(top: 200),
          padding: EdgeInsets.only(top: 10),
          width: 50,
          color: Colors.blue,
          child: Text(
            'text4',
            style: TextStyle(fontSize: 14, backgroundColor: Colors.amber),
          ),
        ),
      ),
      _myBaseline(
        Container(
          margin: EdgeInsets.only(top: 200),
          padding: EdgeInsets.only(top: 10),
          width: 50,
          height: 50,
          color: Colors.blue,
          child: Text(
            'text5',
            style: TextStyle(fontSize: 14, backgroundColor: Colors.amber),
          ),
        ),
      ),
      _myBaseline(
        Container(
          margin: EdgeInsets.only(top: 200),
          padding: EdgeInsets.only(top: 70),
          width: 50,
          height: 50,
          color: Colors.blue,
          child: Container(
            child: Text(
              'text6',
              style: TextStyle(fontSize: 14, backgroundColor: Colors.amber),
            ),
          ),
        ),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Baseline'),
      ),
      body: Row(
        children: _myBaselineChildren(),
      ),
    );
  }

下一节：Layout组件之FractionallySizedBox

Flutter（52）：Layout组件之FractionallySizedBox

Flutter教学目录持续更新中

Github源代码持续更新中