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

用户中心界面

pages/tabs/user/user.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(),
      ],
    );
  }
}

效果预览

顶部面板

核心代码:

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,
          ),
        ),
      )
    ],
  ),
),

完整代码:

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

效果预览:

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