First, the old routine, look at the style first

Figure 1 is my business style, Figure 2 is below the source code display style (copy can run directly, no additional components introduced)

Second, the interpretation of the

1. Structure separation

First, the page is a scrolling list, so you must have a ListView to hold it

And then each item has a title, like select

Below the heading is a streaming layout that automatically switches lines, using the Wrap component of Flutter

Once the structure is clear, there are no more than three pieces of code

2. The first interface and data loading

List is the list that we’re going to loop through, and this list is the first level of classified data

And then there’s the topic field, which is the list data for the secondary category

In other words, the _list field is a two-dimensional array

If (_list.isempty) {return Text(' loading.... '); } else { return ListView.builder( itemBuilder: (context, index) { return getItem(_list[index]); }, itemCount: _list.length, ); }Copy the code

3. Settings for each item

This is set by column. One component is the title and the second component is the Wrap streaming layout

4. Wrap

This is important for us

A Wrap can lay out the children horizontally or vertically, and will Wrap when space is used up, also known as a flow layout.

Wrap( alignment: WrapAlignment.spaceBetween, spacing: 10, children: List.generate(item['topic'].length, (i) { return _childList(item['topic'][i]); }),)Copy the code

The direction property controls the layout direction. The default is horizontal. The code for setting the direction to vertical is as follows:

Wrap(
	direction: Axis.vertical,
	...
)
Copy the code

The alignment property controls the alignment of the main axis, and the crossAxisAlignment property controls the alignment of the cross axis. Alignment only applies to rows or columns that have free space. For example, if the alignment is completely filled horizontally, it will appear to be full regardless of what alignment is set to the main axis.

Wrap(
	alignment: WrapAlignment.spaceBetween,
	...
)
Copy the code

The spacing and runSpacing properties control the spacing between the Wrap spindle and cross-axis child controls

The verticalDirection property represents the direction of the children along the Wrap’s cross axis. The values are up (top to bottom) and Down (bottom to top).

Three, source code (can directly run debugging)

import 'package:flutter/material.dart'; class Mytest extends StatefulWidget { Mytest({Key key}) : super(key: key); _MytestState createState() => _MytestState(); } class _MytestState extends State<Mytest> { List _list = []; @override void initState() { super.initState(); this._getData(); List ret = [{'title': 'select ', 'topic': [{'title': 'title', 'icon': 'http://n1.c.imoxiu.com/85b4d9acec1b23abf499387f4fe4dd979483f46a/100' } ] } ]; setState(() { this._list = ret; }); } @override Widget build(BuildContext context) { return Scaffold(body: getHome(),appBar: AppBar(title: Text(' elevation '),elevation: 0.0,), } Widget getHome() {if (_list.isempty) {return Text(' loading.... '); } else { return ListView.builder( itemBuilder: (context, index) { return getItem(_list[index]); }, itemCount: _list.length, ); } } Widget getItem(item) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: const EdgeInsets.fromLTRB(20, 10, 0, 10), child: Text(item['title'], style: TextStyle(color: Colors.black38)), ), Padding( padding: const EdgeInsets.fromLTRB(20, 10, 0, 10), child: item['topic'].length > 0 ? Wrap( alignment: WrapAlignment.spaceBetween, spacing: 10, children: List.generate(item['topic'].length, (i) { return _childList(item['topic'][i]); }), ) : Container(), ), ], ); } Widget _childList(topicItem) { return GestureDetector( onTap: () {}, child: Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( height: 20, child: Image.network( topicItem['icon'], fit: BoxFit.cover, ), ), Padding( padding: const EdgeInsets.fromLTRB(2, 0, 0, 0), child: Text( topicItem['title'], style: TextStyle(fontSize: 12, color: Colors.black), ), ) ], ), ); }}Copy the code

Support for updates……