底部溢出 23 像素的 RenderFlex

Question

如何解决“A RenderFlex 在底部溢出 23 个像素”的异常。在我的应用程序中，我创建了 Gridview。但是当我运行我的代码时，每次都会得到 RenderFlex。我用 expnded add

包装 Gridview

滚动方向：Axis.vertical,
shrinkWrap: true,

但仍然没有任何效果得到这个异常。谁能纠正我；我在我的代码中做错了什么？我应该怎么做。

这是我出现错误的代码：

Widget build(BuildContext context) {
    return Scaffold(
       body:Container(
            height: 150,
            width: MediaQuery.of(context).size.width,
            color: Colors.grey[100],
            child: Column(children: [
              Expanded(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(10, 40, 0, 0),
                  child: Container(
                    child: Column(
                      children: [
                        Align(
                        alignment: Alignment.centerLeft,
                          child: Container(
                            child: Text('Oliver Queen'),
                          ),
                        ),
                        SizedBox(height:5),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            child: Text('olieequeen77@gmail'),
                          ),
                        ),
                        SizedBox(height:5),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            child: Text('9874561239'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ), 
              ),

             Expanded(
               child: GridView(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  children: <Widget>[
                    Container(
                      color: Colors.grey[100],
                      height: 90.0,
                      width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),    
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                  ],
               ),
             )
            ],
          ),
        ), 
      );
     }
  }

Answer 1

尝试将 Container 高度更改为 200

return Scaffold(
  body: Container(
    height: 200,
    width: MediaQuery.of(context).size.width,
    color: Colors.grey[100],
    child: Column(
      children: [
        Expanded(
          child: Padding(
            padding: EdgeInsets.fromLTRB(10, 40, 0, 0),
            child: Container(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      child: Text('Oliver Queen'),
                    ),
                  ),
                  SizedBox(height: 5),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      child: Text('olieequeen77@gmail'),
                    ),
                  ),
                  SizedBox(height: 5),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      child: Text('9874561239'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        Expanded(
          child: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2),
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            children: <Widget>[
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);
}

底部溢出 23 像素的 RenderFlex

A RenderFlex overflowed by 23 pixels on the bottom

flutter

flutter-layout

flutter-gridview