Question

在我的应用中，我将gridview.count放在列小部件中，但是gridview.count不会滚动并在底部显示溢出，因此请提出一些建议

这是我的代码

 @override
 Widget build(BuildContext context) {
 return Stack(
  children: <Widget>[
    Image.asset(
      "images/background.png",
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      fit: BoxFit.fill,
    ),
    Scaffold(
      backgroundColor: Color(0x00000000),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Padding(
                  padding: EdgeInsets.only(top: 50,bottom: 10),
                  child: Row(
                    children: <Widget>[
                      Spacer(flex: 2),
                      Text(
                        'Interests',
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                        style: TextStyle(
                          color: Color(0xFF0066CB),
                          fontSize: 20.0,
                        ),
                      ),
                      Spacer(),
                      Expanded(
                        child:SvgPicture.asset(
                          "images/vector.svg",
                          height: 30.0,
                          width: 30.0,
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 10,bottom: 90,left: 10,right: 10),
                child: GridView.count(
                     scrollDirection: Axis.vertical,
                     crossAxisCount: 3,
                     crossAxisSpacing: 5.0,
                     mainAxisSpacing: 5.0,
                     shrinkWrap: true,
                     children: List.generate(20, (index) {
                       return Padding(
                         padding: EdgeInsets.all(5.0),
                         child: Container(
                           child: SvgPicture.asset(
                             "images/register_top_logo_new.svg",
                           ),
                           padding: EdgeInsets.all(20.0),
                           height: 135.0,
                           width: 135.0,
                           decoration: BoxDecoration(
                             border: Border.all(
                               width: 1.0,
                               color: Color(0xFFF9AD16),
                             ),
                           ),
                         ),
                       );
                     },
                     ),
                   ),
              ),
            ],
          ),
       ),
     ),
    ],
   );
 }

这是我运行该应用程序时得到的日志

I/flutter (16748): The relevant error-causing widget was:
I/flutter (16748):   Column
I/flutter (16748):   file:///C:/Users/mayur/AndroidStudioProjects/flutter/webinar-mobile/lib/activities/interests_activity.dart:30:22
I/flutter (16748): 
I/flutter (16748): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (16748): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (16748): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (16748): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (16748): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (16748): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (16748): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (16748): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (16748): like a ListView.
I/flutter (16748): The specific RenderFlex in question is: RenderFlex#42dda relayoutBoundary=up5 OVERFLOWING:
I/flutter (16748):   needs compositing
I/flutter (16748):   creator: Column ← Center ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
I/flutter (16748):     CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter (16748):     _InkFeatures-[GlobalKey#417d7 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
I/flutter (16748):     PhysicalModel ← ⋯
I/flutter (16748):   parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter (16748):   constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=640.0)
I/flutter (16748):   size: Size(360.0, 640.0)
I/flutter (16748):   direction: vertical
I/flutter (16748):   mainAxisAlignment: start
I/flutter (16748):   mainAxisSize: max
I/flutter (16748):   crossAxisAlignment: center
I/flutter (16748):   verticalDirection: down
I/flutter (16748): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (16748): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (16748): unhandled element metadata; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#bcd18(), name: "images/register_top_logo_new.svg", colorFilter: null)

所以在这里gridview.count不会滚动，我尝试使用gridview.builder但它给出了同样的错误，所以请告诉我我在哪里出错了。

Answer 1

只需使用这样的扩展小部件包装您的网格视图

Expanded(
   child: Padding(
                padding: EdgeInsets.only(top: 10,bottom: 90,left: 10,right: 10),
                child: GridView.count(
                     scrollDirection: Axis.vertical,
                     crossAxisCount: 3,
                     crossAxisSpacing: 5.0,
                     mainAxisSpacing: 5.0,
                     shrinkWrap: true,
                     children: List.generate(20, (index) {
                       return Padding(
                         padding: EdgeInsets.all(5.0),
                         child: Container(
                           child: SvgPicture.asset(
                             "images/register_top_logo_new.svg",
                           ),
                           padding: EdgeInsets.all(20.0),
                           height: 135.0,
                           width: 135.0,
                           decoration: BoxDecoration(
                             border: Border.all(
                               width: 1.0,
                               color: Color(0xFFF9AD16),
                             ),
                           ),
                         ),
                       );
                     },
                     ),
                   ),
              ),
)

Answer 2

在SingleChildScrollView上方添加Column，这将滚动内部GridView并添加

物理学：NeverScrollableScrollPhysics()，在内部

GridView.count(
//.... existing code
physics: NeverScrollableScrollPhysics(),

）

之所以会这样，是因为Column和Gridview都占据了屏幕的全部高度，因此这里应该停止滚动。因此，对于NeverScrollableScrollPhysics，我们告诉GridView不要滚动，以便父窗口小部件可以滚动。

代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView Sample"),
      ),
      body: Stack(
        children: <Widget>[
          Image.asset(
            "images/background.png",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.fill,
          ),
          Scaffold(
            backgroundColor: Color(0x00000000),
            body: Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      child: Padding(
                        padding: EdgeInsets.only(top: 50, bottom: 10),
                        child: Row(
                          children: <Widget>[
                            Spacer(flex: 2),
                            Text(
                              'Interests',
                              textAlign: TextAlign.center,
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                              style: TextStyle(
                                color: Color(0xFF0066CB),
                                fontSize: 20.0,
                              ),
                            ),
                            Spacer(),
                            Expanded(
                              child: Container(
                                height: 30.0,
                                width: 30.0,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          top: 10, bottom: 90, left: 10, right: 10),
                      child: GridView.count(
                        scrollDirection: Axis.vertical,
                        crossAxisCount: 3,
                        crossAxisSpacing: 5.0,
                        mainAxisSpacing: 5.0,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        children: List.generate(
                          20,
                          (index) {
                            return Padding(
                              padding: EdgeInsets.all(5.0),
                              child: Container(
                                padding: EdgeInsets.all(20.0),
                                height: 135.0,
                                width: 135.0,
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    width: 1.0,
                                    color: Color(0xFFF9AD16),
                                  ),
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

注意：由于我没有图片，我用container替换了图片素材资源

输出：

gridview.count不会滚动颤动

2 个答案: