flutter ListView
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new ListDemo(),
);
}
}
class ListDemo extends StatefulWidget {
@override
_ListDemoState createState() {
return new _ListDemoState();
}
}
class _ListDemoState extends State<ListDemo> {
Widget buildListTitle(BuildContext context,String item){
return new ListTile(
isThreeLine: true,
dense: false,
leading: new CircleAvatar(child: new Text(item),),
title: new Text('子item的标题'),
subtitle: new Text('子item的内容'),
trailing: new Icon(Icons.arrow_right,color: Colors.green,),
);
}
@override
Widget build(BuildContext context) {
List<String> items = <String>['A','B','C','D','E','F','G','H','I','J'];
Iterable<Widget> listTitles = items.map((String item){
return buildListTitle(context, item);
});
listTitles = ListTile.divideTiles(context: context,tiles: listTitles);
return new Scaffold(
appBar: new AppBar(
title: new Text('ListViewDemo'),
),
body: new Scrollbar(
child: new ListView(
children: listTitles.toList(),
),
),
);
}
}
效果图:
添加触控事件
首先创建要进入的页面 SecondPage.dart 的代码:
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
class SecondPage extends StatefulWidget {
SecondPage({Key key, this.title}):super(key:key);
final String title;
@override
State<StatefulWidget> createState() {
return new _SecondPageState(title: title);
}
}
class _SecondPageState extends State<SecondPage> {
_SecondPageState({Key key,this.title});
final String title;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第二页 $title'),
),
);
}
}
main.dart 代码:
import 'package:flutter/material.dart';
import 'SecondPage.dart';
void main() => runApp(new MyApp());
var clickText;
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new ListDemo(),
routes: <String,WidgetBuilder>{
'/second_page': (BuildContext content){
return new SecondPage(title: clickText,);
}
},
);
}
}
class ListDemo extends StatefulWidget {
@override
_ListDemoState createState() {
return new _ListDemoState();
}
}
class _ListDemoState extends State<ListDemo> {
Widget buildListTitle(BuildContext context,String item){
return new ListTile(
isThreeLine: true,
dense: false,
leading: new CircleAvatar(child: new Text(item),),
title: new Text('子item的标题'),
subtitle: new Text('子item的内容'),
trailing: new Icon(Icons.arrow_right,color: Colors.green,),
onTap: (){
print('ListView点击事件');
clickText = item;
Navigator.of(context).pushNamed('/second_page');
},
);
}
@override
Widget build(BuildContext context) {
List<String> items = <String>['A','B','C','D','E','F','G','H','I','J'];
Iterable<Widget> listTitles = items.map((String item){
return buildListTitle(context, item);
});
listTitles = ListTile.divideTiles(context: context,tiles: listTitles);
return new Scaffold(
appBar: new AppBar(
title: new Text('ListViewDemo'),
),
body: new Scrollbar(
child: new ListView(
children: listTitles.toList(),
),
),
);
}
}
点击后进入的效果图:
小知识点
SecondPage({Key key, this.title}):super(key:key);
与
SecondPage({Key key, @required this.title}):super(key:key);
上面的两个写法有什么区别呢?
最下面的写法明显多了 @required,意思为必须。
还要需要引入 foundation.dart :
import 'package:flutter/foundation.dart';
那么最上面的意思就是不是必须的,就是可选的。
当我们调用 new SecondPage 方法时,
必须的就会自动补完提示:
new SecondPage(title: null,)
而可选的 则不会提示:
new SecondPage()
就是这样的区别。