我一直在评估Flutter在应用程序中的使用,并从一个非常简单的文本列表示例开始。在构建第一个视图后,我注意到列表视图有起伏滚动,所以我仔细查看了展示应用程序,结果发现虽然Reflectly是一个漂亮的应用程序,它也遇到了同样的问题--滚动时非常不稳定,只有一个简单的文本列表。到目前为止,我已经在iOS模拟器、iPhone XR、三星Galaxy Android设备和Android Pixel 2 XL模拟器上证实了这一点。
我没有看到围绕这一点的讨论,所以我想知道我是否做错了什么,但也怀疑我是多么简单,我的例子是多么简单,反射有同样的问题。
我想从社区中了解的是:1.我做了什么明显错误/愚蠢的事情导致了这一点2.如果你在你的设备上运行,你看到了我看到的吗?3.这是已知的,将被处理?如果我致力于Flutter,我能感到舒适,我的列表将在不久的将来顺利滚动吗?
下面是你可以运行的代码来重现这一点(对不起,它有点做作,但我想玩各种Flutter/Dart功能):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My List',
home: Scaffold(
appBar: AppBar(
title: Text('My List'),
backgroundColor: Color.fromRGBO(255, 0, 0, 0.9),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(child: TimeSelector()),
],
)),
));
}
}
abstract class ListItem {}
class TimeHeader implements ListItem {
final String header;
TimeHeader(this.header);
}
class TimeOption implements ListItem {
final String timeString;
final String meridian;
TimeOption(this.timeString, this.meridian);
}
final List<ListItem> litems = [
TimeHeader("Morning"),
TimeOption("10:00", "am"),
TimeOption("10:30", "am"),
TimeOption("11:30", "am"),
TimeHeader("Afternoon"),
TimeOption("1:00", "pm"),
TimeOption("1:30", "pm"),
TimeOption("2:30", "pm"),
TimeHeader("Night"),
TimeOption("5:30", "pm"),
TimeOption("6:30", "pm"),
TimeOption("7:30", "pm"),
TimeOption("8:30", "pm"),
TimeOption("9:30", "pm"),
TimeOption("10:30", "pm"),
TimeOption("11:30", "pm"),
TimeOption("11:45", "pm"),
TimeOption("11:49", "pm"),
];
class TimeSelector extends StatelessWidget {
final _headerFont = new TextStyle(fontWeight: FontWeight.w600, fontSize: 13.0, color: Color.fromRGBO(164, 164, 164, 1));
final _smallerFont = const TextStyle(fontSize: 12.0);
@override
ListView build(BuildContext context) {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int index) => _buildItem(ctxt, index),
);
}
Widget _buildItem(BuildContext ctxt, int index) {
final item = litems[index];
if (item is TimeHeader) {
return new ListTile(
title: Text(
item.header,
style: _headerFont,
),
);
} else if (item is TimeOption) {
return new ListTile(
title: Text(
item.timeString + item.meridian.toUpperCase(),
style: _smallerFont,
),
);
} else {
return new Text("UNKNOWN");
}
}
}
字符串
3条答案
按热度按时间monwx1rj1#
Flutter ListView在调试模式下的滚动肯定有问题。虽然您的代码将在发布模式下正常运行,没有任何滚动延迟。但是,如果您想在调试模式下滚动而没有任何延迟,您可以首选SingleChildScrollView而不是ListView。只需将滚动小部件放在一个列中,并将该列作为SingleChildScrollView的子列。在您的情况下,你正在使用ListView.builder。我建议你应该使用这个代码来实现一个非常平滑的滚动:
字符串
不要忘记使用
mainAxisSize: MainAxisSize.min
作为列大小,shrinkWrap: true
和physics: NeverScrollableScrollPhysics()
**physics:NeverScrollableScrollPhysics()**将禁用ListView.builder的滚动,您将体验到列表的极其平滑的滚动
tpxzln5u2#
如果您正在处理列表项数量非常少的静态数据,则可以使用
addAutomaticKeepAlives: true
加快列表速度ckocjqey3#
我设法通过禁用叶轮渲染后端修复了iOS上的滚动不稳定。
要在iOS上禁用叶轮,请在应用的Info.plist文件中的顶级标记下添加以下标记。
字符串