0

我正在构建我的第一个 Flutter 应用程序，但遇到了一些性能问题。

我有一个带有 的屏幕CustomScrollView，特别是获得一个带有英雄图像的自定义 AppBar。接下来，我有一些字段/过滤器，然后我有我的GridView.builder，因为我可以在此列表中包含 25 到 400 个元素，并且我只想在用户滚动时构建它们。

但是在检查之后，我发现我的所有元素（400）都是立即构建的，并且使应用程序非常滞后。

你能告诉我我做错了什么吗？

编辑：您可以通过此 pastebin 对其进行测试：只需将其复制粘贴到一个新的颤振项目https://pastebin.com/xhd9CdUp

基本上这是我的代码的结构：

CustomScrollView
  SliverAppBar
  SliverPadding
    SliverChildListDelegate
      SearchField
      SizedBox
      ValueListenableBuilder // hive package
        GridView.builder
          CardWithMenuWidget(index)

这是我的代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: SafeArea(
        child: LayoutBuilder(builder: (context, constraints) {
          return CustomScrollView(
            slivers: [
              SliverAppBar(
                elevation: 0,
                backgroundColor: Colors.transparent,
                expandedHeight: 300,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  titlePadding: EdgeInsets.symmetric(vertical: 4),
                  title: ConstrainedBox(
                    constraints:
                        BoxConstraints(maxWidth: constraints.maxWidth * 0.5),
                    child: Hero(
                      tag: "extension-logo-${extension.uuid}",
                      child: CachedImage(imageUrl: extension.logoMediumUrl!),
                    ),
                  ),
                  background: Align(
                    alignment: Alignment.topCenter,
                    child: Hero(
                      tag: "extension-spotlight-${extension.uuid}",
                      child: CachedImage(
                        imageUrl: extension.spotlightMediumUrl!,
                        fit: BoxFit.fitWidth,
                        height: 240,
                        width: double.infinity,
                        alignment: Alignment.topCenter,
                      ),
                    ),
                  ),
                ),
              ),

              SliverPadding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                sliver: SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      SearchField(
                        controller: this._searchController,
                        labelText: "Search into ${extension.name}",
                        cancelText: 'Cancel',
                      ),
                      SizedBox(height: 32),
                      // Dynamic item list
                      ValueListenableBuilder(
                        valueListenable:
                            ExtensionBox.box.listenable(keys: [_uuid]),
                        builder: (context, Box<Extension> box, child) {
                          var cardUuidList = box.get(_uuid)!.cards?.keys;
                          return _buildCardListGrid(cardUuidList);
                        },
                      ),
                      FakeBottomBarPadding(),
                    ],
                  ),
                ),
              ),
            ],
          );
        }),
      ),
    );
  }

  Widget _buildCardListGrid(cardUuidList) {
    return LoadingContainer(
      isLoading: _isSyncing,
      child: cardUuidList == null
          ? Center(
              child: Text('No data.'),
            )
          : GridView.builder(
              addAutomaticKeepAlives: true,
              shrinkWrap: true,
              physics: ScrollPhysics(),
              itemCount: cardUuidList.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 16.0,
                crossAxisSpacing: 16.0,
                childAspectRatio: CardModel.ratio,
              ),
              itemBuilder: (context, cardIndex) {
                String cardUuid = cardUuidList.elementAt(cardIndex);

                return CardWithMenuWidget(
                  uuid: cardUuid,
                );
              },
            ),
    );
  }

谢谢！

4

1 回答 1

0

我的解决方案，基于我的 pastebin 代码：

CustomScrollView(
  SliverAppBar(),
  ...
  ValueListenableBuilder(
    valueListenable: _list,
    builder: (context, listBuilder, child) {
      return SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 16.0,
          crossAxisSpacing: 16.0,
          childAspectRatio: 635 / 889,
        ),
        delegate: SliverChildBuilderDelegate(
          (c, i) {
            return ItemWidget(listBuilder[i]);
          },
          childCount: _list.value.length,
        ),
      );
    },
  ),
)
于 2021-05-16T23:06:37.147 回答