Flutter 页面来得太慢了。当它包含长数据时答案

【问题标题】：Flutter page comes too slow. when it contain long dataFlutter 页面来得太慢了。当它包含长数据时
【发布时间】：2021-08-13 14:15:30
【问题描述】：

我的第一页包含一个平面按钮。当我按下该按钮时，导航到另一个页面（MyApp）太慢（它包含长数据）。如何解决。这是我的代码。

class MyApp extends StatefulWidget {
  final List<String> items;
  const MyApp({ this.items});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  final ScrollController scrollcontroller=ScrollController();
  var scaffoldkey=GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    const title = 'Long List';
    return Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body:Stack(children: [Column(children:[ListView(shrinkWrap:true,children:[    Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical:0.0),
                child: Container(
                  width: 300,
                  height: 70,
                  decoration: BoxDecoration(border:Border.all(color:Colors.brown[100],),color: Colors.orange[50], borderRadius:BorderRadius.all(Radius.circular(5.0))),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:<Widget> [
                      Container(height: 35,
                        decoration: BoxDecoration(color: Colors.white,
                          border: Border.all(color: Colors.brown[300],width: 1),
                          borderRadius: BorderRadius.circular(5),),),],),),),),],)
        ]),Expanded(child:ListView(shrinkWrap:true,children:[ListView.builder(
      shrinkWrap: true, physics: ScrollPhysics(), scrollDirection: Axis.vertical, itemCount:widget.items.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(widget.items[index]),);},),]))])]) );}} ```

【问题讨论】：

你能分享一个视频吗？
你能把你的代码格式化得更好一点吗？无论如何，我看到一个ListView 调用了这样的“长数据”。这迫使 Flutter 渲染内部的每个元素。为避免这种情况，请仅使用一个ListView.builder。您的代码中有两个，所以也许您想要 SingleChildScrollView 和 ListView.builder 的组合？

标签： flutter dart listview

【解决方案1】：

最好的方法可能是在用户滚动时加载部分数据。

final ScrollController scrollcontroller=ScrollController();

List<String> items;

int numberOfItemsLoadedPerScroll = 15;
List<String> loadedItems = items.sublist(0, 15);

scrollcontroller.addListener(() {
  setState(() {
    loadedItems = items.sublist(0, loadedItems.Legth+numberOfItemsLoadedPerScroll);
  });
});

最好使用 Bloc 系统并更新 Stream 而不是调用 setState。但我认为这样的事情应该可行。

【讨论】：

【解决方案2】：

您使用的列表视图效率极低，并且需要花费一些时间来构建和呈现其中的所有小部件。我建议您改用列表视图构建器，因为它可以更快地呈现您的视图，并且它是首先拥有列表视图的优化方式。 https://flutter.dev/docs/cookbook/lists/long-lists 如果您想查看这些文档，这里是文档，不用说使用列表视图构建器而不是常规的旧列表视图是最佳实践！ **编辑：为了进一步说明，列表视图构建器会在您向下或向上滚动列表时呈现项目（例如，填充屏幕需要 15 个项目），而列表视图会一次呈现整个列表，这可能会导致应用如果花费的时间过长，它会变得缓慢，并且有时会导致管理操作系统（ios 或 android）无响应。

【讨论】：