垂直视口高度为无界

这是我的代码:

@override
Widget build(BuildContext context) {
  return new Material(
    color: Colors.deepPurpleAccent,
    child: new Column(
     mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
          return new Center(
              child: new CellWidget()
          );
        }),)]
    )
  );
}

例外情况如下:

I/flutter ( 9925): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 9925): The following assertion was thrown during performResize():
I/flutter ( 9925): Vertical viewport was given unbounded height.
I/flutter ( 9925): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 9925): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 9925): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 9925): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 9925): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 9925): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 9925): the height of the viewport to the sum of the heights of its children.
I/flutter ( 9925): 
I/flutter ( 9925): When the exception was thrown, this was the stack:
I/flutter ( 9925): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:827:15)
I/flutter ( 9925): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:880:6)
I/flutter ( 9925): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9)

当前回答

我们可以用两种方法来解决上述问题

1. 使用灵活的部件，

Flexible小部件可以在Row、Column和Flex中使用。扩展以填充主轴中的可用空间的灵活性(例如，水平扩展[Row]或垂直扩展[Column])

但是，请记住，与Expanded不同，The Flexible小部件不需要子部件填充可用空间。所以，最好使用Flexible。

Column(
  children: <Widget>[
    Flexible( 
      child: ListView(...),
    ),
  ],
)

2. 使用shrinkWrap: true

使用shrinkWrap为true，我们告诉Listview渲染它的List到可用空间，而不是在剩余屏幕以下。

Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, 
    ),
  ],
)

此外，物理属性可以用来允许/禁止滚动Listview

停止滚动

 ListView(
      shrinkWrap: true, 
      physics: NeverScrollableScrollPhysics(),
    ),

允许滚动

 ListView(
      shrinkWrap: true, 
      physics: ScrollPhysics(),
    ),

2021-06-12 12:57:06

其他回答

有一个名为Center的小部件。它应该帮助你实现你想做的事情(垂直居中)。中心小部件的正式文档

2019-10-11 16:58:12

虽然shrinkWrap可以做到，但你不能在ListView中滚动。

如果你想要滚动功能，你可以添加物理属性:

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    physics: ScrollPhysics(),
...

2020-05-15 13:42:15

您也可以将Expanded()作为该小部件的父部件。

2023-01-25 07:10:56

ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 100,
                      width: double.infinity,
                      color: Colors.pinkAccent,

                    ),
                  );
                },
              ),

2022-07-10 17:12:18

如果你使用CustomScrollView

你可以试试SliverFillRemaining

2022-04-05 13:51:56

垂直视口高度为无界

推荐文章

最新文章

标签