Question

我正试图制作一个“横幅”，在转盘上显示天气，该转盘上显示了我从事的旧项目。这就是我想要的样子（我通过使用“堆栈”在转盘上显示它作弊）：

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

RenderCustomMultiChildLayoutBox对象具有无限大小   在布局过程中。

这可能意味着它是一个试图变大的渲染对象   尽可能地将它放置在另一个允许   它的孩子们可以自行选择大小。

提供不受限制的高度限制的最接近的祖先是：

RenderFlex＃a0c6e relayoutBoundary = up1 NEEDS-LAYOUT NEEDS-PAINT   创建者：列←MediaQuery←LayoutId-[<_ ScaffoldSlot.body>]←   CustomMultiChildLayout←AnimatedBuilder←DefaultTextStyle←   AnimatedDefaultTextStyle←_InkFeatures- [GlobalKey＃60a42墨水渲染器]   ←NotificationListener←物理模型←   AnimatedPhysicalModel←材质←⋯

parentData：offset = Offset（0.0，0.0）; id = _ScaffoldSlot.body（可以使用   大小）约束：BoxConstraints（0.0 <= w <= 411.4，0.0 <= h <= 683.4）大小：   MISSING方向：垂直mainAxisAlignment：起始mainAxisSize：最大值   crossAxisAlignment：中心verticalDirection：下约束   应用于RenderCustomMultiChildLayoutBox的是：   BoxConstraints（0.0 <= w <= 411.4，0.0 <= h <= Infinity）它的确切大小是   给出的是：大小（411.4，Infinity）

这是设备上显示的内容：

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

这是代码：

//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

也许将容器包装在SingleChildScrollView中比将其限制为屏幕高度更好，然后每次您的内容溢出时，它都可以滚动。

Answer 2

找到了解决方案。

在使用诸如行/列之类的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()),
          ),
        ],
      ),
    );
  }
}

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

2 个答案: