Row Column

Row Column

参考:

mainAxisAlignment和crossAxisAlignment

属性mainAxisAlignmentcrossAxisAlignment

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

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

MainAxisAlignment

以Row来举例说明

RowmainAxisAlignment默认值为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
mainAxisAlignmentMainAxisAlignment.center

center
mainAxisAlignmentMainAxisAlignment.end

end
mainAxisAlignmentMainAxisAlignment.spaceBetween

spaceBetween
mainAxisAlignmentMainAxisAlignment.spaceEvenly

spaceEvenly
mainAxisAlignmentMainAxisAlignment.spaceAround

spaceAround

CrossAxisAlignment

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

crossAxisAlignmentCrossAxisAlignment.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基线对齐,需使用TextBaselineCrossAxisAlignment.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),
          ],
        ),
      )

MainAxisSize.max
mainAxisSize设置为MainAxisSize.min

MainAxisSize.min

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值