Flutter - 横向模式下网格视图单元格的空白显示
Flutter - white spaces displaying for grid view cell in landscape mode
我在 flutter 的网格视图单元格中遇到白色 space 的问题,尤其是当设备处于横向时,代码是:
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: (){},
),
],
),
),
],
),
),
),
);
},
),
);
结果如下:
但在横向模式下这不是我想要的
想要的结果应该是这样的
如何使这些卡片在横向方向上看起来像这样?
默认的childAspectRatio
是1.0
意思是width = height
。如果您想获得预期的结果,请将您的容器包装在 Expanded
小部件中并删除 Image
高度 属性,如下所示
Expanded(
child: Container(
child: Image.asset(
'images/${recipe.picture}',
width: double.infinity,
fit: BoxFit.cover,
),
),
)
我在 flutter 的网格视图单元格中遇到白色 space 的问题,尤其是当设备处于横向时,代码是:
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: (){},
),
],
),
),
],
),
),
),
);
},
),
);
结果如下:
但在横向模式下这不是我想要的
想要的结果应该是这样的
如何使这些卡片在横向方向上看起来像这样?
默认的childAspectRatio
是1.0
意思是width = height
。如果您想获得预期的结果,请将您的容器包装在 Expanded
小部件中并删除 Image
高度 属性,如下所示
Expanded(
child: Container(
child: Image.asset(
'images/${recipe.picture}',
width: double.infinity,
fit: BoxFit.cover,
),
),
)