列内的容器内的GridView不会填满屏幕的其余部分

问题描述

简短版本：

在容器中没有足够项目的GridView不会填满屏幕的其余部分。

长版：

我的Flutter应用程序具有一个应可滚动的列，该列具有以下子代：

带图片的容器
用于间距的SizedBox
带有GridView的容器（用于样式设置）

如果GridView中的项目不够用，则容器（包含GridView）的颜色不会应用到屏幕末端。

这是我的代码结构：

return Scaffold(
      backgroundColor: Color(0xFF0f2447),body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              // First Column Item
              Container(
                height: 250,decoration: Boxdecoration(
                  image: decorationImage(
                    image: Assetimage('assets/images/ise.png'),fit: BoxFit.cover,),child: Container(
                  decoration: Boxdecoration(
                    gradient: LinearGradient(
                      begin: Alignment.bottomLeft,colors: [
                        Colors.black.withOpacity(0.0),Colors.black.withOpacity(0.2),],// Second Column Item
              SizedBox(
                height: 20,// Third Column Item
              Container(
                // What I have tried
                // height: double.infinity,(Error: BoxConstraints forces an infinite height.)
                // height: 500,(Works,but depends on the device height (can't be static) )
                // height: "the remaining height of the screen whatever it is"
                margin: EdgeInsets.only(left: 10,right: 10),decoration: Boxdecoration(
                  color: Colors.grey[100],borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(50),topRight: Radius.circular(50),child: GridView.count(
                  physics: BouncingScrollPhysics(),shrinkWrap: true,crossAxisCount: 3,children: currentList
                      .map(
                        (item) => ItemIcon(
                          label: item['title'],icon: Assetimage(item['iconPath']),changeView: changeView,itemId: item['itemId'],)
                      .toList(),);

ItemIcon是一个自定义窗口小部件，它具有固定大小的图像和带有填充的文本。

当前列表如下：（只是为了避免长代码）

final List<Map<String,Object>> examples = [
 {
    'title': 'Test','itemId': 0,'iconPath': 'assets/icons/icon.png',},...
]

致歉的标题致歉。

解决方法

尝试将third container包裹在Expanded class中，它将完成您的工作。

Expanded占用了Row/Column中的剩余空间。

代码

        Expanded(
           child: Container(
                // What I have tried
                // height: double.infinity,(Error: BoxConstraints forces an infinite height.)
                // height: 500,(Works,but depends on the device height (can't be static) )
                // height: "the remaining height of the screen whatever it is"
                margin: EdgeInsets.only(left: 10,right: 10),decoration: BoxDecoration(
                  color: Colors.grey[100],borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(50),topRight: Radius.circular(50),),child: GridView.count(
                  physics: BouncingScrollPhysics(),shrinkWrap: true,crossAxisCount: 3,children: currentList
                      .map(
                        (item) => ItemIcon(
                          label: item['title'],icon: AssetImage(item['iconPath']),changeView: changeView,itemId: item['itemId'],)
                      .toList(),) 
        )

替代

您仍然可以依靠前面的代码，并使用MediaQuery class来玩height。这样可以使高度统一到其他设备

              Container(
                // play with the floating number to get the desired height
                height: MediaQuery.of(context).size.height * 0.61,margin: EdgeInsets.only(left: 10,)

横向视图的另一种解决方法

您可以使用Stack class来实现均匀性。按原样使用第三个小部件。只需使用Stack为您的风景视图对齐项目。请阅读有关Positioned class的信息，它可以帮助您在视图中对齐项目

因此视图将

Stack(
  Container with an Image
  // the last one comes on top of the first view
  // no sizedbox required since you can align the item using Positioned
  Positioned(
    top: use media_query_dimension,left: use media_query_dimension,right: use media_query_dimension,bottom: use media_query_dimension.
    child: A Container with a GridView (for styling)
  )
)

dart user-interface