@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: 45,child: Row(
children: <Widget>[
SizedBox(
width: 30,),Icon(
Icons.notifications,color: Colors.blue,SizedBox(
width: 30,Expanded(
child: Text('消息中心'),Container(
padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(
shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(50)),color: Colors.red),child: Text(
'2',style: TextStyle(color: Colors.white),SizedBox(
width: 15,],Divider(),//类似上面的布局写6个
],);
}
_buildItem(IconData iconData,Color iconColor,String title,Widget widget) {
return Container(
height: 45,child: Row(
children: <Widget>[
SizedBox(
width: 30,Icon(
iconData,color: iconColor,SizedBox(
width: 30,Expanded(
child: Text('$title'),widget,SizedBox(
width: 15,);
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_buildItem(...),_buildItem(...),);
}
class SettingDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_SettingItem(
iconData: Icons.notifications,iconColor: Colors.blue,title: '消息中心',suffix: _NotificationsText(
text: '2',_SettingItem(
iconData: Icons.thumb_up,iconColor: Colors.green,title: '我赞过的',suffix: _Suffix(
text: '121篇',_SettingItem(
iconData: Icons.grade,iconColor: Colors.yellow,title: '收藏集',suffix: _Suffix(
text: '2个',_SettingItem(
iconData: Icons.shopping_basket,title: '已购小册',suffix: _Suffix(
text: '100个',_SettingItem(
iconData: Icons.account_balance_wallet,title: '我的钱包',suffix: _Suffix(
text: '10万',_SettingItem(
iconData: Icons.location_on,iconColor: Colors.grey,title: '阅读过的文章',suffix: _Suffix(
text: '1034篇',_SettingItem(
iconData: Icons.local_offer,title: '标签管理',suffix: _Suffix(
text: '27个',);
}
}
class _SettingItem extends StatelessWidget {
const _SettingItem(
{Key key,this.iconData,this.iconColor,this.title,this.suffix})
: super(key: key);
final IconData iconData;
final Color iconColor;
final String title;
final Widget suffix;
@override
Widget build(BuildContext context) {
return Container(
height: 45,child: Row(
children: <Widget>[
SizedBox(
width: 30,Icon(iconData,SizedBox(
width: 30,Expanded(
child: Text('$title'),suffix,SizedBox(
width: 15,);
}
}
class _NotificationsText extends StatelessWidget {
final String text;
const _NotificationsText({Key key,this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(
shape: BoxShape.rectangle,child: Text(
'$text',);
}
}
class _Suffix extends StatelessWidget {
final String text;
const _Suffix({Key key,this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
'$text',style: TextStyle(color: Colors.grey.withOpacity(.5)),);
}
}