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

一、Flutter列表组件概述...................................................................................................... 1

二、Flutter列表参数.............................................................................................................. 1

三、Flutter基本列表.............................................................................................................. 2

四、Flutter水平列表.............................................................................................................. 3

五、Vscode调试Flutter项目................................................................................................. 4

一、 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) {

// 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 水平列表

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,
            ),
          ],
        ));
  }
}

五、 Vscode 调试 Flutter 项目

1 、 Vscode 中打开 flutter 项目进行开发
2 、运行 Flutter 项目

flutter run

r 键：点击后热加载，也就算是重新加载吧。

p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。

o 键：切换android和ios的预览模式。

q 键：退出调试预览模式。

3 、 Vscode 默认连不上第三方模拟器解决方案

cd 到对应夜神模拟器 D:\Program Files\Nox\bin 目录 然后运

nox_adb.exe connect 127.0.0.1:62001