flutter 为什么列CrossAxisAlignment.stretch会导致列增长？

x33g5p2x 于 2022-12-14 发布在 Flutter

关注(0)|答案(2)|浏览(137)

我有一个这样的布局：

Container(
  alignment: Alignment.center,
  color: Colors.blueGrey,
  child: Container(
    color: Colors.amber,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 150, // Dummy - actual width is unknown
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 300, // Dummy - actual width is unknown
          height: 100,
          color: Colors.green,
        )
      ],
    ),
  ),
)

生成以下布局：

然后我将crossAxisAlignment: CrossAxisAlignment.stretch,添加到Column中，预期如下：

然而，实际发生的情况是这样的：

为什么？我怎样才能达到我预期的结果？

flutter

来源：https://stackoverflow.com/questions/74764135/why-does-column-crossaxisalignment-stretch-cause-the-column-to-grow

2条答案

按热度按时间

nbysray51#

stretch将尝试获得尽可能多的空间。您可以设置黄色容器宽度并使用stretch，但这是硬编码。您也可以在列小部件上使用IntrinsicWidth，它将使用最大子宽度，但它会有一些开销。

Container(
  alignment: Alignment.center,
  color: Colors.blueGrey,
  child: IntrinsicWidth(
    child: Container(
      color: Colors.amber,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 150, // Dummy - actual width is unknown
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 300, // Dummy - actual width is unknown
            height: 100,
            color: Colors.green,
          )
        ],
      ),
    ),
  ),
),

赞(0）回复(0）举报 2022-12-14

sshcrbum2#

设置根容器的填充