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

效果预览:

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

相关推荐
Winston Wood3 分钟前
Perfetto学习大全
android·性能优化·perfetto
Myli_ing21 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
旭日猎鹰1 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰1 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神1 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript