Row和Column

weixin_38107457

已于 2022-05-19 21:49:04 修改

阅读量970

点赞数

分类专栏： flutter 文章标签： html css 前端

于 2022-05-18 21:01:14 首次发布

本文链接：https://blog.csdn.net/weixin_38107457/article/details/124850932

版权

本文介绍了Row和Column在前端布局中的作用，它们分别用于水平和垂直布局。重点阐述了MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴）的概念，主轴对齐方式如Row的默认值是MainAxisAlignment.start，而Column的主轴是垂直方向。通过代码示例展示了如何设置主轴和交叉轴的对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Row和Column是多子控件的容器类控件，Row控件水平布局，Column控件垂直布局。

在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴），简单来说，MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴，比如Row的主轴是水平方向，交叉轴是垂直方向，而Column的主轴是垂直方向，交叉轴是水平方向。

主轴对齐方式

Row控件的主轴mainAxisAlignment对齐方式默认值是MainAxisAlignment.start，即子控件从开始处排列，这个开始处不一定是屏幕的左边，是从左到右还是从右到左排列取决于文本方向textDirection

3个颜色块水平排列，代码如下：

Row(
        children: <Widget>[
          Container(
            height: 50,
            width: 100,
            color: Colors.red,
          ),
          Container(
            height: 50,
            width: 100,
            color: Colors.green,
          ),
          Cont