Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article directory
1.ListTile component
The ListTile component (list block component) is usually a component composed of some text, a front and back icon, and its common properties and function descriptions are shown in the table.
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,
})
Implementation code example:
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 component
The ListView component (list view component) is a common component that displays content in a list on the front-end page of the application.
- ListView (): Used to build a vertically or horizontally scrollable list view containing a small number of sub-elements, the default is a vertically scrollable list view. Common properties and functions are shown in the table.
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 () construction method
In actual application development, the data source comes from the network in most application scenarios, and the data from the network has problems such as large data volume and unpredictable number of data items. In this case, using the ListView.builder () construction method can be based on the data The actual situation of the source dynamically loads the data. Common properties and functions are shown in the table.
2.2 ListView.separated () construction method
ListView.separated () : In the ListView.separated () construction method, the itemBuilder property is used to build the list item, and the separatorBuilder property is used to build the separator sub-item between the list items.
