Flutter如何从Firebase获取数据展示商品？StreamBuilder仅返回'hi'怎么解决

问题排查与修复 #

你的代码核心逻辑错误导致始终返回hi文本，具体问题和修复方案如下： #

核心问题点

• ListView.builder的itemBuilder方法最后固定返回Text('hi')，你编写的Firestore文档映射逻辑没有被返回，完全属于无效代码
• itemCount写死为4，没有和Firestore返回的实际文档数量匹配
• 语法错误：独立的children: 片段没有任何作用，属于冗余代码
• 布局错误：Positioned组件只能作为Stack的直接子组件，嵌套在Padding中会触发布局异常

修正后代码

Container(
  height: 190,
  child: StreamBuilder(
    stream: collectionReference.snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      // 先处理加载中状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }
      // 处理错误状态
      if (snapshot.hasError) {
        return Center(child: Text('加载错误: ${snapshot.error}'));
      }
      if (snapshot.hasData) {
        // 拿到文档列表
        final docs = snapshot.data!.docs;
        // 文档为空时返回空提示
        if (docs.isEmpty) {
          return const Center(child: Text('暂无商品'));
        }
        return ListView.builder(
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.only(left: 16, right: 6),
          // 用实际文档数量作为itemCount，要限制最多4个的话可以写 math.min(4, docs.length)
          itemCount: docs.length,
          itemBuilder: (context, index) {
            // 直接取对应下标的文档
            final e = docs[index];
            return Container(
              margin: const EdgeInsets.only(right: 10),
              height: 199,
              width: 344,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(28),
                color: Colors.white,
                boxShadow: const [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0),
                    blurRadius: 6.0,
                  ),
                ],
              ),
              child: Stack(
                children: [
                  // 修复Positioned嵌套错误，移除外层Padding直接设置Positioned的参数
                  Positioned(
                    left: 10,
                    top: 10,
                    child: Image(
                      image: const AssetImage('assets/item1.png'),
                      // 注意Container高度只有190，图片高度设200会溢出，建议调整为160左右
                      height: 160,
                    ),
                  ),
                  Positioned(
                    right: 20,
                    top: 10,
                    child: Text(
                      e['name'],
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 25,
                        fontFamily: 'Poppins',
                        fontWeight: FontWeight.bold
                      ),
                    ),
                  ),
                  Positioned(
                    right: 20,
                    bottom: 10,
                    child: Text(
                      e['price'].toString(), // 价格是数字类型的话要转成字符串避免报错
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 30,
                        fontFamily: 'Poppins'
                      ),
                    ),
                  ),
                ],
              ),
            );
          }
        );
      }
      return const Center(child: Text('Empty'));
    }
  ),
)

额外注意事项

• 如果你需要限制最多展示4个商品，先导入dart:math，再把itemCount改为min(4, docs.length)即可
• 目前商品图片写死为本地资源，如果你的Firestore文档里存了图片链接，把AssetImage替换为NetworkImage(e['你的图片字段名'])即可
• 价格字段如果是数字类型，必须调用toString()方法，否则Text组件会报错

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