flutter - 列表视图生成器颤振
问题描述
我正在尝试从全局变量类中获取数据,然后在 ListView 构建器中显示它,但 ListView 从全局变量数组中返回 null。但是当我热重新加载页面时,它会在小部件中显示数据,但不会以初始状态显示。尝试使用初始化状态,Future 构建器,但打印显示全局变量数组不为空,但 ListView 构建器将其视为空数组。我是新来的。理论上变量不是在第一次运行时存储来自全局变量的数据,但是当刷新页面或从任何其他页面返回时,它会显示数据,请帮助我。
import 'package:flutter/material.dart';
import 'package:food_express/classes/AllShefMold.dart';
import 'package:food_express/classes/TodaysLunch.dart';
import 'package:food_express/classes/menuClass.dart';
import 'package:food_express/constant/constant.dart';
import 'package:food_express/pages/restaurant/restaurant.dart';
import 'package:page_transition/page_transition.dart';
import '../../../constant/globals.dart' as global;
class FavouriteRestaurantsList extends StatefulWidget {
FavouriteRestaurantsList({Key key}) : super(key: key);
@override
_FavouriteRestaurantsListState createState() =>
_FavouriteRestaurantsListState();
}
class _FavouriteRestaurantsListState extends State<FavouriteRestaurantsList> {
List<TodaysLunch> listDetails = [];
var restaurantsList;
@override
initState() {
restaurantsList = getItems();
super.initState();
}
List<TodaysLunch> getItems() {
List<TodaysLunch> listDetails = [];
for (var shef in global.NearBy) {
for (var lunch in shef.totalMenu) {
if (lunch.type == "Todays Menu") {
for (var item in lunch.menu) {
TodaysLunch menu = TodaysLunch(shef, item.id, item.Category,
item.Details, item.DishName, item.Price);
listDetails.add(menu);
}
}
}
}
return listDetails;
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Column(
children: [
Padding(
padding: EdgeInsets.all(fixPadding),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Todays Lunch',
style: headingStyle,
),
InkWell(
onTap: () {
// Navigator.push(context, PageTransition(type: PageTransitionType.downToUp, child: MoreList()));
},
child: Text('View all', style: moreStyle),
),
],
),
),
Container(
width: width,
height: 170.0,
child: ListView.builder(
itemCount: restaurantsList.length,
scrollDirection: Axis.horizontal,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
final item = restaurantsList[index];
return InkWell(
onTap: () {
// Navigator.push(context, MaterialPageRoute(builder: (context)=>Restaurant(item)));
Navigator.push(
context,
PageTransition(
type: PageTransitionType.fade,
child: Restaurant(item.mold)));
},
child: Container(
width: 130.0,
decoration: BoxDecoration(
color: whiteColor,
borderRadius: BorderRadius.circular(5.0),
),
margin: (index != (restaurantsList.length - 1))
? EdgeInsets.only(left: fixPadding)
: EdgeInsets.only(
left: fixPadding, right: fixPadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 110.0,
width: 130.0,
alignment: Alignment.topRight,
padding: EdgeInsets.all(fixPadding),
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(5.0)),
image: DecorationImage(
image: NetworkImage(
item.mold.DisplayImage),
fit: BoxFit.cover,
),
),
child: InkWell(),
),
Container(
width: 130.0,
height: 50.0,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: Text(
item.DishName,
style: listItemTitleStyle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Padding(
padding: EdgeInsets.only(
left: 5.0, right: 5.0),
child: Text(
item.Details,
style: listItemSubTitleStyle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
],
),
),
);
},
))]);
}
}
解决方案
尝试使用初始化状态,Future 构建器,但打印显示全局变量数组不为空,但 ListView 构建器将其视为空数组。
这种行为是正常的。即使您更新了变量(在这种情况下,restaurantsList
数组填充了数据),框架也不会知道restaurantsList
数组已更改;因此,它不会更新屏幕中的视图或小部件。这就是为什么在热重载时会填充列表视图的原因,在热重载期间框架会检查变量的状态,然后重建小部件。
要触发重建,ListView
您应该使用内置setState
方法或遵循任何状态管理工具。
@override
initState() {
getItems();
super.initState();
}
Future<void> getItems() async {
await Future.delayed(Duration(milliSeconds:500));
List<TodaysLunch> listDetails = [];
for (var shef in global.NearBy) {
for (var lunch in shef.totalMenu) {
if (lunch.type == "Todays Menu") {
for (var item in lunch.menu) {
TodaysLunch menu = TodaysLunch(shef, item.id, item.Category,
item.Details, item.DishName, item.Price);
listDetails.add(menu);
}
}
}
}
setState(() {
restaurantsList = listDetails;
});
}
推荐阅读
- arrays - 如何将数组数据从请求保存到 Laravel 中的数据库?
- javascript - 我如何从 puppeteer 发送 get ?
- javascript - 用useEffect显示模态的方法是什么?
- python - 如何使用 python 或 pandas 根据包含字典列表的列过滤 DataFrame?
- amazon-web-services - 通过 event.get() 调用 Lambda 事件?
- java - 如何使用 void set 方法在静态常量助手类中创建对象?
- json - 创建 json 的哈希/指纹 - 最佳(快速)方式
- vagrant - vagrant & virtualbox:两个仅主机的网络接口不允许重叠
- export-to-csv - 在 dbVisualizer 中设置 CSV 输出的小数点分隔符
- c++ - 如何使用 C++ 中的系统函数执行具有多字节字符的命令