如何使小部件在Column中填充剩余空间

Question

在Android中，我们可以通过以下方式使ImageView根据TextView的大小填充尽可能多的空间。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

在 Flutter 中，我们如何实现这一点？假设我需要使 Datetime（绿色）尽可能地填满。

new Column(
    children: <Widget>[
        new Text('Title',
            style: new TextStyle(fontWeight: FontWeight.bold)
        ),
        new Text('Datetime',
            style: new TextStyle(color: Colors.grey)
        ),
    ],
)

- Guster

---

你不想让图片填满，而不是文本吗？这完全是另一个主题，需要将字体变大。 - Pluriscient

我已经编辑了问题。请忽略图片，基本上我只想让日期时间（绿色的那个）根据标题的大小尽可能填充更多的高度。字体不会改变。 - Guster

Answer 1

我不是100%确定，但我认为你的意思是这样。Expanded widget会扩张到它可以使用的空间。尽管我认为在行或列中它的行为有些不同。

new Column(
children: <Widget>[
    new Text('Title',
        style: new TextStyle(fontWeight: FontWeight.bold)
    ),
    new Expanded(
        child: new Text('Datetime',
             style: new TextStyle(color: Colors.grey)
        ),
    ),
],
)

- Kevin Walter

---

Expanded会占据行或列中剩余的空间。 - Faizan Mubasher

在开发过程中，使用Expanded可以扩展控件的区域。但是在发布应用时，可能会出现RenderFlex错误，并且所有位于Expanded中的小部件都无法显示。 - Nachiket Gohil

在我的情况下，Expanded 在 Column 内部不起作用，因为 Column 本身被 ListView 包装，因此删除不必要的 ListView 就可以解决问题。 - ArifMustafa

如果您在一个Column内使用了Expanded，而该Column又位于另一个Column内，请将中间的Column用Flexible包裹起来，否则它将占用所有可用空间...以上解决方案都对我无效，我花了几个小时才找到这个方法。 - undefined

Answer 2

你可以使用以下方法：

1. 将子元素使用 Expanded 和 Align 定位

   Column(
     children: [
       FlutterLogo(),
       Expanded( // add this
         child: Align(
           alignment: Alignment.bottomCenter,
           child: FlutterLogo(),
         ),
       ),
     ],
   )
   

2. Spacer

   Column(
     children: [
       FlutterLogo(),
       Spacer(), // add this
       FlutterLogo(),
     ],
   )
   

3. mainAxisAlignment

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // add this
  children: [
    FlutterLogo(colors: Colors.orange),
    FlutterLogo(colors: Colors.blue),
  ],
)

- CopsOnRoad

Answer 3

如果你只需要添加空白间隔，可以使用 Spacer()。

new Column(
children: <Widget>[
    new Text('Title',
        style: new TextStyle(fontWeight: FontWeight.bold)
    ),
    new Text('Datetime',
        style: new TextStyle(color: Colors.grey)
    ),
    Spacer(),
],

- Vadim Osovsky

Answer 4

Flexible(
  child: Column(
    mainAxisAlignment:MainAxisAlignment.spaceBetween,
    children: <Widget>[
        new Text('Title',
            style: new TextStyle(fontWeight: FontWeight.bold)
        ),
        new Text('Datetime',
            style: new TextStyle(color: Colors.grey)
        ),
  ],
),

- Ahmad Abdullah

Answer 5

这是在我的情况下如何运作的：

IntrinsicHeight(
      child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Flexible(
              child: Image.memory(
                File('path').readAsBytesSync(),
                width: 150,
                height: 150,
              ),
              flex: 5,
            ),
            Flexible(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Title',
                      style: TextStyle(fontWeight: FontWeight.bold)
                  ),
                  Text('Datetime',
                      style: TextStyle(color: Colors.grey)
                  ),
                ],
              ),
              flex: 1,
            ),
          ]),
    ),

- Ali Izadyar

---

我非常确定你不应该在build方法中调用同步方法。在这种情况下，请使用Image.file。 - undefined

Answer 6

你必须为Row指定一个高度，这样它的子元素才知道可用的空间。你可以使用IntrinsicHeight小部件来包装Row以实现此目的；

- Victor Batista

Answer 7

1. 将您的Flex/Row/Column容器中应尽可能小的子元素包装在一个Flexible小部件中，并将其fit属性设置为FlexFit.loose，将其flex属性设置为0。
2. 将应填充剩余空间的子元素包装在一个Expanded小部件中（这相当于将其包装在一个Flexible小部件中，并将其fit属性设置为FlexFit.tight）。

将此应用于您的代码中，其中“标题”应仅占用最小必要空间，“日期时间”应填充剩余空间：

Column(
    children: [
        Flexible (
          fit: FlexFit.loose,
          flex: 0,
          child: Text ('Title', style: TextStyle(fontWeight: FontWeight.bold))
        ),
        Expanded(
          child: Text('Datetime', style: TextStyle(color: Colors.grey)),
        ),
    ],
)

- Fredrik_Borgstrom