前端开发进阶篇——Flutter实战之个人中心
个人中心，也就是个人账户资料页面。是每一个app都会用到。实现这个页面我们需要对于页面UI进行提前的规划谋篇。
1. 简单个人中心
下面我们首先进行一个简单的个人页面示例：
import 'package:flutter/material.dart';
void main(List<String> args) {
return runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Hello Flutter",
home: Scaffold(
appBar: new AppBar(title: Text('ListView'),),
body: Center(
child:ListView(
children:<Widget>[
CircleAvatar(
backgroundImage: AssetImage('images/man.jpg'),
radius: 100,
),
Container(),
ListTile(
leading:new Icon(Icons.account_circle,size: 30.0,color: Colors.green,),
title:new Text('xiaotaunzi',
style:TextStyle(fontWeight: FontWeight.w900,fontSize: 20.0))
),
ListTile(
leading:new Icon(Icons.add_location,size: 30.0,color: Colors.red),
title:new Text('中国',
style:TextStyle(fontWeight: FontWeight.w900,fontSize: 20.0))
),
ListTile(
leading:new Icon(Icons.phone,size: 30.0,color: Colors.blue ,),
title:new Text('999999999',
style:TextStyle(fontWeight: FontWeight.w900,fontSize: 20.0))
)
]
)
),
)
);
}
}
在上面的代码中我们使用了ListView这个组件，它可以沿一个方向线性排布所有子组件。我么就利用这个特性进行个人信息页面进行了简单展示，在ListView的children中我们定义了几个子组件，包括图像、姓名、地址、电话展示。运行结果如下：
2. 商城会员中心
首先我们在我们在index页面，定义了底部导航的四个导航按钮。
final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.search), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.shopping_cart), title: Text('购物车')),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled), title: Text('我的')),
];
通过点击右下角我的导航按钮我们就可以进入个人中心页面，如下图：
下面我对于这个页面布局进行介绍，在这个页面我们大体分为三部分：
1) 顶部的个人头像和昵称。我们使用了Column线性布局进行了水平排布，布局中包括了两个子组件Container，用来存放图片和昵称，代码如下：
Widget _topHeader() {
return Container(
width: ScreenUtil().setWidth(750),
padding: EdgeInsets.all(20),
color: Colors.red,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 19),
child: ClipOval(
child: Image.network(
"https://storage.360buyimg.com/i.imageUpload/6a645f3534666431346463366566316531353630353135363938313030_mid.jpg"),
),
),
Container(
margin: EdgeInsets.only(top: 9),
child: Text(
"小团子",
style: TextStyle(
fontSize: ScreenUtil().setSp(19), color: Colors.black),
),
)
],
),
);
}
2）中间的订单信息页面。我们使用了Row布局对于订单的不同状态进行了水平排布，同样子组件用的是Container。代码如下：
Widget _orderType() {
return Container(
margin: EdgeInsets.only(top: 5),
width: ScreenUtil().setWidth(750),
height: ScreenUtil().setHeight(150),
padding: EdgeInsets.only(top: 19),
color: Colors.white,
child: Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(80),
child: Column(
children: <Widget>[
Icon(
Icons.library_books,
size: 19,
),
Text("我的订单")
],
),
),
Container(
width: ScreenUtil().setWidth(80),
child: Column(
children: <Widget>[
Icon(
Icons.payment,
size: 19,
),
Text("待付款")
],
),
),
Container(
width: ScreenUtil().setWidth(80),
child: Column(
children: <Widget>[
Icon(
Icons.card_travel,
size: 19,
),
Text("待收货")
],
),
),
Container(
width: ScreenUtil().setWidth(80),
child: Column(
children: <Widget>[
Icon(
Icons.strikethrough_s,
size: 19,
),
Text("退换/售后")
],
),
),
Container(
width: ScreenUtil().setWidth(80),
child: Column(
children: <Widget>[
Icon(
Icons.content_paste,
size: 19,
),
Text("待评价")
],
),
)
],
),
);
}
3）个人其他信息。我们使用的是Column对于其他信息进行横向排布，因为这些信息都比较一直，所以我们进行了一层封装定义了一个模块_myListTitle（）用来生成column中的子组件，代码如下：
Widget _actionList() {
return Container(
margin: EdgeInsets.only(top: 3),
child: Column(
children: <Widget>[
_myListTitle('收货地址管理'),
_myListTitle('账户与安全'),
_myListTitle('优惠券'),
_myListTitle('联系客服'),
_myListTitle('关于我们'),
],
),
);
}
Widget _myListTitle(String title) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border(bottom: BorderSide(width: 1, color: Colors.black12))),
child: ListTile(
leading: Icon(Icons.blur_on),
title: Text(title),
trailing: Icon(Icons.chevron_right),
),
);
}
- 点赞
- 收藏
- 关注作者
评论（0）