Flutter中的ListTile和ListView组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1.ListTile组件

ListTile组件(列表块组件）通常由一些文本、一个前置和后置图标组成的组件，其常用属性及功能说明如表所示。

const ListTile({
    
    
    super.key,
    this.leading,
    this.title,
    this.subtitle,
    this.trailing,
    this.isThreeLine = false,
    this.dense,
    this.visualDensity,
    this.shape,
    this.style,
    this.selectedColor,
    this.iconColor,
    this.textColor,
    this.contentPadding,
    this.enabled = true,
    this.onTap,
    this.onLongPress,
    this.mouseCursor,
    this.selected = false,
    this.focusColor,
    this.hoverColor,
    this.focusNode,
    this.autofocus = false,
    this.tileColor,
    this.selectedTileColor,
    this.enableFeedback,
    this.horizontalTitleGap,
    this.minVerticalPadding,
    this.minLeadingWidth,
  })

实现代码示例：

Container(
              color: Colors.black12,
              child: ListTile(
                title: Text(name[3],style: TextStyle(fontWeight: FontWeight.bold),),
                subtitle: Text(info[3]),
                leading: CircleAvatar(
                  radius: 25,
                  backgroundImage: NetworkImage(pic[3]),
                ),
                selected: gSelected[3],
                trailing: Icon(Icons.navigate_next),
                onTap: (){
    
    
                  setState(() {
    
    
                    gSelected[3] = !gSelected[3];
                  });
                },
                onLongPress: (){
    
    
                  setState(() {
    
    
                    gSelected[3] = true;
                  });
                },
              ),
            ),

2.ListView组件

ListView组件(列表视图组件）是应用程序前端页面常见的一个以列表方式显示内容的组件。

1. ListView ():用于构建包含少量子元素的可垂直或水平滚动的列表视图，默认为垂直滚动列表视图。常用属性及功能如表所示。
   

ListView({
    
    
    super.key,
    super.scrollDirection,
    super.reverse,
    super.controller,
    super.primary,
    super.physics,
    super.shrinkWrap,
    super.padding,
    this.itemExtent,
    this.prototypeItem,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    super.cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    super.dragStartBehavior,
    super.keyboardDismissBehavior,
    super.restorationId,
    super.clipBehavior,
  })

2.1 ListView.builder () 构造方法

在实际应用开发中，数据源在多数应用场景中来源于网络，来源于网络的数据存在数据量大和数据条数不可预见等问题，在这种情况下使用ListView.builder ()构造方法可以根据数据源的实际情况动态加载数据。常用属性及功能如表所示。

2.2 ListView.separated ()构造方法

ListView.separated () : ListView.separated ()构造方法中用itemBuilder属性构建列表项,用separatorBuilder属性构建列表项之间的分隔符子项。