Flutter ListView初始为空仅热重载后填充，如何修正代码？

核心问题 #

1. 异步操作未触发UI更新：deviceInfo是异步方法，获取设备信息后修改了items列表，但没有调用setState通知Flutter框架重新构建UI，导致首次启动时UI不会刷新。
2. 错误的初始化时机：在build方法中调用deviceInfo，build会在UI重建时多次执行，不仅会重复获取设备信息，还可能引发不必要的性能问题。

修正步骤 #

• 将设备信息的获取逻辑移到initState生命周期方法中，该方法仅在组件初始化时执行一次。
• 在异步操作完成、修改items后，调用setState触发UI更新。

修正后的完整代码 #

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
  void initState() {
    super.initState();
    // 组件初始化时仅执行一次设备信息获取
    deviceInfo();
  }

  @override
  Widget build(BuildContext context) {
    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;
    // 修改数据后调用setState触发UI更新
    setState(() {
      items.add('Brand: ${androidDeviceInfo.manufacturer}.');
    });
  }
}

关键修改说明 #

• initState替代build调用：确保设备信息仅在组件首次创建时获取一次，避免重复请求和数据重复添加。
• setState包裹数据修改：当异步操作完成后，通过setState通知Flutter框架状态已变更，触发UI重建，此时ListView会根据更新后的items列表渲染内容。

内容的提问来源于stack exchange，提问作者Nicola Bogolyub Frutorian