📜  Flutter的Listview.builder

📅  最后修改于: 2021-09-02 05:24:27             🧑  作者: Mango

ListView是flutter一个非常重要的小部件。它用于创建子列表但是当我们想要递归创建列表而不需要一遍又一遍地编写代码时,使用 ListView.builder 代替 ListView。 ListView.builder创建一个可滚动的线性小部件数组。

ListView.builder 默认不支持子重新排序。

ListView.builder 的构造函数:

ListView.builder({Key key, 
Axis scrollDirection, 
bool reverse, 
ScrollController controller, 
bool primary, 
ScrollPhysics physics, 
bool shrinkWrap, 
EdgeInsetsGeometry padding, 
double itemExtent, 
Widget Function(BuildContext, int) itemBuilder, 
int itemCount, 
bool addAutomaticKeepAlives, 
bool addRepaintBoundaries, 
bool addSemanticIndexes, 
double cacheExtent, 
int semanticChildCount, 
DragStartBehavior dragStartBehavior})

让我们通过一个例子来理解这个概念:

脚步:

  • 创建一个新的flutter应用程序。
  • 现在,从main 中删除代码。dart。
  • 复制以下代码并将其粘贴到您的 main.js 文件中。dart。
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "ListView.builder",
      theme: new ThemeData(
          primarySwatch: Colors.green
      ),
      debugShowCheckedModeBanner: false,
      home: new ListViewBuilder()
    );
  }
}
class ListViewBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("ListView.builder")
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (BuildContext context,int index){
          return ListTile(
            leading: Icon(Icons.list),
            trailing: Text("GFG",
                           style: TextStyle(
                             color: Colors.green,fontSize: 15),),
            title:Text("List item $index")
            );
        }
        ),
    );
  }
}


在上面的代码中,我们有一个 ListViewBuilder 类,它是一个无状态类。它返回一个由 appBar 和 body 组成的新 Scaffold。

在正文中,我们有ListView.builder和 itemcount 5 和itemBuilder它将一次又一次地创建一个新的小部件,最多 5 次,因为我们有itemCount=5 。如果我们在ListView.builder 中不使用itemCount ,那么我们将获得无限的列表项,因此建议使用itemCount以避免此类错误。 itemBuilder返回具有前导、尾随和标题的ListTile 。此ListTile将一次又一次地构建最多 5 次。

输出 :

颤振中的列表视图构建器

这个任务也可以在ListView的帮助下完成,那么为什么我们使用ListView建设者?

这个问题的答案是,我们可以在 ListView 的帮助下完成相同的任务,但是当我们有很多项(例如:10000)时,使用 ListView 创建这些项非常困难,因为我们必须一次又一次地编写代码创建这 10000 个项目,但ListView.builder通过在itemBuilder的帮助下创建这些项目,使这项任务变得非常容易

现在,从ListView.builder的上述代码中,如果我们想要创建总共 8 个项目,那么只需将 itemCount 更改为 8,我们将在屏幕上获得 8 个项目。

输出 :

颤振中的列表视图构建器