Flutter ListView EmptyState 刷新答案

【问题标题】：Flutter ListView EmptyState with refreshFlutter ListView EmptyState 刷新
【发布时间】：2019-08-16 15:38:20
【问题描述】：

我的应用中有一个带有 ListView 的页面。我正在使用 StreamBuilder 来接收数据。当有数据时，我构建 listview 子项，并且 listview 包装在 RefreshIndicator 中。这工作正常。

现在我想处理没有数据又名 EmptyState 的情况。能够显示包含一些内容的 Container，同时仍然能够支持 pull to refresh 以强制页面/Listview 检查数据。

这就是我目前的做法

return RefreshIndicator(
            key: upcomingRefreshIndicatorKey,
            onRefresh: handleRefresh,
            child: snapshot.hasData ? list : Stack(children: <Widget>[list, emptystate],) ,

        );

我不确定这是使用 ListView 处理 EmptyState 的方法，但到目前为止，这是我看到的在列表为空时仍支持刷新的唯一方法。所以我的主要问题是如何最好地使用 LIstView 处理空状态并仍然支持 PullToRefresh？

【问题讨论】：

标签： flutter

【解决方案1】：

要在空的ListView 中支持RefreshIndicator，您可以设置physics: AlwaysScrollableScrollPhysics()。这使得ListView 总是可滚动的。因此，我们总是可以触发RefreshIndicator。

ListView为空时你想显示的Container可以通过两种方式实现：

如果您的数据为空（或 null），请将 ListView 替换为 SingleChildScrollView，并将 physics 设置为 AlwaysScrollableScrollPhysics()。然后您可以将您的 Container 放置为 SingleChildScrollView 的子代。
不用替换 ListView，只要您的数据为空（或 null），您只需将子代替换为 Container。

在下面的独立示例中，我采用了第二种方法：

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// dummy stream
StreamController<List<String>> yourStream = StreamController<List<String>>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RefreshIndicator(
            onRefresh: refresh,
            child: StreamBuilder<List<String>>(
              stream: yourStream.stream,
              builder: (_, snapshot) => ListView(
                  physics: AlwaysScrollableScrollPhysics(), // This makes it always scrollable!
                  children: snapshot.data == null
                      ? [Text('Nothing here :(')]
                      : snapshot.data
                          .map((text) => ListTile(
                                title: Text(text),
                              ))
                          .toList()),
            ),
          ),
        ),
      ),
    );
  }

  Future<void> refresh() {
    // dummy code
    yourStream.add(['Quick', 'Brown', 'Fox']);
    return Future.value();
  }
}

【讨论】：