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

效果预览:

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

相关推荐
ღ_233313 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
xiaohe060114 分钟前
🔒 JavaScript 不是单线程吗?怎么还能上“锁”?!
javascript·github
摸着石头过河的石头17 分钟前
JavaScript继承的多种实现方式详解
前端·javascript
Ashley的成长之路22 分钟前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
衿璃22 分钟前
Flutter应用架构设计的思考
前端·flutter
tq10861 小时前
学习Hilt注解
android
软件技术NINI2 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
2501_915921432 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
日日行不惧千万里2 小时前
2025最新仿默往 IM 即时通讯系统源码(PC + Web + iOS + Android)完整版发布!
android·ios
歪歪1002 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架