1.列表组件–前后加图标ListView

Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下 分类：
1、垂直列表 2、垂直图文列表 3、水平列表 4、动态列表 5、矩阵式列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
        //默认是一个垂直组件,一般搭配ListView使用
        padding: EdgeInsets.all(20),
        children: <Widget>[
          ListTile(
            leading: Icon(//加图标
                Icons.ac_unit,
                color: Colors.red,//设置图标颜色
                size: 40.0,
            ),
            title: Text(
              '11111',
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.red,
              ),
            ),
            subtitle: Text('小标题'),
            trailing: Icon(//在后面加图标
              Icons.work
            ),
          ),
          ListTile(
            leading: Icon(//加图标
                Icons.ac_unit),
            title: Text('11111'),
            subtitle: Text('小标题'),
          ),
        ]);
  }
}

• 图文列表

leading: Image.asset('images/ava.png'),

2.图文列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(padding: EdgeInsets.all(10), children: <Widget>[
      // 什么Widget都可以放
      Image.asset(
          'images/ava.png',
          width: 100.0,
          height: 100.0,
        ),
      Container(
        child:Text(
          '我是一个标题',
          textAlign: TextAlign.center,
        ),
        height: 40.0,
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
        // 设置背景色
        color: Colors.yellow,
        border: Border.all(
          color: Colors.blue,
          width:2.0
        ),
        borderRadius: BorderRadius.all(//设置圆角
           Radius.circular(8),
        ),
        )
      ),
      Image.asset(
        'images/ava.png',
        width: 100.0,
        height: 100.0,
      ),
            Container(
        child:Text(
          '我是一个标题',
          textAlign: TextAlign.center,
        ),
        height: 40.0,
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
        // 设置背景色
        color: Colors.yellow,
        border: Border.all(
          color: Colors.blue,
          width:2.0
        ),
        borderRadius: BorderRadius.all(//设置圆角
           Radius.circular(8),
        ),
        )
      ),
      Image.asset(
        'images/ava.png',
        width: 100.0,
        height: 100.0,
      ),
    ]);
  }
}

3.水平图文列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 180.0,
        child: ListView(scrollDirection: Axis.horizontal, children: <Widget>[
          Container(
            width: 180.0, //垂直列表设置宽度不管事
            height: 180.0,//水平列表设置高度不管事
            color: Colors.yellow,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.red,
            child:ListView(
              children: <Widget>[
                Text('文字',textAlign: TextAlign.center,),
                Image.asset(
                  'images/ava.png',
                  height:100.0,
                  )

              ],

            )
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.blue,
          ),
        ]));
  }
}

4.动态列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  // 动态列表
  List<Widget> getData() {
    List<Widget> list = new List();
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text('我是第$i个列表'),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this.getData()
    );
  }
}

5.map循环动态列表

import 'package:flutter/material.dart';
import 'res/data.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  // 动态列表
  List<Widget> getData() {
    var tempList = listData.map((value) {
      return ListTile(
        title:Text(
          value['title']
        )
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: this.getData());
  }
}