import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.red, // 主题颜色
),
home: ContactListWidget(),
);
}
}
class ContactListWidget extends StatefulWidget {
@override
createState() => ContactListState();
}
class ContactListState extends State<ContactListWidget> {
// 数据
var contacts = [
"Roy",
"Lily",
"Leo",
"Kiven",
"Capatin",
"Charles",
"Mark",
"Bill",
"Vincent",
"William",
"Joseph",
"James",
"Henry",
"Gary",
"Martin"
];
var collects = []; // 收藏的数据
final fontStyle = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("联系人列表"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.list),
iconSize: 40.0,
onPressed: pushAction,
),
],
),
body: buildContactList(),
);
}
// 构建列表
Widget buildContactList() {
return ListView.separated(
padding: const EdgeInsets.all(10.0),
itemCount: contacts.length,
separatorBuilder: (context,index) {
return Divider(color: Colors.black26,height: 0.5,);
},
itemBuilder: (context, index) {
return buildRow(contacts[index]);
},
);
}
// 构建Row
Widget buildRow(String contact) {
bool alreadyCollect = collects.contains(contact); // 是否收藏
return ListTile(
leading: Icon(Icons.people,size: 40,),
title: Text(
contact,
style: fontStyle,
),
subtitle: Text("详细信息",style: fontStyle,),
trailing: Icon(
alreadyCollect ? Icons.favorite : Icons.favorite_border,
color: alreadyCollect ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadyCollect) {
collects.remove(contact);
} else {
collects.add(contact);
}
});
},
);
}
// 跳转
void pushAction() {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
var titles = collects.map((title) {
return ListTile(
title: Text(
title,
style: fontStyle,
),
);
});
var divided =
ListTile.divideTiles(tiles: titles, context: context).toList();
return Scaffold(
appBar: AppBar(
title: Text(
"收藏列表",
style: fontStyle,
),
),
body: ListView(
children: divided,
),
);
}),
);
}
}
Flutter 官网例子
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 今天我们要实现一个豆瓣的Top150页面,看下豆瓣的效果。 我们实现的效果: ListView,顾名思义,列表组件...
- Flutter官方SDK目前还没有支持ListView.jumpTo(index)的功能,但是这个功能是很多App...
- 解决Flutter ListView 或者SingleChildScrollView 嵌套 ListView.bu...