Flutter实战视频-移动电商-66.会员中心_编写ListTile通用方法
66.会员中心_编写ListTile通用方法
布局List里面嵌套一个ListTile的布局效果
里面有很多条记录,以后可能还会增加,所以这里我们做一个通用的组件
通用组件方法
这里使用Column布局
调用总的方法
效果展示
最终代码:
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class MemberPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('会员中心'), ), body: ListView( children: <Widget>[ _topHeader(), _orderTitle(), _orderType(), _actionList() ], ), ); } Widget _topHeader(){ return Container( width: ScreenUtil().setWidth(750), padding: EdgeInsets.all(20), color: Colors.pinkAccent,//亮粉色 child: Column( children: <Widget>[ Container( margin: EdgeInsets.only(top: 30), child: ClipOval(//圆形的头像 child: Image.network('http://blogimages.jspang.com/blogtouxiang1.jpg'), ), ), //头像下面的文字,为了好看也是嵌套一个Container Container( margin: EdgeInsets.only(top: 10), child: Text( '技术胖', style: TextStyle( fontSize: ScreenUtil().setSp(36), color: Colors.black54 ) ), ) ], ), ); } //我的订单标题 Widget _orderTitle(){ return Container( margin: EdgeInsets.only(top: 10), decoration: BoxDecoration( color: Colors.white, border: Border( bottom: BorderSide(width: 1,color: Colors.black12) ) ), child: ListTile( leading: Icon(Icons.list), title: Text('我的订单'), trailing: Icon(Icons.arrow_right), ), ); } Widget _orderType(){ return Container( margin: EdgeInsets.only(top:5), width: ScreenUtil().setWidth(750), height: ScreenUtil().setHeight(150), padding: EdgeInsets.only(top: 20), color:Colors.white, child: Row( children: <Widget>[ Container( width: ScreenUtil().setWidth(187), child: Column( children: <Widget>[ Icon( Icons.query_builder, size: 30, ), Text( '待付款' ) ], ), ), Container( width: ScreenUtil().setWidth(187), child: Column( children: <Widget>[ Icon( Icons.query_builder, size: 30, ), Text( '待发货' ) ], ), ), Container( width: ScreenUtil().setWidth(187), child: Column( children: <Widget>[ Icon( Icons.directions_car, size: 30, ), Text( '待收货' ) ], ), ), Container( width: ScreenUtil().setWidth(187), child: Column( children: <Widget>[ Icon( Icons.content_paste, size: 30, ), Text( '待评价' ) ], ), ) ], ), ); } //通用ListTitle Widget _myListTile(String title){ return Container( decoration: BoxDecoration( color: Colors.white, border: Border( bottom: BorderSide( width: 1, color: Colors.black12 ) ) ), child: ListTile( leading: Icon(Icons.blur_circular), title: Text(title), trailing: Icon(Icons.arrow_right), ), ); } Widget _actionList(){ return Container( margin: EdgeInsets.only(top: 10), child: Column( children: <Widget>[ _myListTile('领取优惠券'), _myListTile('已领取优惠券'), _myListTile('地址管理'), _myListTile('客服电话'), _myListTile('关于我们'), ], ), ); } }