繁体   English   中英

Flutter:列中嵌套行,如何在不扩展父列的情况下填充行

[英]Flutter: Nested row in column, how to fill row without expanding parent column

这就是我所拥有的:

列内有两个孩子的行

源代码:

Container(
      width: 150,
      height: 150,
      color: Colors.grey,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 100,
              width: 100,
              color: Colors.green,
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  child: Text('text'),
                  color: Colors.blue,
                ),
                Container(
                  child: Text('text'),
                  color: Colors.red,
                ),
              ],
            ),
          ],
        ),
      ),
    ),

如何使蓝色和红色容器与绿色容器的宽度相匹配,而又不使它们像绿色容器一样大?

结果

这就是我想要得到的,而不是对行内的容器使用固定的。 此外,我在列中有多个元素,我不想使用固定大小。

Container(
  width: 150,
  height: 150,
  color: Colors.grey,
  child: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 100,
          width: 100,
          color: Colors.green,
        ),
        Container(
          width: 100,
          Row(
          mainAxisSize: MainAxisSize.min,
          children: [
          Expanded(
          child:
            Container(
              child: Text('text'),
              color: Colors.blue,
            ),
          ),
          Expanded(
          child:
            Container(
              child: Text('text'),
              color: Colors.red,
            ),
          ),
          ],
        ),
        ),
      ],
    ),
  ),
),

您只能用 Expanded 小部件包装 Row 的子级。

如果大小是固定的,那么您可以为容器添加一个宽度,该容器与行小部件一起包装。

我给宽度 50 的原因是因为父容器的宽度已经是 100,所以剩余宽度被赋予容器

Container(
        width: 150,
        height: 150,
        color: Colors.grey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 100,
              width: 100,
              color: Colors.green,
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 50,
                  child: Text('text'),
                  color: Colors.blue,
                ),
                Container(
                  width: 50,
                  child: Text('text'),
                  color: Colors.red,
                ),
              ],
            ),
          ],
        ),
      ),

您可以使用灵活的小部件给行固定宽度

Container(
          width: 150,
          height: 150,
          color: Colors.grey,
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.green,
                ),
                Container(
                  width: 100,
                  child: Row(
                    children: [
                      Flexible(
                        flex: 1,
                        fit: FlexFit.tight,
                        child: Container(
                          child: Text('text'),
                          color: Colors.blue,
                        ),
                      ),
                      Flexible(
                        flex: 1,
                        fit: FlexFit.tight,
                        child: Container(
                          child: Text('text'),
                          color: Colors.red,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        )

试试这个,你必须将 Exapnded 添加到行小部件的子项中

Container(
  padding: EdgeInsets.all(16),
  color: Colors.grey,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Container(
        color: Colors.green,
        child: Text('Hdddfhlsd', style: primaryTextStyle()),
      ),
      Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: Container(
              child: Text('text'),
              color: Colors.blue,
            ),
          ),
          Expanded(
            child: Container(
              child: Text('text'),
              color: Colors.red,
            ),
          ),
        ],
      )
    ],
  ),
)
 **Replace your container by this **

Container(
    width: 150,
    height: 150,
    color: Colors.grey,
    child: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 100,
             
            child: Column(
              children: [
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.green,
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Expanded(
                      child: Container(
                        child: Text('text'),
                        color: Colors.blue,
                      ),
                    ),
                    Expanded(
                      child: Container(
                        child: Text('text'),
                        color: Colors.red,
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    ),
  )

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM