Row Column

最新推荐文章于 2023-08-03 10:10:29 发布

winfred_zen

最新推荐文章于 2023-08-03 10:10:29 发布

阅读量2.4k

点赞数

分类专栏： Flutter 文章标签： Flutter row column

本文链接：https://blog.csdn.net/u014084081/article/details/104021525

版权

Flutter 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Row Column

参考：

mainAxisAlignment和crossAxisAlignment

属性mainAxisAlignment和crossAxisAlignment

mainAxisAlignment - 表示的是主轴的对齐方式
crossAxisAlignment - 表示的是次轴的对齐方式

对Row来说，水平方向是主轴，垂直方向是次轴
对Column来说，垂直方向是主轴，水平方式是次轴

MainAxisAlignment

以Row来举例说明

Row的mainAxisAlignment默认值为MainAxisAlignment.start，crossAxisAlignment默认值为CrossAxisAlignment.center

如下的例子：

      body: Row(
          children: <Widget>[
            Container(width: 100, height: 100, color: Colors.red),
            Container(width: 100, height: 200, color: Colors.green),
            Container(width: 100, height: 300, color: Colors.blue),
          ],
        )

start
mainAxisAlignment为MainAxisAlignment.center

center
mainAxisAlignment为MainAxisAlignment.end

end
mainAxisAlignment为MainAxisAlignment.spaceBetween

spaceBetween
mainAxisAlignment为MainAxisAlignment.spaceEvenly

spaceEvenly
mainAxisAlignment为MainAxisAlignment.spaceAround

spaceAround

CrossAxisAlignment

CrossAxisAlignment的start、center、end与MainAxisAlignment基本类似

当crossAxisAlignment为CrossAxisAlignment.stretch时，会填充cross axis

stretch
CrossAxisAlignment.baseline

如下，Row中有字体大小不同的Text

      body: Container(
        color: Colors.yellow,
        child: Row(
          children: <Widget>[
            Text(
              'Flutter',
              style: TextStyle(color: Colors.red, fontSize: 40.0),
            ),
            Text('Flutter',
                style: TextStyle(color: Colors.blue, fontSize: 20.0)),
          ],
        ),
      )

文字没对齐
如果想要文件沿着baseline基线对齐，需使用TextBaseline和CrossAxisAlignment.baseline

      body: Container(
        color: Colors.yellow,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,
          children: <Widget>[
            Text(
              'Flutter',
              style: TextStyle(color: Colors.red, fontSize: 40.0),
            ),
            Text('Flutter',
                style: TextStyle(color: Colors.blue, fontSize: 20.0)),
          ],
        ),
      ),

baseline

MainAxisSize

Row组件中mainAxisSize的默认值为MainAxisSize.max

给Row设置一个背景颜色，参考How to set the background color of a Row() in Flutter?，将Row放在Container中，给Container设置背景颜色为Colors.yellow

      body: Container(
        color: Colors.yellow,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(width: 100, height: 100, color: Colors.red),
            Container(width: 100, height: 200, color: Colors.green),
            Container(width: 100, height: 300, color: Colors.blue),
          ],
        ),
      )