您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

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

2020-04-30【Flutter】1293人已围观

简介## 一、Flutter 列表组件概述列表布局是我们项目开发中最常用的一种布局方式。`Flutter` 中我们可以通过 `ListView` 来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下分类： 1. 垂直列表 2. 垂直图文列表 3. 水平列表 4. 动态列表 5. 矩阵式列表 ## 二、 Flutter 列表参数名称 | 类型 | 说明 ---|---|--- scrollDirection | Axis | A

## 一、Flutter 列表组件概述

列表布局是我们项目开发中最常用的一种布局方式。`Flutter` 中我们可以通过 `ListView` 来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。

列表有一下分类：

1. 垂直列表
2. 垂直图文列表
3. 水平列表
4. 动态列表
5. 矩阵式列表

## 二、 Flutter  列表参数

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

## 三、 Flutter  基本列表

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302194115.png)

```
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    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  水平列表

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302193903.png)

```
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Container(
        height: 200.0,
        margin: EdgeInsets.all(5),
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 180.0,
              color: Colors.lightBlue,
            ),
            Container(
              width: 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(
              width: 180.0,
              color: Colors.deepOrange,
            ),
            Container(
              width: 180.0,
              color: Colors.deepPurpleAccent,
            ),
          ],
        ));
  }
}
```

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

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302194235.png)

```
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) {
// TODO: implement build
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context, index) {
// print(context);
        return ListTile(
          leading: Icon(Icons.phone),
          title: Text("${list[index]}"),
        );
      },
    );
  }
}

```

## 六、 Flutter GridView   组件的常用参数

当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 `GridView` 实现布局。

**GridView  创建网格列表有多种方式，下面我们主要介绍两种**

1. 可以通过 GridView.count 实现网格布局
2. 通过 GridView.builder 实现网格布局

**常用属性**

名称 | 类型 | 说明
---|---|---
scrollDirection | Axis | 滚动方法
padding | EdgeInsetsGeometry | 内边距
resolve | bool | 组件反向排序
crossAxisSpacing | double | 水平子 `Widget` 之间间距
mainAxisSpacing | double | 垂直子 `Widget` 之间间距
crossAxisCount | int | 一行的 `Widget` 数量
childAspectRatio | double | 子 `Widget` 宽高比例
children | | <Widget>[ ]
gridDelegate | SliverGridDelegateWithFix<br>edCrossAxisCount（常用）<br>SliverGridDelegateWithMax<br>CrossAxisExtent | 控制布局主要用在 `GridView.builder` 里面

## 七、 Flutter GridView.count  实现网格布局

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302192523.png)

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

List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
];

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {

List<Widget> _getListData() {
      var tempList=listData.map((value){
          return Container(            
            child:Column(
                children: <Widget>[
                  Image.network(value['imageUrl']),
                  SizedBox(height: 12),
                  Text(
                    value['title'],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20
                    ),
                  )
                ],

),
            decoration: BoxDecoration(

border: Border.all(
                color:Color.fromRGBO(233, 233,233, 0.9),
                width: 1
              )
            ),
              
            // height: 400,  //设置高度没有反应
          );

});
      // ('xxx','xxx')
      return tempList.toList();
  }

@override
  Widget build(BuildContext context) {    
    return GridView.count(
        crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,  //一行的 Widget 数量
        // childAspectRatio:0.7,  //宽度和高度的比例
        children: this._getListData(),
    );
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-05(图片组件)

下一篇：flutter-07(页面布局 Paddiing Row Column Expanded 组件详解)