2023-12-04flutter row mainAxisSize属性的作用 以及row大小如何决定

在Flutter中,Row是一个用于水平排列子组件的布局控件。mainAxisSize是Row的一个属性,它决定了Row在主轴(水平轴)上的大小。

mainAxisSize有两个可能的值:

MainAxisSize.min: 当mainAxisSize设置为MainAxisSize.min时,Row将尽量缩小在主轴上的大小,以适应其子组件的大小。这意味着Row将尽量缩小自身,以使得子组件都能够完全放入一行。

image.png
Container(
        color: Colors.red,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          // mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            BackButton(
              onPressed: () {},
            ),
            const BackButton(),
            CloseButton(
              onPressed: () {},
            ),
            IconButton(
              onPressed: () {},
              icon: const BackButtonIcon(),
            ),
            IconButton(onPressed: () {}, icon: const Icon(Icons.arrow_back)),
            IconButton(onPressed: () {}, icon: const Icon(Icons.arrow_back_ios)),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.arrow_back_rounded),
            ),
          ],
        ),
      ),

MainAxisSize.max: 当mainAxisSize设置为MainAxisSize.max时,Row将尽量扩大在主轴上的大小,以填充可用空间。这意味着Row将占据尽可能多的水平空间。

image.png

Row的大小主要取决于其子组件的大小以及mainAxisSize属性的设置。如果子组件比Row的大小要大,且mainAxisSize设置为MainAxisSize.min,则Row会尽量缩小以容纳所有子组件。如果mainAxisSize设置为MainAxisSize.max,则Row会尽量扩大以填充可用的水平空间。

总的来说,mainAxisSize属性影响Row在主轴上的大小,决定了它是尽量缩小以适应子组件,还是尽量扩大以填充可用空间。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容