Flutter读取Firebase实时数据库复杂JSON树中商品信息遇阻

我明白你现在的困境——你想从Firebase实时数据库里提取product_name和price字段，把它们展示成列表，但目前代码却把整个JSON树都用Text组件输出了。咱们来看看问题出在哪，以及怎么修复：

问题根源 #

你在ListView.builder的itemBuilder里用了Text("$data")，这里的data是从数据库获取到的完整数据Map，所以自然会把所有内容都打印出来。而你之前已经把数据整理到了item列表里，每个元素都是包含单个产品信息的Map，你需要访问这个列表里的单个元素来提取字段。

修改后的完整代码 #

class _BeveragesProductsState extends State<BeveragesProducts> {
  var _firebaseRef = FirebaseDatabase().reference().child('Products');
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beverages Products'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: StreamBuilder(
              stream: _firebaseRef.onValue,
              builder: (context, snap) {
                if (snap.hasData && !snap.hasError && snap.data.snapshot.value != null) {
                  Map data = snap.data.snapshot.value;
                  List item = [];
                  data.forEach((index, data) => item.add({"key": index, ...data}));
                  
                  return ListView.builder(
                    // 如果不需要倒序显示列表，可以去掉reverse: true
                    reverse: true,
                    itemCount: item.length,
                    itemBuilder: (context, index) {
                      // 取出当前索引对应的产品数据
                      final product = item[index];
                      return ListTile(
                        // 展示产品名称，用??处理字段为空的情况
                        title: Text(product['product_name'] ?? '无名称'),
                        // 展示价格，同样处理空值
                        subtitle: Text("价格: ${product['price'] ?? '0'}"),
                      );
                    },
                  );
                }
                // 处理数据未加载或为空的情况
                return Center(child: Text('暂无产品数据'));
              },
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点 #

• 在itemBuilder里，先取出当前索引的产品对象final product = item[index];
• 用product['product_name']和product['price']分别获取对应字段，并用??来处理字段为空的边界情况，避免出现空指针错误
• 把原来的Column换成了ListTile，这是Flutter里展示列表项更规范的组件，也可以根据需求换成自定义的Row或Column布局
• 添加了数据未加载时的默认展示，提升用户体验

这样修改后，你的列表就会逐个显示每个产品的名称和价格，而不是整个JSON数据啦。

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