運行后的FlutterListview為空，但僅填充了FlutterHot重新加載

我該如何更正此代碼？這可能引發了贏得另一種解決方案的需要。

enter image description here 此結果僅在熱多載后出現，并且在第一次啟動時它是空的。

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}.');
     }
}

uj5u.com熱心網友回復：

您正在使用未來的方法，第一幀資料不可用，獲取資料需要一些時間。嘗試使用 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();
        },
      ),
    );
  }
}

不推薦，但你可以欺騙。

不要直接在構建方法中呼叫方法。使用初始化狀態

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

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

標籤：扑镖列表显示飞镖异步

上一篇：如何使用.NETC#將專案添加到ListView

下一篇：將模式更改為亮/暗時，ListView會添加自身的副本