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

【问题标题】：Flutter - white spaces displaying for grid view cell in landscape modeFlutter - 在横向模式下为网格视图单元格显示空白
【发布时间】：2021-04-09 17:30:30
【问题描述】：

我在颤动的网格视图单元格中遇到一个问题，特别是当设备处于横向时，代码是：

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',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 12.0,
                          fontWeight: FontWeight.w300,
                        ),
                      ),
                      Row(
                        children: [
                          Icon(
                            Icons.star,
                            color: Colors.orange,
                            size: 20.0,
                          ),
                          Icon(
                            Icons.star,
                            color: Colors.orange,
                            size: 20.0,
                          ),
                          Icon(
                            Icons.star,
                            color: Colors.orange,
                            size: 20.0,
                          ),
                          Icon(
                            Icons.star,
                            color: Colors.grey[400],
                            size: 20.0,
                          ),
                          Icon(
                            Icons.star,
                            color: Colors.grey[400],
                            size: 20.0,
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
              IconButton(
                icon: recipe.isFavorite
                    ? Icon(Icons.favorite, color: Colors.red)
                    : Icon(Icons.favorite_outline_outlined,
                        color: Colors.grey),
                iconSize: 36,
                onPressed: (){},
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),
          );
    },
  ),
);

结果如下：

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

想要的结果是这样的

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

【问题讨论】：

标签： flutter gridview flutter-layout android-gridview removing-whitespace

【解决方案1】：

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

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

【讨论】：

我试过这个修改，它有效，谢谢。