Flutter ListView 基础列表组件

一、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: [
					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: [
					Container(
					width:180.0,
					color: Colors.lightBlue,
					),
					Container(
					width:180.0,
					color: Colors.amber,
					child: ListView(
						children: [
						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 动态列表（动态循环数据）

import 'package:flutter/material.dart';

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: HomeContent(),
				));
			}
	}


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

课程学自 Dart入门实战教程，此博客仅供学习，如有侵权，请联系删除。