减少Flutter渐进式Web应用程序中的Jank

o7jaxewo  于 2022-12-14  发布在  Flutter
关注(0)|答案(1)|浏览(137)

哇!我已经花了几个小时将嵌套的ListView重构为一个父CustomScrollView和子Slivers。侦查工作耗费了许多时间。
不管怎样,这个问题解决了。我发现我仍然需要滚动一个15项的列表。好的,每一项都可以涉及更多的小部件{填充,对齐,提升按钮,行,文本,大小框,图标}。所以我的15项列表最终是多个小部件。
我现在已经把我的SliverChildListDelegate换成了SliverChildBuilderDelegates,这样构建器就可以懒洋洋地构建Widget列表了。这样做之后,效率似乎很低,因为它增加了Widget树中的Widget。每个构建器的buildItem()调用都需要一个额外的Column Widget来 Package 整个列表的子块。
这可能是一个滚动的小部件很多,但它只是一个15项的列表。我希望我知道什么是优化。任何想法如何最好地减少jank的移动的网络列表?
Flutter团队表示,Flutter最适用于以计算为中心的应用,而不是文本密集的信息应用。未来,只使用webView Widget会不会更好?我一直认为嵌入Webview会很笨重和缓慢,但原生Flutter Widget的列表,即使是SliverLists,也会让人感到轻松。
下面是janky列表完成与建设者:

Widget buildLocationDescriptionWidgets(LocationDetails presentLocation) {
    print(LOG + "buildLocationDescriptionWidgets");
    if (presentLocation.descriptionLinkUrls.isEmpty)
      return SliverToBoxAdapter(child:
      Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          child: Text(presentLocation.description[0])));

    int numDescriptionBlocks = presentLocation.description.length;

    double paddingBottom = 16;
    if (presentLocation.descriptionLinkUrls.length >= numDescriptionBlocks) {
      paddingBottom = 0;
    }

    return SliverPadding(
        padding: EdgeInsets.fromLTRB(16, 16, 16, paddingBottom), sliver:
    SliverList(
      key: Key("descriptionSliverList"),
      delegate: SliverChildBuilderDelegate((context, index) =>
          buildDescriptionBlock(context, index),
          childCount: presentLocation.description.length
      ),
    ));
  }

  Column buildDescriptionBlock(BuildContext context, int index) {
    List<Widget> colChildWidget = [];
    colChildWidget.add(Text(
      widget.presentLocation.description[index],
      textAlign: TextAlign.left,
    ));
    if (index < widget.presentLocation.descriptionLinkUrls.length) {
      colChildWidget.add(Padding(
          padding: const EdgeInsets.symmetric(vertical: 16),
          child: Align(
              alignment: Alignment.center,
              child: index >=
                  widget.presentLocation.descriptionButtonIcons.length
                  ? ElevatedButton(
                  child: Text(
                      widget.presentLocation.descriptionButtonText[index]),
                  onPressed: () {
                    _launchURL(
                        widget.presentLocation.descriptionLinkUrls[index]);
                  })
                  : ElevatedButton(
                  child:
                  Row(mainAxisSize: MainAxisSize.min, children: [
                    Text(
                        widget.presentLocation.descriptionButtonText[index]),
                    SizedBox(width: 8),
                    FaIcon(
                        buttonIconMap[widget.presentLocation
                            .descriptionButtonIcons[index]],
                        size: 16)
                  ]),
                  onPressed: () {
                    _launchURL(
                        widget.presentLocation.descriptionLinkUrls[index]);
                  }))));
    }
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: colChildWidget);
  }

我应该从一个构建器回归到一个传统的SliverList吗?

**我尝试过的其他事情:**我通过在所有可能的地方放置const来消除我的应用程序Drawer列表中的jank,很多分隔符都被设置为const。但是当你使用Theme.of(context).textTheme.bodyText2等设置文本样式时,它不允许你将文本框设置为const。如果你想使用const,你不能全局设置应用程序的样式,你必须硬编码。放弃抽象来硬编码文本部件样式值得吗?

以下是Web应用程序:Love Edinburgh
举个最明显的例子
1.打开应用程序抽屉
1.滚动到WONDER
1.点击亚瑟的座位
1.打开面板至全屏-向上滑动
1.向下滚动面板。
它不会在使用Skia / Webkit编译的桌面浏览器上显示。在桌面浏览器上使用滚动功能有点麻烦,你需要在文本中点击,然后尝试滚动。它是为移动的使用而设计的,所以我只能接受。

xxb16uws

xxb16uws1#

不知道如何帮助你。宁愿把这个评论,而不是回答,但我没有点做评论。
无论如何,我希望我能复制你的问题。根据我的个人经验,对于一个15项的列表,其中有许多子部件,它不应该是janky,除非它可能有大尺寸的图像或真的太多的额外部件。
在我的例子中,我确保“隔离”/“计算”我的繁重计算,并在准备列表时显示一个加载屏幕。
您可以继续阅读:
分离株:https://dart.dev/guides/language/concurrency
计算:https://api.flutter.dev/flutter/foundation/compute-constant.html
希望这对你有帮助!

相关问题