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

guz6ccqo 于 2022-11-30 发布在 Flutter

关注(0)|答案(5)|浏览(286)

在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（绿色）尽可能多地填充。

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

flutter

来源：https://stackoverflow.com/questions/49977864/how-to-make-a-widget-fill-remaining-space-in-a-column

5条答案

按热度按时间

ttp71kqs1#

不是100%肯定，但我认为你是认真的。扩展的小部件扩展到它可以使用的空间。虽然我认为它的行为有点不同的行或列。

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

赞(0）回复(0）举报 2022-11-30

ff29svar2#

您可以使用：
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),
  ],
)

赞(0）回复(0）举报 2022-11-30

uqzxnwby3#

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

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

赞(0）回复(0）举报 2022-11-30

zxlwwiss4#

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

赞(0）回复(0）举报 2022-11-30

gr8qqesn5#

我的案例是这样的：

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

赞(0）回复(0）举报 2022-11-30

我来回答

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

5条答案

相关问题

热门标签

最新问答