dart - 如何将列的最大高度限制为屏幕高度？即让 child “match_parent”大小

Question

我正在尝试制作一个“横幅”，在转盘上显示天气，该转盘上显示了我从事的旧项目。
这是我想要的样子(我通过使用“Stack”在转盘上显示它作弊):



我创建了一个列并添加了横幅，然后添加了轮播小部件。
当显示其中任何一个都没有问题时，但是当尝试首先显示固定高度的横幅，然后显示大小不受限制的轮播时，出现以下错误:

RenderCustomMultiChildLayoutBox object was given an infinite size during layout.

This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.

The nearest ancestor providing an unbounded height constraint is:

RenderFlex#a0c6e relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT creator: Column ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#60a42 ink renderer] ← NotificationListener ← PhysicalModel ← AnimatedPhysicalModel ← Material ← ⋯

parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size) constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=683.4) size: MISSING direction: vertical mainAxisAlignment: start mainAxisSize: max crossAxisAlignment: center verticalDirection: down The constraints that applied to the RenderCustomMultiChildLayoutBox were: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity) The exact size it was given was: Size(411.4, Infinity)

这是设备上显示的内容:



我想我理解问题所在，但是我找不到将第二个 child (轮播)约束到剩余屏幕区域的方法。

这是代码:

//main "App" build

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    final weatherWidget = WeatherWidget();
    return Scaffold(
      body: Column(
        children: <Widget>[
          weatherWidget,
          CarouselWidget(getCarouselImages()),
        ],
      ),
    );
  }

// banner widget build

@override
  Widget build(BuildContext context) {

    if (_startLocation == null) {
      print("d/ Error: No start location fetched!");
      return Container();
    } else {
      return Container(
       color: Color(0xFFFF00FF),
        padding: EdgeInsets.only(left: 16, right: 16, top: 40, bottom: 32),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
             'Uppsala',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            Text(
              'temp: -5.22',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              textAlign: TextAlign.end,
            ),
          ],
        ),
      );
    }
  } 

//Carousel Widget build

@override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 30),
      child: Carousel(
        images: _images,
        autoplay: true,
        autoplayDuration: Duration(seconds: 5),
        animationDuration: Duration(milliseconds: 1000),
        animationCurve: Curves.easeInOut,
        showIndicator: false,
        boxFit: BoxFit.contain,
      ),
    );
  }

如果您知道如何处理这种情况，请在下面分享。

Answer 1

找到了解决方案。

当使用诸如行/列之类的flex小部件时，您可以将一个 child 包装在“Flexible”小部件中。

如果没有为Flexible设置任何参数，它将消耗其父容器剩余的所有可用空间。

这是对先前代码的唯一更改:

//main "App" build

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    final weatherWidget = WeatherWidget();
    return Scaffold(
      body: Column(
        children: <Widget>[
          weatherWidget,
          Flexible(   //<--Wrapped carousel widget in a Flexible container
            child: CarouselWidget(getCarouselImages()),
          ),
        ],
      ),
    );
  }
}