Flutter中ListView 垂直列表组件、水平列表组件

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

ListView常见的参数列表：

1. scrollDirection 列表方向。主要有以下两种：

(1). Axis.horizontal 水平列表；

(2). Axis.vertical 垂直列表；

2. padding 内边距；

3. reverse 反向排序；

4. children 子元素；

先来个简单的列表项：

代码语言：javascript复制

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(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 简单的文字垂直列表
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return ListView(
            // 内边距
            padding:EdgeInsets.all(20),
            // 子元素
            children: <Widget>[
                // 列表项
                ListTile(
                    // 标题
                    title:Text(
                        '真心英雄',
                        // 字体样式
                        style: TextStyle(fontSize:24,color:Colors.red),
                    ),
                    // 副标题
                    subtitle:Text('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！')
                ),

                ListTile(
                    title:Text(
                        '真心英雄',
                        style: TextStyle(fontSize:24,color:Colors.red),
                    ),
                    subtitle:Text('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！')
                ),

                ListTile(
                    title:Text(
                        '真心英雄',
                        style: TextStyle(fontSize:24,color:Colors.red),
                    ),
                    subtitle:Text('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！')
                )

            ]
        );
    }
}

效果图如下：

给列表添加前置与后置图标。

代码语言：javascript复制

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(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 给列表添加前置与后置图标
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return ListView(
            padding:EdgeInsets.all(20),
            children: <Widget>[
                ListTile(
                    // 前置图标
                    leading: Icon(
                        // 图标类型
                        Icons.settings,
                        // 颜色
                        color:Colors.blue,
                        // 图标大小
                        size:40
                    ),
                    // 标题
                    title:Text(
                        '真心英雄',
                        // 样式
                        style: TextStyle(
                            fontSize:24,
                            color:Colors.red
                            )
                        ),
                    // 副标题
                    subtitle:Text('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！'),
                    // 后置标题
                    trailing:Icon(
                        Icons.inbox,
                        size:40
                    )
                ),
                ListTile(
                    leading:Icon(
                        Icons.home,
                        color:Colors.red,
                        size:40
                    ),
                    title:Text(
                        '真心英雄',
                        style: TextStyle(
                            fontSize:24,
                            color:Colors.red
                        )
                    ),
                    subtitle:Text('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！'),
                    trailing:Icon(
                        Icons.inbox,
                        size:40
                    )
                )
            ]
        );
    }
}

效果图如下：

给列表加上前置图片,实现常见的图文列表。

代码语言：javascript复制

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(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 给列表加上前置图片,实现常见的图文列表
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return ListView(
            // 内边距
            padding:EdgeInsets.all(20),
            children: <Widget>[
                ListTile(
                    // 前置图片
                    leading:Image.network("https://www.itying.com/images/flutter/1.png"),
                    // 标题
                    title:Text(
                        '真心英雄',
                        // 样式
                        style: TextStyle(
                            fontSize:24,
                            color:Colors.red
                            )
                        ),
                    // 副标题
                    subtitle:Text('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！'),
                    // 后置图标
                    trailing:Icon(
                        Icons.inbox,
                        size:40
                    )
                ),
                ListTile(
                    leading:Image.network("https://www.itying.com/images/flutter/2.png"),
                    title:Text(
                        '真心英雄',
                        style: TextStyle(
                            fontSize:24,
                            color:Colors.red
                        )
                    ),
                    subtitle:Text('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！'),
                    trailing:Icon(
                        Icons.inbox,
                        size:40
                    )
                )
            ]
        );
    }
}

效果图如下：

实现常见的视频类小程序首页布局。

代码语言：javascript复制

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(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 实现纯图片列表
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return ListView(
            // 内边距
            padding:EdgeInsets.all(10),
            // 子元素
            children: <Widget>[
                Container(
                    // 子元素
                    child:Text(
                        '美丽风景',
                        textAlign: TextAlign.left,
                        style:TextStyle(
                            fontSize: 24
                        )
                    ),
                    height: 40,
                    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
                ),
                // 加载网络图片
                Image.network("https://www.itying.com/images/flutter/1.png"),
                Container(
                    child:Text(
                        '美丽风景',
                        textAlign: TextAlign.left,
                        style:TextStyle(
                            fontSize: 24
                        )
                    ),
                    height: 40,
                    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
                ),
                Image.network("https://www.itying.com/images/flutter/2.png"),
                Container(
                    child:Text(
                        '美丽风景',
                        textAlign: TextAlign.left,
                        style:TextStyle(
                            fontSize: 24
                        )
                    ),
                    height: 40,
                    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
                ),
                Image.network("https://www.itying.com/images/flutter/3.png"),
                Container(
                    child:Text(
                        '美丽风景',
                        textAlign: TextAlign.left,
                        style:TextStyle(
                            fontSize: 24
                        )
                    ),
                    height: 40,
                    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
                ),
                Image.network("https://www.itying.com/images/flutter/4.png")
            ]
        );
    }
}

效果图如下：

横向列表的实现。

代码语言：javascript复制

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(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 水平列表
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Container(
            // 横向滚动列表一定要指定高度，否则会自动填充为全屏高度
            height:180.0,
            child:ListView(
                // 内边距
                padding:EdgeInsets.all(10),
                // 水平列表
                scrollDirection: Axis.horizontal,
                // 子元素
                children: <Widget>[
                    Container(
                        // 宽度
                        width:180.0,
                        // 颜色
                        color:Colors.red,
                        // 子元素
                        child:ListView(
                            children: <Widget>[
                                Image.network("https://www.itying.com/images/flutter/1.png"),
                                Text(
                                    '这是一个标题',
                                    style:TextStyle(fontSize: 14.0),
                                    textAlign: TextAlign.center,
                                )
                            ],
                        )
                    ),
                    Container(
                        width:180.0,
                        color:Colors.yellow,
                        child:ListView(
                            children: <Widget>[
                                Image.network("https://www.itying.com/images/flutter/2.png"),
                                Text(
                                    '这是一个标题',
                                    style:TextStyle(fontSize: 14.0),
                                    textAlign: TextAlign.center,
                                )
                            ],
                        )
                    ),
                    Container(
                        width:180.0,
                        color:Colors.blue,
                        child:ListView(
                            children: <Widget>[
                                Image.network("https://www.itying.com/images/flutter/3.png"),
                                Text(
                                    '这是一个标题',
                                    style:TextStyle(fontSize: 14.0),
                                    textAlign: TextAlign.center,
                                )
                            ],
                        )
                    ),
                    Container(
                        width:180.0,
                        color:Colors.green,
                        child:ListView(
                            children: <Widget>[
                                Image.network("https://www.itying.com/images/flutter/4.png"),
                                Text(
                                    '这是一个标题',
                                    style:TextStyle(fontSize: 14.0),
                                    textAlign: TextAlign.center,
                                )
                            ],
                        )
                    ),
                ]
            )
        );
    }
}

效果图如下：

listview android

0 人点赞