列表组件
水平方向宽度自适应(自动填充满父容器)
垂直方向高度自适应(自动填充满父容器)
ListView(
children: <Widget>[ 可以放置任意数量任意类型组件
...
提供的ListTile组件可以设置qq看点的一级标题、二级标题和图片等内容
ListTile(
title:Text("这是标题") ,
subtitle:Text("这是二级标题"),
leading:在首部放置字体图标/图片,
trailing:在尾部放置字体图标
)
],
scrollDirection: Axis.vertical, //垂直列表默认
padding: EdgeInsets.all(10),
reverse: false, //反向排列
)
利用选项生成动态列表的三种方式:
因为children接收一个类型为widget的数组
(1)利用for循环
List<Widget> _getdata(){
List<Widget> list =new List();
for(int i=0;i<=20;i++)
{
list.add(
ListTile(
title:Text('啊哈哈')
),
);
}
return list;
}
(2)利用map循环
List<Widget> _getdata2(){
List list=["a","b","c"];
var temp=list.map((value){
return ListTile(title: Text(value));
}); //也可以直接在类中使用,末尾要toList()转换
return temp.toList(); map返回的("xx","xx")形式
}
(3)利用自带的ListView.builder,
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: this.list.length, 数组长度
itemBuilder: (context,index){
return ListTile(title:Text(this.list[index]));
},
);
图标组件:
Icon(
Icons.图标名称,
this.size, 大小
this.color, 颜色
this.semanticLabel,
this.textDirection, 布局
)
代码示例:
import 'package:flutter/material.dart';
void main(){
runApp(App());
}
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home:Scaffold(
appBar:AppBar(title:Text('aa')),
body:Home()
)
);
}
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: <Widget>[ //可以放置任意数量任意类型组件
ListTile(leading:Icon(Icons.settings),title:Text("这是标题") ,subtitle: Text("二级标题")),
ListTile(title:Text("这是标题") ,subtitle: Text("二级标题"),trailing:Icon(Icons.settings) ,),
ListTile(leading:Image.asset("images/2.0x/钢铁侠4.jpg"),title:Text("这是标题") ,subtitle: Text("二级标题")),
ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
ListTile(title:Text("这是标题") ,subtitle: Text("二级标题")),
Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
Image.asset("images/2.0x/钢铁侠4.jpg",height: 50,width: 50,alignment: Alignment.centerLeft,),
]
,
scrollDirection: Axis.vertical, //垂直列表默认
padding: EdgeInsets.all(10),
reverse: false, //反向排列
);
}
}
import 'package:flutter/material.dart';
void main(){
runApp(App());
}
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home:Scaffold(
appBar:AppBar(title:Text('aa')),
body:Home2()
)
);
}
}
class Home extends StatelessWidget{
List<Widget> _getdata(){
List<Widget> list =new List();
for(int i=0;i<=20;i++)
{
list.add(
ListTile(
title:Text('啊哈哈')
),
);
}
return list;
}
List<Widget> _getdata2(){
List list=["a","b","c"];
var temp=list.map((value){
return ListTile(title: Text(value));
});
return temp.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: this._getdata2()
,
scrollDirection: Axis.vertical, //垂直列表默认
padding: EdgeInsets.all(10),
reverse: false, //反向排列
);
}
}
class Home2 extends StatelessWidget{
List list=["a","b","c","d"];
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: this.list.length,
itemBuilder: (context,index){
return ListTile(title:Text(this.list[index]));
},
);
}
}
/*
*/