Question

在不阻止UI的情况下在列表中呈现大量小部件的正确方法是什么？我在firebase中有将近700多个标签，并且尝试使用StreamBuilder这样在页面上显示它们：

class _TagsManagementPageState extends State<TagsManagementPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Tags"),
      ),
      body: Center(
        child: ListView(
          padding: EdgeInsets.all(20),
          shrinkWrap: true,
          children: <Widget>[
            StreamBuilder(
              stream:
                  FirebaseManager.firebaseDatabase().ref("search_tags").onValue,
              builder: (BuildContext context, AsyncSnapshot snap) {
                if (!snap.hasError && snap.hasData) {
                  DataSnapshot snapshot = snap.data.snapshot;
                  if (snapshot.hasChildren()) {
                    List tagsList = Map.from(snapshot.val()).values.toList()
                      ..sort((a, b) {
                        var tagA = a["title"] ?? "";
                        var tagB = b["title"] ?? "";
                        return tagA.toLowerCase().compareTo(tagB.toLowerCase());
                      });
                    return Wrap(
                      spacing: 8.0, // gap between adjacent chips
                      runSpacing: 4.0, // gap between lines
                      children: tagsList
                          .map((searchTag) => _TagItem(searchTag))
                          .toList(),
                    );
                  } else {
                    return Center(
                      child: Text(
                        "No Tag Available...!",
                        style: TextStyle(
                            fontSize: 25, fontWeight: FontWeight.bold),
                      ),
                    );
                  }
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            )
          ],
        ),
      ),
    );
  }
}

class _TagItem extends StatelessWidget {
  final searchTag;

  final delRef = FirebaseManager.firebaseDatabase().ref("search_tags");

  _TagItem(this.searchTag);

  @override
  Widget build(BuildContext context) {
    return InputChip(
      elevation: 3,
      deleteIconColor: Colors.red,
      label: Text(searchTag['title'] ?? "null"),
    );
  }
}

在从Firebase加载之前它可以正常工作，但是之后UI冻结了一段时间，然后在屏幕上显示了内容？如何避免这种情况？

Answer 1

尝试分页处理大量数据，这将以小块形式下载数据。 https://blog.solutelabs.com/paginate-your-data-in-flutter-7744995febd1

Answer 2

我认为这是因为您的排序算法。您可以不先排序就尝试一下，看看是否是问题所在。如果是这样，则应从构建方法中删除它，将其放入异步方法中，并在计算时显示进度指示器。

颤抖的UI冻结，同时显示大量小部件

2 个答案: