ListView 基础列表组件、水平 列表组件、图标组件

一、Flutter 列表组件概述

列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义

列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下

分类：

1、垂直列表

2、垂直图文列表

3、水平列表

4、动态列表

5、矩阵式列表

 

二、Flutter 列表参数

名称	类型	说明
scrollDirection	Axis	Axis.horizontal 水平列表 Axis.vertical 垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List<Widget>	列表元素

 

三、Flutter 基本列表

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "this is list",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('this is list this is list'),
          ),
          ListTile(
            title: Text("this is list"),
            subtitle: Text('this is list this is list'),
            trailing: Icon(Icons.phone),
          ),
          ListTile(
            title: Text("this is list"),
            subtitle: Text('this is list this is list'),
          ),
          ListTile(
            title: Text("this is list"),
            subtitle: Text('this is list this is list'),
          ),
          ListTile(
            title: Text("this is list"),
            subtitle: Text('this is list this is list'),
          )
        ],
      ),
    );
  }
}

四、Flutter 水平列表

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 200.0,
        margin: EdgeInsets.all(5),
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
               180.0,
              color: Colors.lightBlue,
            ),
            Container(
               180.0,
              color: Colors.amber,
              child: ListView(
                children: <Widget>[
                  Image.network(
                      'https://resources.ninghao.org/images/childhood-in-a-picture.jpg'),
                  SizedBox(height: 16.0),
                  Text(
                    '这是一个文本信息',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16.0),
                  )
                ],
              ),
            ),
            Container(
               180.0,
              color: Colors.deepOrange,
            ),
            Container(
               180.0,
              color: Colors.deepPurpleAccent,
            ),
          ],
        ));
  }
}

五、Flutter 动态列表（动态循环数据）

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('FlutterDemo')),
          body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  List list = new List();

  HomeContent({Key key}) : super(key: key) {
    for (var i = 0; i < 20; i++) {
      list.add("这是第${i}条数据");
    }
    print(list);
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(Icons.phone),
          title: Text("${list[index]}"),
        );
      },
    );
  }
}