dating-touchme-app/lib/pages/my_page.dart

import 'package:dating_touchme_app/router/route_paths.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {

  List<Map> infoList = [
    {"label": "我的关注", "num": 88},
    {"label": "关注我的", "num": 18988},
    {"label": "好友", "num": 8},
    {"label": "访客", "num": 357},
  ];

  List<Map> blockList = [
    {"icon": "assets/rose.png", "title": "我的玫瑰", "subTitle": "新人限时福利", "path": RouteNames.rose},
    {"icon": "assets/wallet.png", "title": "我的钱包", "subTitle": "提现无门槛", "path": ""},
    {"icon": "assets/shop.png", "title": "商城中心", "subTitle": "不定期更新商品", "path": ""},
    {"icon": "assets/cert.png", "title": "认证中心", "subTitle": "未认证", "path": ""},
  ];

  List<Map> settingList = [
    {"icon": "assets/setting.png", "title": "设置"},
    {"icon": "assets/customer.png", "title": "联系客服"},
    {"icon": "assets/mail.png", "title": "意见反馈"},
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 19.w),
      constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color.fromRGBO(248, 242, 255, 1.0), // rgba(248, 242, 255, 1)
            Color.fromRGBO(247, 247, 247, 1.0), // rgba(247, 247, 247, 1)
          ],
          stops: [0.0, 1.0],
        ),
      ),
      child: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).padding.top + 108.w,
          ),
          Container(
            width: 713.w,
            padding: EdgeInsets.only(
              left: 12.w,
              right: 10.w
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      "assets/user_avatar.png",
                      width: 120.w,
                      height: 120.w,
                    ),
                    SizedBox(width: 29.w,),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Text(
                              "用户昵称",
                              style: TextStyle(
                                fontSize: 36.w,
                                color: const Color.fromRGBO(51, 51, 51, 1),
                                fontWeight: FontWeight.w700
                              ),
                            ),
                            SizedBox(width: 17.w,),
                            Image.asset(
                              "assets/vip.png",
                              width: 88.w,
                              height: 32.w,
                            )
                          ],
                        ),
                        SizedBox(height: 23.w,),
                        Text(
                          "ID：4654654565",
                          style: TextStyle(
                            fontSize: 24.w,
                            color: const Color.fromRGBO(51, 51, 51, 1),
                            fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    )
                  ],
                ),
                InkWell(
                  onTap: (){
                    context.pushNamed(RouteNames.editInfo);
                  },
                  child: Row(
                    children: [
                      Image.asset(
                        "assets/edit.png",
                        width: 20.w,
                        height: 20.w,
                      ),
                      SizedBox(width: 8.w,),
                      Text(
                        "编辑资料",
                        style: TextStyle(
                            fontSize: 24.w,
                            color: const Color.fromRGBO(55, 57, 72, 1),
                            fontWeight: FontWeight.w500
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          SizedBox(height: 33.w,),
          Container(
            height: 114.w,
            padding: EdgeInsets.only(
              top: 22.w,
              right: 75.w,
              bottom: 17.w,
              left: 55.w
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(18.w)),
              color: Colors.white,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ...infoList.map((e){
                  return InfoItem(item: e);
                }),
              ],
            ),
          ),
          SizedBox(height: 25.w,),
          Stack(
            children: [
              Image.asset(
                "assets/vip_banner.png",
                width: 713.w,
                height: 129.w,
              ),
              Positioned(
                top: 36.w,
                right: 31.w,
                child: InkWell(
                  child: SizedBox(
                    width: 147.w,
                    height: 57.w,
                  ),
                ),
              )
            ],
          ),
          SizedBox(height: 25.w,),
          Wrap(
            spacing: 17.w,
            runSpacing: 17.w,
            children: [
              ...blockList.map((e){
                return BlockItem(item: e, showWaring: e["title"] == "认证中心", path: e["path"],);
              }),
            ],
          ),
          SizedBox(height: 25.w,),
          ...settingList.map((e){
            return SettingItem(item: e);
          }),
        ],
      ),
    );
  }
}

class InfoItem extends StatefulWidget {
  final Map item;
  const InfoItem({super.key, required this.item});

  @override
  State<InfoItem> createState() => _InfoItemState();
}

class _InfoItemState extends State<InfoItem> {
  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          Text(
            "${widget.item["num"]}",
            style: TextStyle(
              fontSize: 30.w,
              color: Colors.black,
              fontWeight: FontWeight.w700
            ),
          ),
          Text(
            widget.item["label"],
            style: TextStyle(
              fontSize: 21.w,
              color: const Color.fromRGBO(166, 166, 166, 1),
            ),
          )
        ],
      );
  }
}

class BlockItem extends StatefulWidget {
  final Map item;
  final bool showWaring;
  final String path;
  const BlockItem({super.key, required this.item, this.showWaring = false, required this.path});

  @override
  State<BlockItem> createState() => _BlockItemState();
}

class _BlockItemState extends State<BlockItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        context.pushNamed(widget.path);
      },
      child: Container(
        width: 340.w,
        height: 77.w,
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(18.w)),
            color: Colors.white
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Image.asset(
                  widget.item["icon"],
                  width: 42.w,
                  height: 42.w,
                ),
                SizedBox(width: 5.w,),
                Text(
                  widget.item["title"],
                  style: TextStyle(
                    fontSize: 25.w,
                    color: Colors.black,
                  ),
                )
              ],
            ),
            Row(
              children: [
                if(widget.showWaring) Container(
                  width: 10.w,
                  height: 10.w,
                  margin: EdgeInsets.only(right: 9.w),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10.w)),
                      color: const Color.fromRGBO(255, 87, 51, 1)
                  ),
                ),
                Text(
                  widget.item["subTitle"],
                  style: TextStyle(
                      fontSize: 18.w,
                      color: const Color.fromRGBO(166, 166, 166, 1)
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

class SettingItem extends StatefulWidget {
  final Map item;
  const SettingItem({super.key, required this.item});

  @override
  State<SettingItem> createState() => _SettingItemState();
}

class _SettingItemState extends State<SettingItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 96.w,
      padding: EdgeInsets.symmetric(horizontal: 32.w),
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Image.asset(
                widget.item["icon"],
                width: 48.w,
                height: 48.w,
              ),
              SizedBox(width: 8.w,),
              Text(
                widget.item["title"],
                style: TextStyle(
                  fontSize: 28.w,
                  fontWeight: FontWeight.w500,
                  color: Colors.black
                ),
              )
            ],
          ),
          Image.asset(
            "assets/arrow.png",
            width: 8.w,
            height: 16.w,
          )
        ],
      ),
    );
  }
}