0

我有一个里面有一个 PageView 的容器，里面包含了一些列。每当页面更改时，都会为 Container 的高度分配不同的高度。如果当前页面大小为 350，而下一个页面大小应为 735，我会收到“RenderFlex 在底部溢出 355 像素”错误。

GIF来演示问题

这是代码：

child: Container(
  height: _pageViewHeight,
  child: PageView(
    controller: _pageController,
    onPageChanged: (int page) {
      setState(() {
        _currentPage = page;
        _pageViewHeight = _heights[page];
      });
    },
    children: <Widget>[

      Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 60),
            child: Image(
              image: AssetImage('assets/images/3_todo.png'),
              width: 100,
              height: 100,
            ),
          ),
        ],
      ),

      Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Align(
              child: Text(
                "Download your data",
                style: TextStyle(
                  fontSize: 32,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image(
                image: AssetImage(
              'assets/images/json_tutorial.gif',
            )),
          ),
        ],
      ),
    ]),
),
Row(
    children: [_button(_currentPage)],
)

_heights[]包含两个高度。

当我转到第二页时，出现以下错误：

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 355 pixels on the bottom.

The relevant error-causing widget was
Column
lib\views\onboarding.dart:176
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

这是改变时的样子

这就是改变后的样子

有没有办法在没有这个错误的情况下动态改变大小？

4

1 回答 1

0

使用媒体查询来解决您的问题。全屏比例为1。现在定义一个比例，它不会溢出。

Var ratio = MediaQuery.of(context).size;

container(height: ratio.height * 0.5,
          width : ratio.width*0.5,
          child: yourWidget(),
         )
于 2021-01-29T18:40:52.580 回答