如何让容器填充一行中可用的垂直空间？答案

【问题标题】：How to get Containers to fill available vertical space in a Row?如何让容器填充一行中可用的垂直空间？
【发布时间】：2020-05-27 11:13:21
【问题描述】：

谁能帮帮我？

我正在努力弄清楚如何让彩色容器延伸以匹配其所在行中最高容器的高度。

目前它们没有固定的高度/宽度，并且被包裹在展开的小部件中以获得它们的动态大小。

如果可能，我想保持它们的响应尺寸。一旦屏幕足够小，我已经有一种方法可以切换到列而不是行。一旦在一个列中，我可以使用width: double.infinity，因为没有水平滚动..

这是使用的代码示例（抱歉，内容太多了！）：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverNavBar(),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                      children: _homePageContent(),
                     );
                  Footer()
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

_homePageContent() {
  return <Widget>[
    _HomePageInfoBox(
      backgroundColor: accentColor,
      title: 'THIS IS A TITLE',
      body:
          'Lorem ipsum...',
    ),
    _HomePageInfoBox(
      backgroundColor: primaryColorDark,
      title: 'THIS IS A TITLE',
      body:
          'Lorem ipsum....',
    ),
    _HomePageInfoBox(
      backgroundColor: primaryColor,
      title: 'THIS IS A TITLE',
      body:
          'Lorem ipsum...',
    ),
  ];
}

class _HomePageInfoBox extends StatelessWidget {
  const _HomePageInfoBox({
    Key key,
    @required this.title,
    @required this.body,
    @required this.backgroundColor,
  }) : super(key: key);

  final String title;
  final String body;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      Container(
      color: backgroundColor,
      child: Padding(
        padding: const EdgeInsets.all(50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text(
              title,
              style: TextStyle(
                  color: primaryTextColor,
                  fontSize: 25,
                  fontFamily: 'CoffeeAndTea'),
            ),
            SizedBox(height: 10),
            Text(
              body,
              style: TextStyle(
                  color: primaryTextColor,
                  fontSize: 24,
                  height: 1.4,
                  fontFamily: 'ElegantSans'),
            ),
            SizedBox(height: 20),
            Text(
              "Let's Go!",
              style: TextStyle(
                  color: Colors.white, fontFamily: 'CreamCake', fontSize: 30),
              textAlign: TextAlign.center,
            ),
          ],
        ),
       ),
     ),
    );
  }
}

【问题讨论】：

嗨，伙计，不，遗憾的是没有。我得到一个没有最大高度的渲染框错误。它对你有用还是你有任何其他想法？

标签： flutter dart flutter-layout flutter-web

【解决方案1】：

使用IntrinsicHeight 小部件将行项目高度调整为最大的一个包裹行：

  IntrinsicHeight(
    child:Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: _homePageContent(),
    ),
  ),

Here 是 dartpad 演示。

【讨论】：

应该注意的是，Flutter 文档团队不鼓励使用 IntrinsicWidth 和 IntrinsicHeight，因为它引入了一些相当大的性能损失，因为它实际上必须将其子级布局至少 2*在单个构建运行期间 N 次和多达 N² 次（其中 N 是从该点向下的树的深度）。本质上，只有在您确信这是实现特定布局的唯一实用方法时才使用它。

【解决方案2】：

用Expanded 包裹你的身体Text 小部件。由于您的父 Widget 是 Column，Expanded 将为该小部件提供所有可用的垂直空间。

Expanded(
  child: Text(
     body,
     style: TextStyle(
       color: primaryTextColor,
       fontSize: 24,
       height: 1.4,
       fontFamily: 'ElegantSans'),
 ),
),

或者您可以对 "Let's Go!" Text 小部件执行此操作，以避免该小部件一直向下移动到屏幕下方。

更新：

请注意，您可以使用IntrinsicHeight 作为提到的其他答案，但我总是尽量避免使用它，因为该类相对昂贵。这就是doc的原因：

这个类比较贵，因为它增加了投机性最终布局阶段之前的布局传递。避免在哪里使用它可能的。在最坏的情况下，这个小部件可能会导致布局在树的深度是 O(N²)。

【讨论】：