如何让小部件填充列中的剩余空间

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

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

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

Answer 6

您必须为

Row

指定高度，以便其子级知道可用空间。您可以使用

Row

小部件包裹

IntrinsicHeight

；

Answer 7

1. 将 Flex/Row/Column 容器的子容器包装在 Flexible 小部件中，该容器应尽可能小，并将其 fit 属性设置为 FlexFit.loose，将其 flex 属性设置为 0。
2. 将应填满 Expanded 小部件中剩余空间的子项包裹起来（这相当于将其包裹在灵活的小部件中并将其 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)),
        ),
    ],
)