ListView is the list component of a Flutter that can be horizontal or vertical

ListView common usage

The ListView scrolls horizontally and vertically

So let’s just write code for this part

class ListPageState extends State<ListPage> { bool isVertical = true; Var list = [' Shanghai ',' Beijing ',' shenzhen ',' Tianjin ',' Handan ',]; @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text(' test ListView')), body: ListView(// With this property, set the orientation to be vertical or horizontal scrollDirection: isVertical? Axis.vertical : Axis.horizontal, children: [ RaisedButton( onPressed: () {setState (() {isVertical =! IsVertical;});}, child: Text (' let me switch direction),),... buildListItem ()],),); } List<Widget> buildListItem() { return list .map((e) => isVertical ? _buildVItem(e) : _buildHItem(e)) .toList(); } // Build the vertical list item Widget _buildVItem(String cityNam) {return Container(margin: EdgeInsets. Only (bottom: 5), padding: EdgeInsets.only(top: 10, bottom: 10), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.green), child: Text( '$cityNam', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.tealAccent), ), ); } // Build horizontal item Widget _buildHItem(String cityNam) {return Container(width: 100, height: 100, margin: EdgeInsets.only(right: 5), padding: EdgeInsets.only(right: 10, left: 10), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.green), child: Text( '$cityNam', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.tealAccent), ), ); }}Copy the code

The effect

Note that when the ListView scrolls horizontally, setting the height of the Item does not take effect. You can set the height of the ListView’s parent layout

ListView.builder()

This is an easy way to build a ListView by simply replacing the code above

      body: ListView.builder(
          itemCount: list.length,
          scrollDirection: Axis.vertical,
          itemBuilder: (BuildContext context, int index) {
            return _buildVItem(list[index]);
          }),
Copy the code

Collapsible Lists (ExpansionTile)

Implementation of ExpansionTile interface similar to those on QQ

class ExpandPage extends StatefulWidget { @override State<ExpandPage> createState() { return ExpandPageState(); }} class ExpandPage extends State<ExpandPage> {var list = {'中国': [' 中国', '中国', '中国', '中国', '中国': [' Shanghai ', 'Beijing', 'shenzhen', 'tianjin', 'handan'], 'CN' : [' Shanghai ', 'Beijing', 'shenzhen', 'tianjin', 'handan,]}. @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text(' test extensible ListView'),), body: ListView.builder( itemCount: list.keys.length, scrollDirection: Axis.vertical, itemBuilder: (BuildContext context, int index) { return _buildVItem(index); })); } Widget _buildVItem(int index) { String countyName = list.keys.elementAt(index); var listCity = list[countyName]; Return ExpansionTile(leading: Icon(Icons. Agriculture), subtitle: Text(" supertitle "), title: Text(countyName, style: TextStyle(fontSize: 20, color: Colors.teal), ), children: _buildExpandItem(listCity), ); } List<Widget> _buildExpandItem(List<String> listCity) { return listCity .map((e) => FractionallySizedBox( widthFactor: 1, child: Container( padding: EdgeInsets.only(top: 10, bottom: 10), decoration: BoxDecoration(color: Colors.pink), child: Text( e, style: TextStyle(fontSize: 18, color: Colors.white), ), ), )) .toList(); }}Copy the code

The effect

This can also be implemented using ExpansionPanelList

GridView Grid layout

The grid layout in Flutter is implemented using a GridView

  • ScrollDirection Controls GridView direction
  • The gridDelegate controls how the GridView’s word widgets are created, the spacing between the main and cross axes, and the aspect ratio of the child widgets
  • Child is the list of child widgets. Note that changing the width of the widgets in the list does not take effect; the ratio of the child widgets to width is already controlled by the gridDelegate
class GridPage extends StatefulWidget { @override State<GridPage> createState() { return GridPageState(); } } class GridPageState extends State<GridPage> { bool isVertical = true; Var list = [' Shanghai ', 'Beijing ',' shenzhen ', 'Tianjin ',' Handan ',]; @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text(' test GridView')), body: GridView(padding: EdgeInsets. All (0),// Margin scrollDirection: Axis vertical, is vertical scroll or horizontal scrolling / / / / the GridView sub Item creation way / / SliverGridDelegateWithFixedCrossAxisCount: cross shaft on the number of child widgets to create / / SliverGridDelegateWithMaxCrossAxisExtent: spindle fixed width or height on the way to create gridDelegate: SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: 4, / / cross shaft on the number of child widgets, mainAxisSpacing: 1,// The spacing between the child widgets in the main axis crossAxisSpacing: 1,// the spacing between the child widgets in the cross axis childAspectRatio: Children: buildListItem(),),// Body: GridView(// padding: EdgeInsets.zero, // scrollDirection: Axis.vertical, // gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent (/ / maxCrossAxisExtent: 240, maximum width or height / / cross axis direction / / crossAxisSpacing: 1, // childAspectRatio: 2, // mainAxisSpacing: 1), // children: buildListItem(), // ), ); } List<Widget> buildListItem() { return list.map((e) => _buildVItem(e)).toList(); } Widget _buildVItem(String cityNam) { return Container( padding: EdgeInsets.only(top: 10, bottom: 10), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.green), child: Text( '$cityNam', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.tealAccent), ), ); }}Copy the code

The effect

RefreshIndicator drop down refresh component

The RefreshIndicator must scroll vertically with a ListView or GridView. Horizontal refreshindicators are invalid.

RefreshIndicator structure analysis

  • Future Function(). When a user drops a component, it will be called back to this method. HTTP requests, database reads and writes will be performed at this time.
  • Child The child widget of the drop-down refresh, typically a ListView or a CustomScrollView
Future<Null> _handRefresh() async{await future.delayed (Duration(seconds: 2)); setState(() { list=list.reversed.toList(); }); }Copy the code

In a ListView

In the GridView

List loading more

Flutter does not officially provide components like the Refresh drop-down refresh. It needs to listen to the list scroll distance to manually trigger more loads.

  1. Custom ScrollController
ScrollController _scrollController; @override void initState() { super.initState(); _scrollController = ScrollController(); _scrollController.addListener(() { if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {print(" Start loading more "); _handLoadMore(); }}); }Copy the code
  1. Trigger loading more
 _handLoadMore() async {
    await Future.delayed(Duration(seconds: 15));
    setState(() {
      var newData = List<String>.from(list);
      list.addAll(newData);
    });
  }
Copy the code
  1. Set the Scroller to the ListView
ListView( controller: _scrollController,XXX)
Copy the code

If scrolling up and down repeatedly triggers the method multiple times, you need to customize the state to load more control