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('關於咱們'),
        ],
      ),
    );
  }

}