如何使容器连续填充可用的垂直空间? [英] How to get Containers to fill available vertical space in a Row?

问题描述

有人可以帮我吗?

我正在努力弄清楚如何使彩色容器能够扩展以匹配其行中最高的容器的高度.

I'm struggling to figure out how I can get the coloured containers to extend to match the height of the tallest one in their row.

当前它们没有固定的高度/宽度，并被包裹在Expanded小部件中以获取其动态大小.

Currently they have no fixed height/width and are wrapped in Expanded widgets to get their dynamic size.

如果可能的话，我想保持他们的响应能力.一旦屏幕足够小，我已经有一种方法可以切换到列而不是行.进入列"后，由于没有水平滚动，因此可以使用 width:double.infinity .

I'd like to keep their responsive sizes if possible. I already have a method in place to switch to a Column instead of a Row once the screen is small enough. Once in a Column I can use width: double.infinity because there is no horizontal scroll..

这是所用代码的示例(很抱歉！太多了！):

This is an example of the code used (sorry there's so much!):

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

推荐答案

使用 IntrinsicHeight 小部件将行项目的高度调整为最大一排项目:

To adjust row items height to biggest one wrap row of items with IntrinsicHeight widget:

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

这里是dartpad演示.

Here is dartpad demo.

这篇关于如何使容器连续填充可用的垂直空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！