Question

当我尝试将GridView放入Column的子项SingleScrollChildView内时，底部溢出了几千个像素。 shrinkWrap中的GridView设置为true。同样，scrollphysics设置为NeverScrollableScrollPhysics()。我竭尽全力尝试使此GridView与SingleChildScrollView一起滚动。这是我的Widget build(BuildContext context)代码。任何帮助将不胜感激。

return WillPopScope(
        child: Column(
          children: <Widget>[
            // the fixed container
            SizedBox(
              height: 80,
              width: double.infinity,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.blue.shade800,
                ),
              ),
            ),

            //Scrolling Section of the Page
            SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column( // Column to hold all the vertical elements including the gridview
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  // Carousal slider in a sized box of height 250
                  SizedBox(
                    height: 250,
                    width: double.maxFinite,
                    child: _adSlider(),
                  ),

                  // A Text Container
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 15),
                    child: Text("GridView Heading"),
                  ),

                  // gridview starts here

                  GridView.count(
                    shrinkWrap: true,
                    addAutomaticKeepAlives: true,
                    physics: NeverScrollableScrollPhysics(),
                    scrollDirection: Axis.vertical,
                    crossAxisCount: 2,
                    children: List.generate(20, (index) {
                      return productCard(index);
                    }),
                  )
                ],
              ),
            ),
          ],
        ),
        onWillPop: () async => true);

在我添加GridView之前，一切都很好。

编辑：添加长SizedBox代替GridView也会引发溢出错误。

这是错误

RenderFlex在底部溢出603个像素。

 The relevant error-causing widget was
    Column 
lib\…\home\ui_home.dart:24
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.

Answer 1

使用扩展小部件包装Gridview

这是我的做法：

                return Center(
                  child: Container(
                    child: Column(
                      children: [
                        Expanded(
                          child: GridView.count(
                            crossAxisCount: 2,
                            childAspectRatio: 1.0,
                            mainAxisSpacing: 4.0,
                            crossAxisSpacing: 4.0,
                            children: snapshot.data.documents
                                .map((doc) => _myGridTile(doc))
                                .toList(),
                          ),
                        ),
                      ],
                    ),
                  ),
                );

忽略来自Firestore的snapshot.data，您可以将列表放在此处

GridView在SingleChildScrollView内部溢出

1 个答案: