Flutter 商城實例 個人中心

今天開始布局會員中心的UI

1、會員中心_首頁頭部布局

頁面大體架構的編寫

打開以前建立的/lib/pages/member_page.dart文件，先刪除里邊的代碼，然后引入我們需要的package代碼。

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

引入package后，就可以編寫一個StatelessWidget，代碼如下：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MemberPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   
  }
}

然后返回一個Scaffold，在body區域里加入一個ListView。

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>[

       ],
     ) ,
   );
  }
}

這樣大體結構就已經編寫完成了，編寫完成后我們把ListView的進行分離出來，編寫成不同的方法。

頂部頭像區域編寫

頭像區域我們外邊套一層Container，然后里邊放入Column，圓形頭像這個部分，我們使用ClipOval Widget。代碼我直接放在下面了。

Widget _topHeader(){
    return Container(
      width: ScreenUtil().setWidth(750),
      padding: EdgeInsets.all(20.0),
      color: Colors.redAccent,
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top:20.0),
            child: ClipOval( //圓形頭像
              child: Image.network(
                'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
                width: 80.0,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top:10.0),
            child: Text('個人',style: TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(36))),
          )
        ],
      ),
    );
  }

寫完后把這個組件加入到build的ListView里就可以了。然后就可以進行一個預覽了。

2、會員中心_訂單區域UI編寫

頭部區域編寫好后，我們就可以編寫訂單區域了，這部分我們簡單分成兩個方法來進行編寫。

訂單標題區域

//我的訂單頂部標題
  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.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('待評價'),
              ],
            ),
          ),
        ],
      ),
    );

  }

這兩個方法寫完后，直接加到Build里就可以了。

3、會員中心_編寫ListTile的通用方法

下面把會員中心的剩下UI做完，可以看到，訂單下面就全部都是類似List的形式了。那我們可以編寫一個通用的方法，然后傳遞不同的值，來快速布局出下面的部分。

ListTile通用方法

我們利用方法傳遞參數的形式，創建一個可以通用的方法，只要傳遞不同的參數，就可以形成不同的組件。代碼如下

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 _myListTile(myicon,String title){
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(width: 1,color: Colors.black12)
        )
      ),
      child: ListTile(
        leading: Icon(myicon),
        title: Text(title),
        trailing: Icon(Icons.arrow_right),
      ),
    );
  }

組合List布局

有了通用的方法后，我們就可以進行組合List布局，代碼如下

Widget _actionList(){
    return Container(
      margin: EdgeInsets.only(top: 10),
      child: Column(
        children: <Widget>[
            _myListTile('領取優惠券'),
            _myListTile('已領取優惠券'),
            _myListTile('地址管理'),
            _myListTile('客服電話'),
            _myListTile('關於我們'),
        ],
      ),
    );
  }

這個組件編寫完成后，再組合到Build方法里面。這步完成后，就形成了一個完成的會員中心頁面。