Question

我的应用程序中有一个带有ListView的页面。我正在使用StreamBuilder接收数据。当有数据时，我将构建listview子级并将listview包裹在RefreshIndicator中。一切正常。

现在，我想处理没有数据（也称为EmptyState）的情况。能够显示包含某些内容的容器，同时仍然能够支持拉动刷新以强制页面/列表视图检查数据。

这就是我目前的做法

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可以通过以下两种方法完成：

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

颤振ListView EmptyState与刷新

1 个答案: