【Flutter -- 布局】线性布局（Row 和 Column）

在这里插入图片描述

文章目录

- Row
- Column

Row

1. 简介

在 Flutter 中非常常见的一个多子节点控件，将 children 排列成一行。估计是借鉴了 Web 中 Flex 布局，所以很多属性和表现，都跟其相似。但是注意一点，自身不带滚动属性，如果超出了一行，在 debug 下面则会显示溢出的提示。

2. 属性

MainAxisAlignment：主轴方向上的对齐方式，会对 child 的位置起作用，默认是 start。

其中 MainAxisAlignment 枚举值：

center：将 children 放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
start：将children放置在主轴的起点；

其中 spaceAround、spaceBetween 以及 spaceEvenly 的区别，就是对待首尾 child 的方式。其距离首尾的距离分别是空白区域的1/2、0、1。

MainAxisSize：在主轴方向占有空间的值，默认是max。

MainAxisSize的取值有两种：

max：根据传入的布局约束条件，最大化主轴方向的可用空间；
min：与max相反，是最小化主轴方向的可用空间；

CrossAxisAlignment：children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。

CrossAxisAlignment枚举值有如下几种：

baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；

TextDirection：阿拉伯语系的兼容设置，一般无需处理。

VerticalDirection：定义了children摆放顺序，默认是down。

VerticalDirection枚举值有两种：

down：从top到bottom进行布局；
up：从bottom到top进行布局。

top对应Row以及Column的话，就是左边和顶部，bottom的话，则是右边和底部。

TextBaseline：使用的TextBaseline的方式，有两种，前面已经介绍过。

3. 实例

1. 效果图
在这里插入图片描述

2. 代码

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('线性布局'),
            ),
            body: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.pink,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),
                ],
              ),
            )
        )

    );
  }
}

Column

1. 简介

Column 是一个用于垂直展示多个子控件的控件。Column 这个控件不会滚动。如果你有一行控件在空间不足的情况下可以滚动，考虑使用 ListView 类。

构造函数如下：

Column({
    
    
	Key key,
	MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
	MainAxisSize mainAxisSize = MainAxisSize.max,
	CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
	TextDirection textDirection,
	VerticalDirection verticalDirection = VerticalDirection.down,
	TextBaseline textBaseline,
	List<Widget> children = const <Widget>[],
})

注：Row 和 Column 都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度

2. 属性

属性和 Row 一样。

3. 实例

1. 效果图
在这里插入图片描述

2. 代码

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('线性布局'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.pink,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),
                ],
              ),
            )
        )

    );
  }
}