Flutter实战——微信项目进阶之数据展示和加载

2023-11-16 04:35:35

前言

继上文，我们在获取数据后，本文将重点讲解如何在 Flutter 中高效地展示和异步加载数据。掌握这些技巧对构建流畅且响应式用户界面的至关重要。

数据展示

1. ListView

ListView 是 Flutter 中展示列表数据最常见的组件。它支持多种类型的数据源，包括数组、数组流和异步数据流。要使用 ListView，只需提供一个项目构建器，用于生成列表中每个项目的 UI。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Text(items[index]);
  },
);

2. GridView

GridView 与 ListView 类似，但它用于展示网格状布局的数据。您可以指定网格中列和行的数量，以及项目之间的间隙。

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Text(items[index]);
  },
);

3. CustomScrollView

CustomScrollView 为您提供了更大的灵活性，因为它允许您创建自定义滚动视图，其中包含多个滚动区域。这对于实现复杂布局（例如具有头部和底部的列表）非常有用。

CustomScrollView(
  slivers: [
    SliverAppBar(title: Text('Title')),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Text(items[index]);
        },
        childCount: items.length,
      ),
    ),
  ],
);

异步加载数据

1. FutureBuilder

FutureBuilder 是一种简单的解决方案，用于异步加载数据。它接收一个返回 Future 的函数，并根据 Future 的状态显示不同的 UI。

FutureBuilder<List<Item>>(
  future: fetchItems(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return Text(snapshot.data[index].name);
        },
      );
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return CircularProgressIndicator();
    }
  },
);

2. StreamBuilder

StreamBuilder 对于处理异步数据流（例如来自网络套接字或数据库查询）非常有用。它接收一个返回 Stream 的函数，并根据 Stream 的事件显示不同的 UI。

StreamBuilder<List<Item>>(
  stream: streamOfItems(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return Text(snapshot.data[index].name);
        },
      );
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return CircularProgressIndicator();
    }
  },
);

3. ChangeNotifierProvider

ChangeNotifierProvider 是一种更复杂的方法，但它提供了更好的状态管理和可测试性。它使用 ChangeNotifier 来通知听众状态变化。

class ItemProvider extends ChangeNotifier {
  List<Item> items = [];

  void fetchItems() async {
    // Fetch data from remote source

    items = data;
    notifyListeners();
  }
}

...

Consumer<ItemProvider>(
  builder: (context, provider, child) {
    return ListView.builder(
      itemCount: provider.items.length,
      itemBuilder: (context, index) {
        return Text(provider.items[index].name);
      },
    );
  },
);