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

效果预览:

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

相关推荐
开心工作室_kaic10 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
数据猎手小k21 分钟前
AndroidLab:一个系统化的Android代理框架,包含操作环境和可复现的基准测试,支持大型语言模型和多模态模型。
android·人工智能·机器学习·语言模型
有梦想的刺儿29 分钟前
webWorker基本用法
前端·javascript·vue.js
你的小101 小时前
JavaWeb项目-----博客系统
android
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
风和先行1 小时前
adb 命令查看设备存储占用情况
android·adb
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel