Flutter - 在横向模式下为网格视图单元显示空白

问题描述

我有一个问题，在颤振中获得网格视图单元格中的空白区域，尤其是当设备处于横向时，代码是：

return Container(
  padding: EdgeInsets.only(top: 15),child: GridView.builder(
    itemCount: recipesList.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,crossAxisspacing: 0.0,mainAxisspacing: 0.0,//childAspectRatio: 1,),itemBuilder: (BuildContext context,int index) {
      Recipe recipe = recipesList[index];
      return dismissible(
          key: UniqueKey(),child: Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),margin: EdgeInsets.all(8),color: Colors.white,elevation: 5,child: InkWell(
    onTap: (){},child: Column(
      // padding: EdgeInsets.zero,mainAxisAlignment: MainAxisAlignment.start,children: [
        Container(
          child: Image.asset(
            'images/${recipe.picture}',height: 200,width: double.infinity,fit: BoxFit.cover,Container(
          padding: EdgeInsets.all(8.0),child: Row(
            children: [
              Expanded(
                child: Container(
                  alignment: Alignment.topLeft,//margin: EdgeInsets.only(left: 10),child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,children: [
                      Text(
                        '${recipe.id} - ${recipe.title}',maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(
                          fontSize: 16.0,fontWeight: FontWeight.w500,Text(
                        'by UnkNown Chef',style: TextStyle(
                          fontSize: 12.0,fontWeight: FontWeight.w300,Row(
                        children: [
                          Icon(
                            Icons.star,color: Colors.orange,size: 20.0,Icon(
                            Icons.star,color: Colors.grey[400],],)
                    ],IconButton(
                icon: recipe.isFavorite
                    ? Icon(Icons.favorite,color: Colors.red)
                    : Icon(Icons.favorite_outline_outlined,color: Colors.grey),iconSize: 36,onpressed: (){},);
    },);

结果如下：

但在横向模式下这不是我想要的

想要的结果是这样的

我怎样才能让这张卡片在横向上看起来像这样？

解决方法

默认的 childAspectRatio 是 1.0，意思是 width = height。如果您想获得预期的结果，请将您的容器包装在 Expanded 小部件中并删除 Image 高度属性，如下所示

Expanded(
  child: Container(
    child: Image.asset(
      'images/${recipe.picture}',width: double.infinity,fit: BoxFit.cover,),)