用户中心界面
pages/tabs/user/user.dart
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});
@override
UserPageState createState() => UserPageState();
}
class UserPageState extends State<UserPage> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
Widget 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(),
],
);
}
}
效果预览
顶部面板
核心代码:
dart
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,
),
),
)
],
),
),
完整代码:
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});
@override
UserPageState createState() => UserPageState();
}
class UserPageState extends State<UserPage> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
// 是否已经登录
bool isLogin = true;
@override
Widget 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(),
],
);
}
}
效果预览:
完整代码或者录播课或者报名学习请私信我