Flutter笔记（9）flutter中baseline基准线布局

baseline概述

Baseline基准线是指将所有的元素都统一的放在一条水平线上。
Baseline是根据child的baseline定位的child的小部件，即使在不同的child都处在规定的基准线位置，特别是多用文字排版中的时候，就算是不同大小的文字处于同一水平线上。

baseline基本属性

属性名	类型	说明
baseline	double	baseline数值，必须要有，从顶部算。
baselineType	TextBaseline	baseline类型，也必须要有的，目前有两种类型，alphabetic对齐字符底部的水平线，ideographic对齐表意字符的水平线

baseline的构造函数

  const Baseline({
    Key key,
    @required this.baseline,
    @required this.baselineType,
    Widget child,
  }) 

• baseline基准线位置，是以像素为基本的单位
• baselineType 定位child的基准线类型，分为两种：alphabetic对齐字符底部的水平线，ideographic对齐表意字符的水平线

baseline示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'baseline使用示例',
    home: new BaselineUse(),
  ));
}

class BaselineUse extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Baseline基准线示例布局'),
      ),
      body: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          new Baseline(
            baseline: 80.0,
            baselineType: TextBaseline.alphabetic,
            child: new Text(
              'AaBbCc',
              style: new TextStyle(
                fontSize: 18.0,
                textBaseline: TextBaseline.alphabetic,
              ),
            ),
          ),
          new Baseline(
            baseline: 80.0,
            baselineType: TextBaseline.alphabetic,
            child: new Container(
              width: 40.0,
              height: 40.0,
              color: Colors.green,
            ),
          ),
          new Baseline(
            baseline: 80.0,
            baselineType: TextBaseline.alphabetic,
            child: new Text(
              'DdEeFf',
              style: new TextStyle(
                fontSize: 26.0,
                textBaseline: TextBaseline.alphabetic,
              ),
            ),
          )
        ],
      ),
    );
  }
}

baseline效果图