Flutter中如何用ListView展示onScan获取的item.model_Name数据？

第一步：先把解析的数据存起来 #

你现在的onScan只是打印数据，没有保存，UI根本拿不到这些数据。首先在你的scanDeviceProvider里加个列表变量来存解析后的item：

class ScanDeviceProvider extends ChangeNotifier {
  // 保留你原来的其他代码
  bool getVisible = ...; // 你的现有变量

  // 新增：存储解析后的item列表
  List<Data> items = [];
}

然后修改onScan，把解析出来的item存到这个列表里，还要通知UI更新：

Future<void> onScan(dynamic data) async {
  var dataResponse = DataResponse.fromJson(data);
  List<dynamic> dt = jsonDecode(jsonEncode(dataResponse.data).toString());
  
  // 先清空旧数据，再添加新数据
  scanDeviceProvider.items.clear();
  for (var element in dt) {
    var item = Data.fromJson(element);
    scanDeviceProvider.items.add(item);
    print(item.model_Name);
  }
  // 通知UI数据更新，这步很重要
  scanDeviceProvider.notifyListeners();
}

第二步：在指定位置添加ListView.builder #

原来的SizedBox里的Container直接换成ListView，注意Column里放ListView必须处理高度问题，要么用Expanded包裹让它占满剩余空间，要么给ListView加shrinkWrap: true（适合数据量小的情况）。这里用Expanded更稳妥：

return Container(
  color: Palette.scienceBlue,
  child: Visibility(
    replacement: DevicePage(),
    visible: scanDeviceProvider.getVisible,
    child: Column(
      children: [
        const AppBarSideBarAndAddButton(),
        // 用Expanded包裹ListView，解决高度报错问题
        Expanded(
          child: ListView.builder(
            // 列表长度就是你存的items数量
            itemCount: scanDeviceProvider.items.length,
            // 每个item的UI
            itemBuilder: (context, index) {
              final currentItem = scanDeviceProvider.items[index];
              // 这里用ListTile示例，你可以改成自定义的Container样式
              return ListTile(
                title: Text(currentItem.model_Name),
                // 还可以加副标题、图标等，比如：
                // subtitle: Text("其他字段"),
                // leading: Icon(Icons.devices),
              );
            },
          ),
        ),
      ],
    ),
  ),
);

常见错误排查 #

• 忘记调用notifyListeners()：数据更新后UI不会刷新，所以一定要加
• 没处理ListView的高度：Column里的ListView默认会无限高度，必须用Expanded或者shrinkWrap
• itemCount设置错误：比如写成固定值，导致越界或者显示不全

内容的提问来源于stack exchange，提问作者natt