如何将列最大高度限制为屏幕高度？即让孩子“match_parent”大小

Question

我正在尝试制作一个“横幅”，在显示我从事过的旧项目的旋转木马上显示天气。 这就是我希望它看起来的样子（我通过使用“堆栈”将其显示在轮播上作弊）：

我创建了一个列并添加了横幅，然后是轮播小部件。 显示其中任何一个都没有问题，但是当尝试首先显示具有固定高度的横幅，然后显示未绑定大小的轮播时，我收到以下错误：

RenderCustomMultiChildLayoutBox 对象被赋予了无限大小 在布局期间。

这可能意味着它是一个试图变大的渲染对象 尽可能，但它被放在另一个渲染对象中，允许 它的孩子可以选择自己的尺寸。

提供无限高度约束的最近祖先是：

RenderFlex#a0c6e relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT 创建者：列 ← MediaQuery ← LayoutId-[<_scaffoldslot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#60a42 墨迹渲染器] ← NotificationListener ← PhysicalModel ← AnimatedPhysicalModel ← 材质 ← ⋯

parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body（可以使用 大小）约束： BoxConstraints(0.0

这是设备上显示的内容：

我想我理解这个问题，但我找不到将第二个孩子（轮播）限制到剩余屏幕区域的方法。

代码如下：

//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 小部件（例如行/列）时，您可以将子组件包装在“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()),
          ),
        ],
      ),
    );
  }
}

Answer 2

也许将 Container 包装在 SingleChildScrollView 中是一个更好的选择，而不是仅仅将其限制在屏幕高度，然后每次您的内容溢出时，它将是可滚动的。