Flutter study notes (12) - the list of components Flutter study notes (12) - the list of components Flutter study notes (13) - Form component

For reprint, please indicate the source: Flutter study notes (12) - the list of components

 In everyday products project demand, there is often a demand to show a list of classes, commonly used in Android approach is to collect the data source, and then create a list of adapters Adapter, passes the data source to the Adapter, the final list on display data, then how to deal with a list of data in the Flutter in it?

In Flutter in a ListView to display a list of items, which supports vertical and horizontal display, by over a property we can control its direction, there is a list of the following categories:

　　1. List level

　　2. Vertical list

　　3. The amount of data is very large list

　　4. List matrix

• Vertical list of components

And component properties described ListView

Property name	Types of	Defaults	Explanation
ScrollDirection	Axis	Axis.vertical	Arrangement direction of the list, Axis.vertical vertical direction, Axis.horizontal horizontal direction
padding	EdgeInsetsGeometry		Blank area inside the list, if there are child then, child located inside padding
reverse	bool	false	The reverse arrangement of components
children	List<Widget>		List elements, pay attention to all elements of List Widget type

 

 

 

 

 

 

 

 

Sample code is as follows:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ListView Demo',
      home: new ListViewDemo(),
    );
  }
}

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text('ListView Dmoe'),
        leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
        actions: <Widget>[
          new IconButton(icon: Icon(Icons.search), onPressed: (){
            Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
          })
        ],
      ),
      body: new ListView(
//         padding: new new EdgeInsets.symmetric (Vertical: 10, Horizontal: 10), // to set the sub-elements of the horizontal and vertical directions padding 
        padding: new new EdgeInsets.only (left: 10 , Top: 0 , right: 10 , bottom : 0 ), // to the sub-element set left, top, right, under the padding 
        Children: <the Widget> [
           // data source 
          ListTile (leading: new new Icon (Icons.add_circle_outline), title: new new the Text ( ' first data ' ),), 
          ListTile (leading: new new Icon (Icons.add_circle_outline), title: new newThe Text ( ' second data ' ),), 
          ListTile (leading: new new Icon (Icons.add_circle_outline), title: new new the Text ( ' third data ' ),), 
          ListTile (leading: new new Icon (Icons.add_circle_outline) , title: new new the Text ( ' the fourth data ' ),), 
          ListTile (leading: new new Icon (Icons.add_circle_outline), title: new new the Text ( ' fifth data ' ),), 
          ListTile (leading: new new Icon ( Icons.add_circle_outline), title: new new Text (' Article data ' ),), 
          ListTile (leading: new new Icon (Icons.add_circle_outline), title: new new the Text ( ' Article data ' ),), 
          ListTile (leading: new new Icon (Icons.add_circle_outline), title : new new the Text ( ' Article data ' ),), 
          ListTile (leading: new new Icon (Icons.add_circle_outline), title: new new the Text ( ' IX data ' ),), 
          ListTile (leading: new new Icon (Icons. add_circle_outline), title: new new the Text ( 'Article data X ' ),), 
        ], 
      ), 
    ); 
  } 
}

 

The above list is a simple vertical direction, Demo which I tried two sub-elements to set the padding of the way, will act padding properties on the entire ListView, a single sub-elements are not applied to the. Screenshot attached at the results:

• Level list of components

Sample code is as follows:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ListView Demo',
      home: new ListViewDemo(),
    );
  }
}

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text('ListView Dmoe'),
        leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
        actions: <Widget>[
          new IconButton(icon: Icon(Icons.search), onPressed: (){
            Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
          })
        ],
      ),
      body: Container(
        height: 100,
        child: new ListView(
          scrollDirection: Axis.horizontal,
//        padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
          padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
          children: <Widget>[
            //数据源
            Container(
              width: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              color: Colors.green,
            ),
            Container(
              width: 50,
              color: Colors.amberAccent,
            ),
            Container(
              width: 50,
              color: Colors.blueGrey,
            ),
          ],
        ),
      ),
    );
  }
}

 

效果截图如下：

• 长列表组件

当列表的数据非常多时，需要使用长列表，比如淘宝后台的订单列表，手机通讯录等，这些列表项数据很多，长列表也是使用ListView作为基础组件，只不过需要添加一个列表项构造器itemBuilder。Flutter的长列表组件其实相当于Android中的RecyclerView，它会自动为您回收列表元素。在创建ListView.builder时，需要传入两个参数，一个列表的初始长度，一个itemBuilder函数

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {

  //初始化数据源
  final List<String> items = new List<String>.generate(200, (i)=>"Item $i";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '长列表组件',
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: Text('长列表组件'),
          leading: Icon(Icons.menu,size: 30,color: Colors.white,),
          actions: <Widget>[
            new IconButton(icon: Icon(Icons.search), onPressed: null)
          ],
        ),
        body: new ListView.builder(
          itemCount: items.length,
　　　　　　//列表构造器
          itemBuilder: (context,index){
            return new ListTile(
              leading: Icon(Icons.add_circle),
              title: new Text('${items[index]}'),
              onTap: (){//给每一个item增加点击事件
                Fluttertoast.showToast(
                  msg: '${items[index]}'+'被点击了',
                  toastLength: Toast.LENGTH_SHORT,
                  gravity: ToastGravity.BOTTOM,
                  textColor: Colors.white);
              },
            );
          },
        ),
      ),
    );
  }
}

 

上面的代码，实现了当数据源比较多时的处理办法，而且给每一个item增加了点击事件onTap()。

 

下一章节：Flutter学习笔记（13）--表单组件