-
使用ListView,引用flutter自带的图标制作一个简单的列表
body中引用 ListView()
children调用新的widget,然后new ListTile
使用leading 创建新的title前的样式:Icons.perm_camera_mic打开照相机图标
后面引入title: new Text()
/类似的多放几条
代码:`import ‘package:flutter/material.dart’;
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: ‘开心Flutter Demo’,
home: Scaffold(
appBar: new AppBar(title:new Text(‘开心Flutter Demo’)),
body: new ListView( //列表形式
children:[
new ListTile(
leading:new Icon(Icons.perm_camera_mic),
title: new Text(‘拍个照吧’),
),
new ListTile(
leading:new Icon(Icons.add_call),
title: new Text(‘打电话吧’),
),
new ListTile(
leading:new Icon(Icons.access_time),
title: new Text(‘看看时间’),
),
]
),),
);
}
}`
可以看出这样的效果: -
ListView横向列表
使用scrollDirection:Axis.horizontal,这里Axis.horizontal是横向的意思,Axis.vertical为纵向的列表;
然后使用组件创建条目数组
代码如下:
import ‘package:flutter/material.dart’;
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: ‘开心Flutter Demo’,
home: Scaffold(
appBar: new AppBar(title:new Text(‘开心Flutter Demo’)),
body: Center(
child:Container(
height:200.0,
child: new ListView(
scrollDirection:Axis.horizontal,//横向列表
children:[
new Container(
width: 180.0,
color: Colors.lightGreen[200],
),
new Container(
width: 180.0,
color: Colors.orangeAccent,
),
new Container(
width: 180.0,
color: Colors.lightBlue,
),
new Container(
width: 180.0,
color: Colors.purpleAccent,
)
],
),
),
)
),
);
}
}
3.创建动态列表:
代码如下import ‘package:flutter/material.dart’;
void main()=> runApp(MyApp(
items: new List.generate(1000,(i)=>“Item $i”)//在myapp中输入要传入的参数,创建动态列表
));
class MyApp extends StatelessWidget{
final Listitems; //final 为创建列表的最终值
MyApp({Key key,@required this.items}):super(key:key);//@required代表必须要传入的值 super为函数的父类
@override
Widget build(BuildContext context){
return MaterialApp(
title: ‘开心Flutter Demo’,
home: Scaffold(
appBar: new AppBar(title:new Text(‘开心Flutter Demo’)),
body: new ListView.builder( //创建listview,
itemCount:items.length, //item的数量为列表的宽度
itemBuilder: (contest,index){ //创建元素
return new ListTile(
title:new Text(’${items[index]}’) //为items赋值
);
}
)
)
);
}
}
展示的结果:可以一直往下滑到一千行