颤动 - 如何使小部件填充列中的剩余空间

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

）

Answer 1

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

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

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