运行后的颤振列表视图为空，但仅用颤振热加载填充

Question

如何更正此代码?这可能引发了寻求另一种解决方案的需要。

在这里输入图像描述这个结果只在热重载之后出现，并且在第一次启动时它是空的。

class PageOnes extends StatefulWidget {
final String pageName;
const PageOnes({
required this.pageName,
Key? key,
}) : super(key: key);
@override
State<StatefulWidget> createState() => _PageOnesState();
}
class _PageOnesState extends State<PageOnes> {
List<String> items = [];
@override
Widget build(BuildContext context)  {
deviceInfo();
return Scaffold(
appBar: AppBar(
title: Text(widget.pageName),
),
body: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index],style: const TextStyle(fontFamily: 'Proximal', fontSize: 18),
),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(
thickness: 5,
endIndent: 10,
indent: 10,
)),
);
}
void deviceInfo() async  {
const int MEGABYTE = 1024 * 1024;
DeviceInfoPlugin deviceInfoPlugin = DeviceInfoPlugin();
AndroidDeviceInfo androidDeviceInfo = await deviceInfoPlugin.androidInfo;
items.add('Brand: ${androidDeviceInfo.manufacturer}.');
}
}

Answer 1

您正在使用future方法，第一帧数据不可用，需要一些时间来获取数据。尝试使用FutureBuilder

class _PageOnesState extends State<PageOnes> {
Future<void> deviceInfo() async {
List items = [];
const int MEGABYTE = 1024 * 1024;
DeviceInfoPlugin deviceInfoPlugin = DeviceInfoPlugin();
AndroidDeviceInfo androidDeviceInfo = await deviceInfoPlugin.androidInfo;
items.add('Brand: ${androidDeviceInfo.manufacturer}.');
return items;
}
late final myFuture = deviceInfo();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.pageName),
),
body: FutureBuilder(
future: myFuture,
builder: (context, snapshot) {
if(snapshot.hasData){
final items  = snapshot.data;
return  ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(
items[index],
style: const TextStyle(fontFamily: 'Proximal', fontSize: 18),
),
);
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(
thickness: 5,
endIndent: 10,
indent: 10,
)),
}
return CircularProgressIndicator();
},
),
);
}
}

不推荐，但你可以欺骗。

不要在构建方法中直接调用method。使用intitState

@override
void initState() {
super.initState();
deviceInfo();
}

void deviceInfo() async  {
.....
setState((){});
}