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方法里面。这步完成后，就形成了一个完成的会员中心页面。