Flutter 列表组件 ListView
垂直静态列表
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ListViewVerticalExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "垂直静态列表",
home: Scaffold(
appBar: AppBar(
title: Text("垂直静态列表"),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.alarm),
title: Text("alarm"),
),
ListTile(
leading: Icon(Icons.close),
title: Text("close"),
),
ListTile(
leading: Icon(Icons.transform),
title: Text("transform"),
),
ListTile(
leading: Icon(Icons.launch),
title: Text("launch"),
),
ListTile(
leading: Icon(Icons.title),
title: Text("title"),
),
ListTile(
leading: Icon(Icons.computer),
title: Text("computer"),
),
ListTile(
leading: Icon(Icons.height),
title: Text("height"),
),
ListTile(
leading: Icon(Icons.school),
title: Text("school"),
),
],
),
),
);
}
}
水平静态列表
- scrollDirection: Axis.horizontal 属性为水平方向
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ListViewHorizontalExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "水平静态列表",
home: Scaffold(
appBar: AppBar(
title: Text("水平静态列表"),
),
body: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.lightGreen,
),
Container(
width: 160.0,
color: Colors.amber,
),
Container(
width: 160.0,
color: Colors.blue,
child: Column(
children: <Widget>[
Text(
"水平",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 36.0),
),
Text(
"列表",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 36.0),
),
Icon(Icons.list)
],
),
),
Container(
width: 160.0,
color: Colors.cyan,
),
],
),
),
);
}
}
动态列表
- 通常我们不会使用过多的静态列表,后台加载数据通常会使用动态列表
- 通过ListView.builder构建
- itemCount 指定列表明细数量
- itemBuilder 构建明细的样式与数据绑定
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ListViewDynamicExample extends StatelessWidget {
List<String> mList;
ListViewDynamicExample() {
mList = new List<String>.generate(500, (index) => "Item $index");
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "动态列表",
home: Scaffold(
appBar: AppBar(
title: Text("动态列表"),
),
body: ListView.builder(
itemCount: mList.length,
itemBuilder: (context, index) {
return new ListTile(
leading: Icon(Icons.shopping_cart),
title: Text("${mList[index]}"),
);
},
),
),
);
}
}