Flutter仿京东商城APP实战用户中心基础布局

用户中心界面

pages/tabs/user/user.dart

import 'package:flutter/material.dart';
import 'package:jdshop/utils/zdp_screen.dart';
import 'package:provider/provider.dart';import '../../../store/counter_store.dart';class UserPage extends StatefulWidget {const UserPage({super.key});@overrideUserPageState createState() => UserPageState();
}class UserPageState extends State<UserPage> with AutomaticKeepAliveClientMixin {@overridebool get wantKeepAlive => true;@overrideWidget build(BuildContext context) {super.build(context);// 计数器CounterStore countStore = Provider.of<CounterStore>(context);return ListView(children: [ListTile(leading: Icon(Icons.assessment, color: Colors.red),title: Text("全部订单"),),Divider(),ListTile(leading: Icon(Icons.payment, color: Colors.green),title: Text("待付款"),),Divider(),ListTile(leading: Icon(Icons.local_car_wash, color: Colors.orange),title: Text("待收货"),),Container(height: ZdpScreen.height(20),width: ZdpScreen.screenWidth(),color: Color.fromRGBO(242, 242, 242, 0.9),),ListTile(leading: Icon(Icons.favorite, color: Colors.lightGreen),title: Text("我的收藏"),),Divider(),ListTile(leading: Icon(Icons.people, color: Colors.black54),title: Text("在线客服"),),Divider(),],);}
}

效果预览

在这里插入图片描述

顶部面板

核心代码:

Container(height: ZdpScreen.height(150),width: ZdpScreen.screenWidth(),// 背景图片decoration: BoxDecoration(image: DecorationImage(image: AssetImage("assets/images/user_bg.jpg"),fit: BoxFit.cover,),),child: Row(children: [// 圆角图片Container(margin: EdgeInsets.only(left: 10, right: 10),child: ClipOval(child: Image.asset("assets/images/user.png",fit: BoxFit.cover,width: ZdpScreen.width(60),height: ZdpScreen.height(50),),),),// 登录注册Expanded(flex: 1,child: Text("登录 注册",style: TextStyle(color: Colors.white,),),)],),
),

完整代码:

import 'package:flutter/material.dart';
import 'package:jdshop/utils/zdp_screen.dart';
import 'package:provider/provider.dart';import '../../../store/counter_store.dart';class UserPage extends StatefulWidget {const UserPage({super.key});@overrideUserPageState createState() => UserPageState();
}class UserPageState extends State<UserPage> with AutomaticKeepAliveClientMixin {@overridebool get wantKeepAlive => true;// 是否已经登录bool isLogin = true;@overrideWidget build(BuildContext context) {super.build(context);return ListView(children: [// 顶部面板Container(height: ZdpScreen.height(150),width: ZdpScreen.screenWidth(),// 背景图片decoration: BoxDecoration(image: DecorationImage(image: AssetImage("assets/images/user_bg.jpg"),fit: BoxFit.cover,),),child: Row(children: [// 圆角图片Container(margin: EdgeInsets.only(left: 10, right: 10),child: ClipOval(child: Image.asset("assets/images/user.png",fit: BoxFit.cover,width: ZdpScreen.width(60),height: ZdpScreen.height(50),),),),// 登录注册Expanded(flex: 1,child: Text("登录 注册",style: TextStyle(color: Colors.white,),),)],),),// 菜单列表ListTile(leading: Icon(Icons.assessment, color: Colors.red),title: Text("全部订单"),),Divider(),ListTile(leading: Icon(Icons.payment, color: Colors.green),title: Text("待付款"),),Divider(),ListTile(leading: Icon(Icons.local_car_wash, color: Colors.orange),title: Text("待收货"),),Container(height: ZdpScreen.height(20),width: ZdpScreen.screenWidth(),color: Color.fromRGBO(242, 242, 242, 0.9),),ListTile(leading: Icon(Icons.favorite, color: Colors.lightGreen),title: Text("我的收藏"),),Divider(),ListTile(leading: Icon(Icons.people, color: Colors.black54),title: Text("在线客服"),),Divider(),],);}
}