Flutter 商品列表页面开发教程：使用 FutureBuilder 处理异步数据

Flutter 商品列表页面开发教程：使用 FutureBuilder 处理异步数据

本教程将带你学习如何在 Flutter 中使用 FutureBuilder 处理异步数据，并展示如何构建一个包含商品列表的首页。教程涵盖了数据获取、列表渲染、加载指示器等关键步骤，并解释了 snapshot.data 为 null 的原因和解决方法。

代码示例

import 'package:flutter/material.dart';
import 'package:search_choices/search_choices.dart';
import 'package:video_book_ecommerce/compoment/ProductCard.dart';
import 'package:video_book_ecommerce/compoment/swipper.dart';
import 'package:video_book_ecommerce/service/GetProduct.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: FutureBuilder(
        //Future<List> getProducts(page, limit)
        future: GetProduct.getProducts(1, 10),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          print(snapshot.data);

          if (snapshot.hasData) {
            return Column(
              children: [
                // Swipper component

                // Product list
                Expanded(
                  child: ListView.builder(
                    itemCount: snapshot.data?.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ProductCard(
                        imageUrl: snapshot.data?[index]['imageUrl'],
                        title: snapshot.data?[index]['title'],
                        price: snapshot.data?[index]['price'],
                      );
                    },
                  ),
                ),
              ],
            );
          } else {
            print('no data');
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

snapshot.data 为 null 的问题

在 FutureBuilder 中，future 未完成时，即异步请求数据还未完成时，snapshot.data 的值为 null。这是因为在异步请求完成前，snapshot.data 尚未被赋值。因此，在使用 snapshot.data 时需要先进行判断，以避免出现空指针异常。

解决方法

使用 snapshot.hasData 判断 snapshot.data 是否为空。如果 snapshot.hasData 为 true，则 snapshot.data 包含异步请求返回的数据，否则表示异步请求尚未完成或失败。

代码示例

// 在 FutureBuilder 的 builder 中
builder: (BuildContext context, AsyncSnapshot snapshot) {
  if (snapshot.hasData) {
    // 异步请求已完成，使用 snapshot.data
    // ...
  } else {
    // 异步请求尚未完成或失败，显示加载指示器
    return Center(
      child: CircularProgressIndicator(),
    );
  }
},

总结

本教程详细介绍了如何在 Flutter 中使用 FutureBuilder 处理异步数据，并解释了 snapshot.data 为 null 的原因和解决方法。希望对您有所帮助。