线性布局

本文介绍Flutter的Column和Row组件，分别以横向纵向布局，介绍其定义和用法。

Column

Column 是纵向排列子元素

• 示例

  import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('flutter 什么鬼玩意'),
          ),
          body: Container(
            color: Colors.lightBlue,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              // mainAxisSize: MainAxisSize.min,
              children: const [
                FlutterLogo(
                  size: 20,
                ),
                FlutterLogo(
                  size: 40,
                ),
                FlutterLogo(
                  size: 60,
                ),
                LeftBar()
              ],
            ),
          ),
        ),
      );
    }
  }
  

• 定义

  Row({
    Key key,
  
    // * 子元素集合
    List<Widget> children = const <Widget>[],
  
    // 主轴方向上的对齐方式（Row的主轴是横向轴）
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    // 在主轴方向（Row的主轴是横向轴）占有空间的值，默认是max
    MainAxisSize mainAxisSize = MainAxisSize.max,
    // 在交叉轴方向(Row是纵向轴)的对齐方式，Row的高度等于子元素中最高的子元素高度
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  
    // 水平方向子元素的排列方向：从左到右排列还是反向
    TextDirection textDirection,
    // 表示纵轴（垂直）的对齐排列方向，默认是VerticalDirection.down，表示从上到下。这个参数一般用于Column组件里
    VerticalDirection verticalDirection = VerticalDirection.down,
    // 字符对齐基线方式
    TextBaseline textBaseline,
  
  })
  

  • MainAxisAlignment主轴属性：主轴方向上的对齐方式，Row 是横向轴为主轴

    enum MainAxisAlignment {
      // 按照主轴起点对齐，例如：按照靠近最左侧子元素对齐
      start,
    
      // 将子元素放置在主轴的末尾，按照末尾对齐
      end,
    
      // 子元素放置在主轴中心对齐
      center,
    
      // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，首尾子元素都靠近首尾，没有间隙。有点类似于两端对齐
      spaceBetween,
    
      // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾子元素的空白区域为1/2
      spaceAround,
    
      // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，包括首尾子元素
      spaceEvenly,
    }
    

  • CrossAxisAlignment交叉属性：在交叉轴方向的对齐方式，Row 是纵向轴。Row 的高度等于子元素中最高的子元素高度

    enum CrossAxisAlignment {
      // 子元素在交叉轴上起点处展示
      start,
    
      // 子元素在交叉轴上末尾处展示
      end,
    
      // 子元素在交叉轴上居中展示
      center,
    
      // 让子元素填满交叉轴方向
      stretch,
    
      // 在交叉轴方向，使得子元素按照baseline对齐
      baseline,
    }
    

  • MainAxisSize在主轴方向子元素占有空间的方式，Row 的主轴是横向轴。默认是 max

    enum MainAxisSize {
      // 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
      max,
    
      // 与max相反，是最小化占用主轴方向的可用空间
      min,
    }
    

Row

Row 布局组件类似于 Android 中的 LinearLayout 线性布局，它用来做水平横向布局使用，里面的 children 子元素按照水平方向进行排列, 参数用法同上。

• 示例

  import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const LeftBar());
  }
  
  class LeftBar extends StatelessWidget {
    const LeftBar({Key? key}): super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.amber,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            FlutterLogo(
              size: 20,
            ),
            FlutterLogo(
              size: 40,
            ),
            FlutterLogo(
              size: 60,
            ),
          ],
        )
      );
    }
  }