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

Posted 2023-02-23

【中文标题】如何将列最大高度限制为屏幕高度？即让孩子“match_parent”大小

【英文标题】：How do I confine column max height to screen height? i.e let children "match_parent" size

【发布时间】：2019-06-08 07:00:42

【问题描述】：

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

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

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

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

【参考方案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()),
          ),
        ],
      ),
    );
  

【参考方案2】：

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

【讨论】：

将列包装在 singleChildScrollView 中不会改变结果。我仍然收到“对象被赋予无限大小”错误。 SingleChildScrollView( scrollDirection: Axis.vertical, child: Column( children: <Widget>[ weatherWidget, CarouselWidget(getCarouselImages()), ], ), ),

此外，我的意图不是将第二个孩子的大小设置为大于呈现横幅后剩余的可用空间。必须有一种方法来设置一个小部件来填充剩余的parant区域吗？对吗？