This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Yesterday I just learned the basic usage method of the BottomNavigationBar, today I will learn the basic usage of ListView. The ListView control in Flutter is very powerful. It combines the effects of both the Android ScrollView and ListView controls. It can be used both as a list and as a slideable layout. Today’s quiz will test basic usage as a regular list.

List item -> ListTile

Flutter helpfully provides a common list item style, which can include ICONS before and after as well as big and small headings. The basic properties of ListTile are as follows:

Const ListTile({Key Key, this.leading, // item header this.title, // item header this.subtitle, // item subtitle this.trailing, // item subtitle this.trailing, // item subtitle this.trailing, This.isthreeline = false, // If the three lines of the item show this.dense. This. enabled = true, this.onTap, // item onTap event this.onLongPress, // item onLongPress eventthis. selected = false, // item is selected state})Copy the code

Tips: Xiaocai does not have a good understanding of the dense attribute. The intuitive feeling is that when the dense is true, the whole becomes smaller and the text becomes more obvious, just like the overall resolution becomes higher. The diagram below:

List – > ListView

The use of ListView in Flutter is similar to that in Android. Add data first and bind lists later. List/ListView.Builder/ListView.separated/ListView.custom; Small dishes are mainly tested in the first three ways one by one; As shown in figure:

Either way, the first step is to add the data. The little TAB tests basic styles including item leading, title, and trailing, and sets the basic onTap() method. As follows:

List<String> strItems = <String>[' icon -> Keyboard ', 'icon -> print',' Icon -> Router ', 'Icon -> Pages ',' icon -> zoom_out_map', 'Icon -> zoom_out',' Icon -> youtube_searched_for', 'Icon -> wifi_tethering',' Icon -> Wifi_Lock ', 'Icon -> widgets', 'icon - > fusion', 'icon - > web', 'icon - > accessible', 'icon - > ac_unit',]; List<Icon> iconItems = <Icon>[ new Icon(Icons.keyboard), new Icon(Icons.print), new Icon(Icons.router), new Icon(Icons.pages), new Icon(Icons.zoom_out_map), new Icon(Icons.zoom_out), new Icon(Icons.youtube_searched_for), new Icon(Icons.wifi_tethering), new Icon(Icons.wifi_lock), new Icon(Icons.widgets), new Icon(Icons.weekend), new Icon(Icons.web), new Icon(Icons.accessible), new Icon(Icons.ac_unit), ]; Widget buildListData(BuildContext context, String strItem, Icon iconItem) { return new ListTile( isThreeLine: false, leading: iconItem, title: new Text(strItem), trailing: new Icon(Icons.keyboard_arrow_right), onTap: () { showDialog( context: context, builder: (BuildContext context) { return new AlertDialog( title: New Text('ListViewDemo', style: new TextStyle(color: color.black54, fontSize: 18.0,), content: New Text(' the item you selected is :$strItem'),); }); }); }Copy the code

1. The default List

Add the Iterable to the List, and then add it directly to the ListView. As follows:

List<Widget> _list = new List(); for (int i = 0; i < strItems.length; i++) { _list.add(buildListData(context, strItems[i], iconItems[i])); } // Add a divideList var divideList = listtile.dividetiles (context: context, tiles: _list).tolist (); Body: new Scrollbar(child: new ListView(// add the ListView control // children: _list, // no split line children: DivideList, // add a divideList),);Copy the code

If you want to set a splitter line, add a handle to the list item, Listtile.divideTiles.

2. ListView.builder

The Builder approach is much like dialog box type by type to add the required properties; Need to add list data to builder; Adding the dividing line makes xiao Ai realize the importance of Flutter thinking that everything is a widget, as follows:

Child: new listView. builder(itemCount: iconItems. Length, itemBuilder: (context, item) { return buildListData(context, strItems[item], iconItems[item]); },), // Add a line child: new ListView.builder(itemCount: iconItems. Length, itemBuilder: (context, item) { return new Container( child: new Column( children: <Widget>[ buildListData(context, strItems[item], iconItems[item]), new Divider() ], ), ); },),Copy the code

3. ListView.separated

Xiao CAI’s best understanding of Separated mode is that there is a direct way to set the delimiter, which is more practical for the delimiter list application. Set the separatorBuilder property. As follows:

child: new ListView.separated( itemCount: iconItems.length, separatorBuilder: (BuildContext context, int index) => new Divider(), // Add itemBuilder: (context, item) { return buildListData(context, strItems[item], iconItems[item]); },),Copy the code

4. ListView.custom

ListView. Custom is more suitable for item containing subclass item, and subclass item explicit and implicit have more operations when using this method is better; In the future, Xiao CAI will test this method separately.

The main source

List<Widget> _list = new List(); @override Widget build(BuildContext context) { for (int i = 0; i < strItems.length; i++) { _list.add(buildListData(context, strItems[i], iconItems[i])); } var divideList = ListTile.divideTiles(context: context, tiles: _list).toList(); Return Scaffold(body: new Scrollbar(// default List // child: new ListView(// children: DivideList, // Add ListView control //), // Listview.separated // Child: new Listview.separated (// itemCount: iconItems.length, // separatorBuilder: (BuildContext context, int index) => new Divider(), // itemBuilder: (context, item) { // return buildListData(context, strItems[item], iconItems[item]); Child: new Listview. builder(itemCount: iconItems. Length, itemBuilder: (context, item) { return new Container( child: new Column( children: <Widget>[ buildListData(context, strItems[item], iconItems[item]), new Divider() ], ), ); }, ), // child: new ListView.custom( // // ), ), ); }Copy the code

Tip: There is an interesting property in the list: whether reverse is reversed. If set to true, the list slides to the bottom and the data is sorted backwards by default. If set to false, everything is fine. Many other attributes are also very characteristic, xiao CAI has not had time to explore further.

      GitHub Demo

Xiao CAI has not been in touch with Flutter for a long time, and there are still many unclear and ununderstood aspects. I hope to point out more if there are wrong aspects.

Source: Little Monk A Ce