Flutter移動電商實戰-會員中心_編寫ListTile的通用方法

1、界面分析

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

2、UI編寫

2.1、頭部

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

頂部頭像區域
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、訂單標題區域

使用 ListTile 編寫，如下是關於 ListTile 組件屬性說明：

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

我的訂單標題代碼部分：

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、訂單列表區域

同樣使用 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('待發貨')
              ],
            ),
          ),

          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同用部分

由於這一塊內容格式基本一致，組裝一下 ListTile 的子項：

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),'領取優惠卷'),
          _myListTile(Icon(Icons.blur_circular),'已領取優惠卷'),
          _myListTile(Icon(Icons.add_location),'地址管理'),
          _myListTile(Icon(Icons.phone_in_talk),'客服電話'),
          _myListTile(Icon(Icons.add_to_home_screen),'關於我們'),
        ],
      ),
    );
}