First, the old routine, look at the style first

The left figure is my business style, the right figure is the following source code display style (copy can run directly, no additional components introduced)

Second, the interpretation of the

1. Components are involved

First, there is no single component to achieve this effect

Implementing this effect involves the following components:

AppBar: The top bar, the most basic piece of software. Text: Container: layout component CustomScrollView: CustomScrollView components such as lists and grids can be included in the AppBar. SliverGrid: SliverList: List control InkWell: Effects control that wraps a click-effect around other widgets. ListTile: Title component, usually populating the ListViewCopy the code

2. First set the heading style

GetItem is our main content

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: new IconButton( icon: New Icon(Icons. Arrow_back, color: color.black38), onPressed: () {print(' color.black38 '); },), title: Text(' change a set of effects '), centerTitle: true, elevation: 0.0, actions: <Widget> Icon(icons.save), onPressed: () {},),],), // This is the top TAB style, remove body: Container(child: getItem(),) if not needed; }Copy the code

3. Change a batch of clicks

We set a click effect for each batch of styles

When clicked, determine whether the current content meets 18 (the number of display in one screen)

If not, the last page is displayed and the page number is reset to 1

If yes, indicates that the current data >=18, there may be data, page number +1

The data is then requested, and _getData() is an encapsulated request data function

SliverList( delegate: SliverChildListDelegate([ ListTile( onTap: () { int Temp = page + 1; if (_list.length < 18) { Temp = 1; } setState(() { page = Temp; }); _getData(); }, title: Text(' select an icon ', style: TextStyle(color: color. black, fontSize: 12),), trailing: Text(' follow a batch ', style: TextStyle(color: color. black, fontSize: 12),) Colors.black54, fontSize: 10)), ), ]), ),Copy the code

4. The grid content is actually a SliverGrid. After switching data, part of the page is rerendered

Three, source code (can directly run debugging)

import 'package:flutter/material.dart'; class AddHabit extends StatefulWidget { String hid = ''; AddHabit({this.hid}); @override _AddHabitState createState() => _AddHabitState(); } class _AddHabitState extends State<AddHabit> { var _icon = ''; Double leftPadding = 15.0; List _list = [ { 'id': 1, 'image': 'https://daybili.oss-cn-beijing.aliyuncs.com/image/202008/liaotian.png' } ]; int page = 1; @override void initState() { super.initState(); this._getData(); } // print(_list); // print(_list); // print(_list); setState(() { _list = _list; }); @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (leading: New IconButton(icon: new icon (icon.arrow_back, color: color.black38), onPressed: () {print(' color.black38 '); },), title: Text(' change a set of effects '), centerTitle: true, elevation: 0.0, actions: <Widget> Icon(icons.save), onPressed: () {},),],), // This is the top TAB style, remove body: Container(child: getItem(),) if not needed; } // Widget getItem() {return CustomScrollView(slivers: <Widget>[SliverList(delegate:)) SliverChildListDelegate([ ListTile( onTap: () { int Temp = page + 1; if (_list.length < 18) { Temp = 1; } setState(() { page = Temp; }); _getData(); }, title: Text(' select an icon ', style: TextStyle(color: color. black, fontSize: 12),), trailing: Text(' follow a batch ', style: TextStyle(color: color. black, fontSize: 12),) Colors.black54, fontSize: 10)), ), ]), ), SliverGrid( //padding: EdgeInsets.zero, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 6, crossAxisSpacing: 5, mainAxisSpacing: 3), delegate: SliverChildBuilderDelegate((BuildContext context, int index) { return habitIcon(_list[index]); }, childCount: _list.length), ), ]); } // Widget habitIcon(item) {return InkWell(onTap: () {setState(() {_icon = item['id']; }); }, child: Container( height: 100, width: 100, color: item['id'] == _icon ? Colors.white : Colors.black12, alignment: Alignment.center, child: Image.network( item['image'], width: 30, height: 30,),),); }}Copy the code