Flutter 中 ListView 垂直列表组件、水平列表组件
Flutter 中 ListView 垂直列表组件、水平列表组件
越陌度阡
发布于 2020-12-21 10:26:29
发布于 2020-12-21 10:26:29
列表布局是项目开发中最常用的一种布局方式，Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。
ListView常见的参数列表：
1. scrollDirection 列表方向。值的类型为 Axis，主要有以下两种：
(1). Axis.horizontal 水平列表；
(2). Axis.vertical 垂直列表；
2. padding 内边距。值的类型为 EdgeInsets，如：EdgeInsets.all()；
3. reverse 反向排序。值的类型为bool，如：true；
4. children 子元素。值的类型为List<Widegt>；
先来个简单的列表项：
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('在我心中，曾经有一个梦，要用歌声让你忘了所有的痛，灿烂星空，谁是真的英雄，平凡的人给我最多感动！')
)
]
);
}
}效果图如下：
给列表添加前置与后置图标。
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
)
)
]
);
}
}效果图如下：
给列表加上前置图片,实现常见的图文列表。
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
)
)
]
);
}
}效果图如下：
实现常见的视频类小程序首页布局。
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")
]
);
}
}效果图如下：
横向列表的实现。
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,
)
],
)
),
]
)
);
}
}效果图如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-12-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。