Flutter 如何将小部件填充到完整的可用行高度

布局如下所示：

---

这是一个

行

，它位于

列表视图

中。里面有一个

列

，包含

文本

小部件、前导和尾随小部件。问题是前面的小部件必须填充

行的自由高度。
行
高度由
列
和
文本
小部件决定，并且前导小部件应该调整到这个大小，而不是试图将
行
高度增加到无穷大（例如，前导小部件可以是一个具有无限高度和给定宽度的彩色
容器
）。可以这样做吗？
如果希望它们具有主轴的最大尺寸，可以添加一个属性
mainAxisSize:mainAxisSize.max
如果希望将其设置为最小大小，请改用
mainAxisSize.min
（适用于行和列）

如果要在“最大尺寸”上创建十字轴，则可以在其前面添加SizedBox，然后使用double.infinity添加高度或宽度
像这样的高度：双重无限

使用
crossAxisAlignment:crossAxisAlignment.stretch
填充
行的
高度（
列的
宽度），即沿横轴拉伸

使用扩展的
小部件填充主轴上的空间。flex属性将确定每个小部件的比例

对于后面的小部件，只需使用
Center
小部件将其居中即可

要使您的
行
位于
列表视图
中，并延伸到最高的子级的高度，请将
行
置于
IntrinsicHeight
小部件中

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Row and Column',
      home: Scaffold(
        body: ListView(
          children: [
            IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(child: MyWidget()),
                  Expanded(
                    flex: 3,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        MyTextWidget(
                          text:
                              'I like to believe that science is becoming mainstream.',
                        ),
                        MyTextWidget(
                          text:
                              'There is no known objects accounting for most of the effective gravity in the universe.',
                        ),
                        MyTextWidget(
                          text: "Let's explore because it's fun.",
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: SizedBox(height: 40.0, child: MyWidget()),
                    ),
                  ),
                ],
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
  );
}

class MyTextWidget extends StatelessWidget {
  final String text;

  const MyTextWidget({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.all(4.0),
        color: Colors.blueGrey,
        child: Text(text),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(color: Colors.blueGrey),
    );
  }
}
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Row and Column',
      home: Scaffold(
        body: ListView(
          children: [
            IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(child: MyWidget()),
                  Expanded(
                    flex: 3,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        MyTextWidget(
                          text:
                              'I like to believe that science is becoming mainstream.',
                        ),
                        MyTextWidget(
                          text:
                              'There is no known objects accounting for most of the effective gravity in the universe.',
                        ),
                        MyTextWidget(
                          text: "Let's explore because it's fun.",
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: SizedBox(height: 40.0, child: MyWidget()),
                    ),
                  ),
                ],
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
  );
}

class MyTextWidget extends StatelessWidget {
  final String text;

  const MyTextWidget({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.all(4.0),
        color: Colors.blueGrey,
        child: Text(text),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(color: Colors.blueGrey),
    );
  }
}

@蒂埃里的回答很好。但是，如果您的行具有动态高度（例如，您的字幕具有未定义的长度，并且行应根据其展开高度），那么您可以使用
堆栈
小部件作为列表项的根小部件来处理此问题。以下是工作代码：

  @override
  Widget build(BuildContext context) {
    final leadingWidgetWidth = 120.0;

    return Stack(children: [
      Positioned.fill(
        child: Container(
          alignment: Alignment.centerLeft,
          // This child will fill full height, replace it with your leading widget
          child: Container(
            color: Colors.blue,
            width: leadingWidgetWidth,
          ),
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(width: leadingWidgetWidth),
          Expanded(
            // Here your column with texts
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text('Title'),
                Text('Some dynamic text'),
                Text('Some dynamic text'),
              ],
            ),
          ),
          Expanded(
            // Here your trailing widget
            child: Container(color: Colors.blueGrey),
          )
        ],
      )
    ]);
  }

我忘了提到我的
行
在
列表视图
中。在我的例子中，
行
高度由于内部的
文本
小部件而被拉伸，它没有固定的高度。在您的情况下，
行
仅限于
大小框
的尺寸。这就是IntrinsicHeight的作用。我更新了我的答案。我忘了提到我的
行
在
列表视图
中。在我的例子中，
行
高度由于内部的
文本
小部件而被拉伸，它没有固定的高度。然后您可以添加SizedBox并向其添加大小。使用
MediaQuery.of（context）.size
是推荐的，如果你想让它响应顺便说一句，如果我看到了你的案例，行高是灵活的，它跟随它的子行大小，那么如果你想拉伸最左边的项目，那么你可以添加double.infinity，但是你必须定义行的最大大小（你在他们面前放了一个盒子）是的，
Stack
比
IntrinsicHeight
更优雅，谢谢。谢谢。
IntrinsicHeight
也是一个选项，但它可能会导致性能问题。特别是如果在ListView中使用它。从flatter.dev:
这个类相对昂贵，因为它在最终布局阶段之前添加了一个推测性的布局过程。尽可能避免使用它。