如何使小部件填充列中的剩余空间答案

【问题标题】：How to make a widget fill remaining space in a Column如何使小部件填充列中的剩余空间
【发布时间】：2018-10-03 07:25:14
【问题描述】：

在Android中，我们可以根据TextView的大小，使ImageView尽可能的填充空间。

<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(green) 尽可能地填充。

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

【问题讨论】：

您不想填满图像，而不是填满文字吗？这是一个完全不同的主题，使字体变大
我已经编辑了这个问题。请忽略图像，基本上我只是想让日期时间（绿色的那个）根据标题的大小填充尽可能多的高度。字体不会改变。

标签： flutter dart flutter-layout

【解决方案1】：

你可以使用：

Expanded 和 Align 定位孩子

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

Spacer

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

mainAxisAlignment

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

【讨论】：

【解决方案2】：

如果您只需要添加空格，请使用Spacer()

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

【讨论】：

【解决方案3】：

不是 100% 肯定，但我认为您是这个意思。 Expanded 小部件扩展到它可以使用的空间。虽然我认为它在行或列中的行为有点不同。

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)
        ),
    ),
],
)

【讨论】：

扩展将占用行或列中的剩余空间。
扩展了需要区域，但是在发布应用程序中，它显示RenderFlex错误，并且所有扩展的小部件都看不到。