时间戳

首页 > 解决方案 > Flutter ListView EmptyState 刷新

flutter - Flutter ListView EmptyState 刷新

问题描述

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

标签： flutter

解决方案

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

为空Container时要显示的ListView可以通过两种方法完成：

  1. 如果您的数据为空（或 null），请将 替换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();
  }
}

推荐阅读