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

用户中心界面

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(),
      ],
    );
  }
}

效果预览:

完整代码或者录播课或者报名学习请私信我

相关推荐
gnip18 分钟前
项目开发流程之技术调用流程
前端·javascript
答案—answer18 分钟前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型
站在巨人肩膀上的码农24 分钟前
去掉长按遥控器power键后提示关机、飞行模式的弹窗
android·安卓·rk·关机弹窗·power键·长按·飞行模式弹窗
呼啦啦--隔壁老王38 分钟前
屏幕旋转流程
android
gnip1 小时前
SSE技术介绍
前端·javascript
人生何处不修行1 小时前
实战:Android 15 (API 35) 适配 & 构建踩坑全记录
android
yinke小琪1 小时前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
用户2018792831671 小时前
gralde的《依赖契约法典》
android
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
豆苗学前端1 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试