列表布局是项目开发中最常用的一种布局方式,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>;
先来个简单的列表项:
代码语言: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,
)
],
)
),
]
)
);
}
}
效果图如下: