哇!我已经花了几个小时将嵌套的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编译的桌面浏览器上显示。在桌面浏览器上使用滚动功能有点麻烦,你需要在文本中点击,然后尝试滚动。它是为移动的使用而设计的,所以我只能接受。
1条答案
按热度按时间xxb16uws1#
不知道如何帮助你。宁愿把这个评论,而不是回答,但我没有点做评论。
无论如何,我希望我能复制你的问题。根据我的个人经验,对于一个15项的列表,其中有许多子部件,它不应该是janky,除非它可能有大尺寸的图像或真的太多的额外部件。
在我的例子中,我确保“隔离”/“计算”我的繁重计算,并在准备列表时显示一个加载屏幕。
您可以继续阅读:
分离株:https://dart.dev/guides/language/concurrency
计算:https://api.flutter.dev/flutter/foundation/compute-constant.html
希望这对你有帮助!