在Flutter中,用ListView来显示列表项,其支持垂直和水平方向展示,通过过一个属性我们就可以控制其方向,列表有以下分类:
属性名 | 类型 | 默认值 | 说明 |
ScrollDirection | Axis | Axis.vertical | 列表的排列方向,Axis.vertical为垂直方向,Axis.horizontal为水平方向 |
padding | EdgeInsetsGeometry | 列表内部的空白区域,如果有child的话,child位于padding内部 | |
reverse | bool | false | 组件排列反向 |
children | List<Widget> | 列表元素,注意List元素全部为Widget类型 |
示例代码如下:
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'ListView Demo',
home: new ListViewDemo(),
);
}
}
class ListViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: Text('ListView Dmoe'),
leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
actions: <Widget>[
new IconButton(icon: Icon(Icons.search), onPressed: (){
Fluttertoast.showToast(msg: '搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
})
],
),
body: new ListView(
// padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
children: <Widget>[
//数据源 Icons.add_circle 图片资源
ListTile(leading: new Icon(Icons.add_circle),title: new Text('1'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('2'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('3'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('4'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('5'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('6'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('7'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('8'),),
ListTile(leading: new Icon(Icons.add_circl),title: new Text('9'),),
ListTile(leading: new Icon(Icons.add_circle),title: new Text('10'),),
],
),
);
}
}
比较简单的垂直方向的列表