通过刷新Flutter ListView EmptyState

Question

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

现在我想处理没有数据又名空状态的情况。能够显示具有某些内容的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

为了支持空RefreshIndicator内的ListView你可以设置physics: AlwaysScrollableScrollPhysics()。这使得ListView总是可以琢磨。因此，我们总能触发RefreshIndicator。

当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();
  }
}