1、界面分析

通過下圖我們可以拆分成 4 部分，頭部、訂單標(biāo)題區(qū)域、訂單列表區(qū)域、ListTitle同用部分。

2、UI編寫

2.1、頭部

主要用到了圓形頭像裁剪組件-ClipOval

頂部頭像區(qū)域
Widget?_topHeader(){
??return?Container(
????width:?ScreenUtil().setWidth(750),
????padding:?EdgeInsets.all(20),
????color:?Colors.white,
????child:?Column(
??????children:?<Widget>[
????????Container(
??????????margin:?EdgeInsets.only(top:?30),
??????????width:?ScreenUtil().setWidth(155),
??????????child:?ClipOval(
??????????????child:Image.network('https://profile.csdnimg.cn/6/4/0/1_niceyoo')
??????????),
????????),
????????Container(
??????????margin:?EdgeInsets.only(top:?10),
??????????child:?Text(
????????????'niceyoo',
????????????style:?TextStyle(
??????????????fontSize:?ScreenUtil().setSp(36),
??????????????color:?Colors.white
????????????),
??????????),
????????)
??????],
????),
??);
}

2.2、訂單標(biāo)題區(qū)域

使用 ListTile 編寫，如下是關(guān)于 ListTile 組件屬性說明：

const?ListTile({
????Key?key,
????this.leading,左側(cè)widget
????this.title,標(biāo)題
????this.subtitle,副標(biāo)題
????this.trailing,右側(cè)widget
????this.isThreeLine?=?false,是否默認(rèn)3行高度，subtitle不為空時才能使用
????this.dense,設(shè)置為true后字體變小
????this.contentPadding,
????this.enabled?=?true,能否被點(diǎn)擊
????this.onTap,
????this.onLongPress,
????this.selected?=?false,展示是否默認(rèn)顯示選中
})

我的訂單標(biāo)題代碼部分：

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),
??????),
????);
}

2.3、訂單列表區(qū)域

同樣使用 ListTile 組件堆起來的：

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.party_mode,
??????????????????size:?30,
????????????????),
????????????????Text('待付款')
??????????????],
????????????),
??????????),

??????????Container(
????????????width:?ScreenUtil().setWidth(187),
????????????child:?Column(
??????????????children:?<Widget>[
????????????????Icon(
??????????????????Icons.query_builder,
??????????????????size:?30,
????????????????),
????????????????Text('待發(fā)貨')
??????????????],
????????????),
??????????),

??????????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('待評價')
??????????????],
????????????),
??????????)
????????],
??????),
????);
??}

2.4、ListTitle同用部分

由于這一塊內(nèi)容格式基本一致，組裝一下 ListTile 的子項(xiàng)：

Widget?_myListTile(Icon?icon,String?title){
????return?Container(
??????decoration:?BoxDecoration(
????????color:?Colors.white,
????????border:?Border(
??????????bottom:?BorderSide(width:?1,color:?Colors.black12)
????????)
??????),
??????child:?ListTile(
????????leading:?icon,
????????title:?Text(
????????????title,
????????????textAlign:?TextAlign.left,
????????),
????????trailing:?Icon(Icons.arrow_right),
??????),
????);
}

組合 List 布局：

Widget?_actionList(){
????return?Container(
??????margin:?EdgeInsets.only(top:?10),
??????child:?Column(
????????children:?<Widget>[
??????????_myListTile(Icon(Icons.settings),'領(lǐng)取優(yōu)惠卷'),
??????????_myListTile(Icon(Icons.blur_circular),'已領(lǐng)取優(yōu)惠卷'),
??????????_myListTile(Icon(Icons.add_location),'地址管理'),
??????????_myListTile(Icon(Icons.phone_in_talk),'客服電話'),
??????????_myListTile(Icon(Icons.add_to_home_screen),'關(guān)于我們'),
????????],
??????),
????);
}

總結(jié)

以上是生活随笔為你收集整理的66-Flutter移动电商实战-会员中心_编写ListTile的通用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。