flutter - Flutter ListView 不会占用所有空间
问题描述
我是 Flutter 的新手，正在尝试开发我的第一个应用程序。
这是我的代码：
class PopularFoodsWidget extends StatefulWidget {
@override
_PopularFoodsWidgetState createState() => _PopularFoodsWidgetState();
}
class _PopularFoodsWidgetState extends State<PopularFoodsWidget> {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 600,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: PopularFoodItems(),
)
],
),
);
}
}
class PopularFoodTiles extends StatelessWidget {
String name;
String imageUrl;
String rating;
String numberOfRating;
String price;
String slug;
PopularFoodTiles(
{Key key,
@required this.name,
@required this.imageUrl,
@required this.rating,
@required this.numberOfRating,
@required this.price,
@required this.slug})
: super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(context, ScaleRoute(page: FoodDetailsPage()));
},
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10, right: 5, top: 5, bottom: 5),
child: Card(
color: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: const BorderRadius.all(
Radius.circular(5.0),
),
),
child: Container(
width: double.infinity,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Container(
alignment: Alignment.topRight,
width: double.infinity,
padding: EdgeInsets.only(right: 5, top: 5),
child: Container(
height: 28,
width: 28,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white70,
boxShadow: [
BoxShadow(
color: Color(0xFFfae3e2),
blurRadius: 25.0,
offset: Offset(0.0, 0.75),
),
]),
child: Icon(
Icons.favorite,
color: Color(0xFFfb3132),
size: 16,
),
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Center(
child: Image.asset(
'assets/images/popular_foods/' +
imageUrl +
".png",
width: 130,
height: 140,
)),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.only(left: 5, top: 5),
child: Text(name,
style: TextStyle(
color: Color(0xFF6e6e71),
fontSize: 15,
fontWeight: FontWeight.w500)),
),
Container(
alignment: Alignment.topRight,
padding: EdgeInsets.only(right: 5),
child: Container(
height: 28,
width: 28,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white70,
boxShadow: [
BoxShadow(
color: Color(0xFFfae3e2),
blurRadius: 25.0,
offset: Offset(0.0, 0.75),
),
]),
child: Icon(
Icons.near_me,
color: Color(0xFFfb3132),
size: 16,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
alignment: Alignment.topLeft,
padding: EdgeInsets.only(left: 5, top: 5),
child: Text(rating,
style: TextStyle(
color: Color(0xFF6e6e71),
fontSize: 10,
fontWeight: FontWeight.w400)),
),
Container(
padding: EdgeInsets.only(top: 3, left: 5),
child: Row(
children: <Widget>[
Icon(
Icons.star,
size: 10,
color: Color(0xFFfb3132),
),
Icon(
Icons.star,
size: 10,
color: Color(0xFFfb3132),
),
Icon(
Icons.star,
size: 10,
color: Color(0xFFfb3132),
),
Icon(
Icons.star,
size: 10,
color: Color(0xFFfb3132),
),
Icon(
Icons.star,
size: 10,
color: Color(0xFF9b9b9c),
),
],
),
),
Container(
alignment: Alignment.topLeft,
padding: EdgeInsets.only(left: 5, top: 5),
child: Text("($numberOfRating)",
style: TextStyle(
color: Color(0xFF6e6e71),
fontSize: 10,
fontWeight: FontWeight.w400)),
),
],
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.only(left: 5, top: 5, right: 5),
child: Text('\$' + price,
style: TextStyle(
color: Color(0xFF6e6e71),
fontSize: 12,
fontWeight: FontWeight.w600)),
)
],
)
],
),
)),
),
],
),
);
}
}
class PopularFoodItems extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
PopularFoodTiles(
name: "Fried Egg",
imageUrl: "ic_popular_food_1",
rating: '4.9',
numberOfRating: '200',
price: '15.06',
slug: "fried_egg"),
PopularFoodTiles(
name: "Mixed Vegetable",
imageUrl: "ic_popular_food_3",
rating: "4.9",
numberOfRating: "100",
price: "17.03",
slug: ""),
PopularFoodTiles(
name: "Salad With Chicken",
imageUrl: "ic_popular_food_4",
rating: "4.0",
numberOfRating: "50",
price: "11.00",
slug: ""),
PopularFoodTiles(
name: "Mixed Salad",
imageUrl: "ic_popular_food_5",
rating: "4.00",
numberOfRating: "100",
price: "11.10",
slug: ""),
PopularFoodTiles(
name: "Red meat,Salad",
imageUrl: "ic_popular_food_2",
rating: "4.6",
numberOfRating: "150",
price: "12.00",
slug: ""),
PopularFoodTiles(
name: "Mixed Salad",
imageUrl: "ic_popular_food_5",
rating: "4.00",
numberOfRating: "100",
price: "11.10",
slug: ""),
PopularFoodTiles(
name: "Potato,Meat fry",
imageUrl: "ic_popular_food_6",
rating: "4.2",
numberOfRating: "70",
price: "23.0",
slug: ""),
PopularFoodTiles(
name: "Fried Egg",
imageUrl: "ic_popular_food_1",
rating: '4.9',
numberOfRating: '200',
price: '15.06',
slug: "fried_egg"),
PopularFoodTiles(
name: "Red meat,Salad",
imageUrl: "ic_popular_food_2",
rating: "4.6",
numberOfRating: "150",
price: "12.00",
slug: ""),
],
);
}
}
我试图在我有 2 个小部件的页面上显示食物列表：一个用于搜索表单，一个用于 ListView。
问题是我的列表无法占用屏幕上的所有可用空间：
我尝试将高度从 400 更改为 600，现在看起来更好，所以我可以向下滚动，但我仍然无法看到所有项目......有
什么建议吗？
解决方案
您可以计算列表视图的正确可用高度，而不是放置 600？像这样，
height : MediaQuery.of(context).size.height
- Your_top_bar_height_including_searchBar
- Bottom_TabBar_Height
推荐阅读
- html - 有没有办法在 Chrome 浏览器开发者工具上检查文本是否转义？
- python - 在 Python 中保存斜率系数
- assembly - RISC-V 汇编语言程序将华氏温度转换为摄氏温度
- javascript - Javascript 代码仅在 Chrome 开发者工具打开时在 Chrome 中有效
- android - 编写一个使用 KeyEvent 将文本插入文本字段的 Android 系统应用程序。但扩展的 unicode 字符不可打印
- python - 我如何在 tkinter 中创建带有背景的圆形按钮
- wordpress - 在以前的多站点 WordPress 安装中无法查看、更改、添加或删除插件或主题。我应该怎么办？
- python - 尝试使用套接字和 tkinter 制作服务器应用程序
- sql - 混合索引和非索引字段的Django过滤器的效率？
- powerbi - azure 中嵌入的 powerbi 是否没有管理工作区、报告等的门户？