Flutter的Row和Column简介

Row、Column的介绍

Row：水平布局，在水平方向上排列子widget的列表。
Column：垂直布局，在垂直方向上排列子widget的列表。

说明：Row和Column是多子节点空间，他们不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。

属性

1. mainAxisAlignment：主轴对齐方式，可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly；

2. mainAxisSize：主轴大小，可以选择min、max；

3. crossAxisAlignment：横轴对齐方式；

4. textDirection：文字方向；

5. verticalDirection：垂直方向；

6. children：子控件。

start: 子部件在主轴上靠近起始位置对齐。在水平 Row 中，它们将靠左对齐，在垂直 Row 中，它们将靠顶部对齐。

end: 子部件在主轴上靠近结束位置对齐。在水平 Row 中，它们将靠右对齐，在垂直 Row 中，它们将靠底部对齐。

center: 子部件在主轴上居中对齐。无论是水平 Row 还是垂直 Row，它们都将在主轴上居中对齐。

spaceBetween: 子部件在主轴上均匀分布，两端靠近容器边界。这意味着第一个子部件靠近起始位置，最后一个子部件靠近结束位置，中间的子部件平均分布在它们之间。

spaceAround: 子部件在主轴上均匀分布，包括两端和之间。这会在每个子部件周围创建相等的空间，使得子部件之间的间距相等，同时最后一个子部件靠近结束位置，第一个子部件靠近起始位置。

spaceEvenly: 子部件在主轴上均匀分布，并且两端靠近容器边界。这与 spaceBetween 相似，但不会让子部件靠近容器边界，而是在两端和之间均匀分布空间。

Expanded

这个是Row/Column的内的小控件，可以用来实现权重的布局，这个很有用。它必须是Row、Column或Flex的后代，并且从Expanded到其封闭行、列或Flex的路径必须仅包含StatelessWidget或StatefulWidget（而不是其他类型的小部件，如RenderObjectWidget）。

实例

Container(
          color: Colors.grey,
          padding: EdgeInsets.only(top: 10, bottom: 10),
          margin: EdgeInsets.only(top: 10),
          child: Row(
            children: [
              Expanded(
                child: Text(
                  'Deliver features faster',
                  textAlign: TextAlign.center,
                ),
                flex: 1,
              ),
              Expanded(
                flex: 1,
                child: Text(
                  'Craft beautiful UIs',
                  textAlign: TextAlign.center,
                ),
              ),
              Expanded(
                child: FlutterLogo(),
                flex: 1,
              ),
              Expanded(child: FlutterLogo(),
                flex: 1,
              ),
              FlutterLogo(),
              Expanded(
                  child:FittedBox(
                    fit: BoxFit.contain,
                    child: FlutterLogo(),
                  )
              ),
              Expanded(
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: FlutterLogo(),
                ),
              )
            ],
          ),
        ),

这里举了一个Row的例子，Column的使用类似。
效果如图

---

结束语 Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！