Flutter 基准线布局

Flutter 基准线布局(Baseline)，Baseline组件用于将所有元素底部放在同一条水平线上。了解移动端开发的读者大都知道，一般文字排版的时候可能会用到它。

Baseline的作用很简单，根据child的baseline属性来调整child的位置。例如对于两个字号不一样的文字，希望它们的底部在一条水平线上，就可以使用这个组件，它是一个非常基础的组件。

下图中两个字线一上一下，如果想对齐，就需要使用Baseline组件来控制。

Baseline组件的主要属性如下所示：

接下来编写一个小示例，示例中三个元素在同一个水平线上，baseline也设定为相同的值。示例代码如下：

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Baseline基准线布局示例'),
      ),
      body: Row(
        // 水平等间距排列子组件
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          // 设置基准线
          Baseline(
              baseline: 80.0,
              // 对齐字符底部水平线
              baselineType: TextBaseline.alphabetic,
              child: Text(
                'AaBbCc',
                style: TextStyle(
                  fontSize: 18.0,
                  textBaseline: TextBaseline.alphabetic,
                ),
              ),
          ),
          Baseline(
              baseline: 80.0,
                baselineType: TextBaseline.alphabetic,
                child: Container(
                  width: 40.0,
                  height: 40.0,
                  color: Colors.green,
                ),
              ),
              Baseline(
                baseline: 80.0,
                baselineType: TextBaseline.alphabetic,
                child: Text(
                  'DdEeFf',
                  style: TextStyle(
                    fontSize: 26.0,
                    textBaseline: TextBaseline.alphabetic,
                  ),
                ),
              ),
            ],
          ),
        );
      }
  }
  void main() {
      runApp(
        MaterialApp(
          title: 'Baseline基准线布局示例',
          home: LayoutDemo(),
        ),
      );
  }

上述示例代码的视图展现大致如图所示：

酷客教程相关文章：

• Flutter 矩阵转换
• Flutter Table
• Flutter GridView
• Flutter ListView