Flutter ListView EmptyState 刷新

Question

我的应用程序中有一个带有 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？

Answer 1

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

将Container要显示的时候ListView是空的可以通过两种方法实现：

1. 如果您的数据为空（或空），取代ListView了SingleChildScrollView与physics设置为AlwaysScrollableScrollPhysics()。然后你可以将你的Container作为SingleChildScrollView.
2. 鉴于您的数据为空（或空），ListView您可以简单地用您的 替换子项，而不是替换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();
  }
}