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

Google’s annual Conference on Flutter has just begun, and the company’s investment in Flutter has increased, so it’s all the more important to learn about Flutter. Small dish in the news list aspect of Demo, thought will show a variety of different item styles in the list, today specially with the help of a small example on ListView slightly adjust, test ListView in a variety of item styles display.

Try the following

In Android’s view, the state judgment should be made in the Android list ViewHolder; ItemBuilder = itemBuilder = itemBuilder = itemBuilder = itemBuilder = itemBuilder = itemBuilder

Widget buildListData(
    BuildContext context, String strItem, Icon iconItem, int type) {
    Widget widget;
    switch (type) {
        case 1: 
            ...
            break;
        case 2: 
            ...
            break;
    }
    return widget;
}
Copy the code

Practice note

The item type display is incomplete
  1. The first tip is to pass in the Item style type to buildListData, and judge the Widget style against the style type. Of course, there are many different ways to pass the type as needed;
List<int> stateItems = <int>[
  1, 1, 2, 2, 0, 1, 1, 1, 0, 1, 2, 2, 1, 2,
];
Copy the code
  1. In buildListData, we only judge 1 and 2. We thought that we would hide the current item, but the result is unexpected. All items at 0 and later are not displayed, completely interrupted. As shown in figure:

3. After adding the corresponding judgment processing, it will be displayed normally, as shown in the figure:

Pay attention to the GestureDetector gesture method

Many widgets don’t have an onTab() method by default, but you can use GestureDetector for gesture processing; Tips: When using GestureDetector for a specific Widget, for example, when clicking on an item, add GestureDetector to the entire item. Please note that the GestureDetector Widget was added to the wrong user interface.

3. Widgets are explicit and implicit

The main feature of a Flutter is that everything is a Widget and the Widget cannot be null. Wi = null), so I set the width and height of the widgets that need to be hidden to 0.0. Of course, this is a silly method. With the knowledge of Flutter, we can use Offstage. False indicates display.

Widget wi; If (' icon -> pages' == strItem) {wi = new Container(height: 0.0, width: 0.0); } else {wi = new Text(strItem, style: new TextStyle(color: Colors. BlueAccent, fontSize: 18.0),); } // Offstage(Offstage: (' icon -> pages' == strItem)? True: false, child: Text(strItem, style: TextStyle(color: Colors. BlueAccent, fontSize: 18.0)),Copy the code

The core source

List<int> stateItems = <int>[ 1, 1, 2, 2, 0, 1, 1, 1, 0, 1, 2, 2, 1, 2, ]; 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, int type) { Widget widget; switch (type) { case 1: widget = 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: Black54, fontSize: 18.0,),), content: new Text(' you selected the content of the item as :$strItem,item status as 1'),); }); }); break; case 2: Widget wi; If (' icon -> pages' == strItem) {wi = new Container(height: 0.0, width: 0.0); } else {wi = new Text(strItem, style: new TextStyle(color: Colors. BlueAccent, fontSize: 18.0),); } widget = new GestureDetector( child: new Column( children: <Widget>[ iconItem, wi, ], ), 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(' $strItem,item status 2'),); }); }); break; Default: Widget = new Container(height: 50.0, color: Colors. GreenAccent, Child: New Padding(Padding: New EdgeInsets. All (12.0), Child: new GestureDetector(Child: new Text(' I am a 0 item'), 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(' ha ha ha! The current item state is 0'),); }); },),),); break; } return widget; }Copy the code

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

Source: Little Monk A Ce