AiKeyboard2025/lib/module/profile/profile_page.dart

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/data/bean/keyboard_info.dart';
import 'package:keyboard/module/profile/profile_controller.dart';
import 'package:keyboard/utils/intimacy_util.dart';

import '../../resource/assets.gen.dart';
import '../../resource/string.gen.dart';
import '../../router/app_pages.dart';
import '../../utils/styles.dart';
import '../../widget/avatar/avatar_image_widget.dart';

class ProfilePage extends BasePage<ProfileController> {
  const ProfilePage({super.key});

  static Future<dynamic> start() async {
    return await Get.toNamed(RoutePath.profile);
  }

  @override
  Color backgroundColor() {
    return const Color(0xFFF6F5FA);
  }

  @override
  immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildTitle(),

              SizedBox(height: 16.w),

              Expanded(
                child: Obx(() {
                  final list = controller.customKeyboardInfoList;
                  return CustomScrollView(
                    physics: const ScrollPhysics(),
                    slivers: [
                      SliverToBoxAdapter(child: Container(height: 10.h)),
                      if (list.isEmpty)
                        SliverToBoxAdapter(
                          child: _buildKeyboardListItem(
                            keyboardInfo: null,
                            isChosen: false,
                            hasKeyboard: false,
                          ),
                        )
                      else
                        SliverList(
                          delegate: SliverChildBuilderDelegate((
                            context,
                            index,
                          ) {
                            return Obx(() {
                              final keyboardInfo = list[index];
                              final isChosen =
                                  keyboardInfo.id ==
                                  controller.currentCustomKeyboardInfo.id;
                              return _buildKeyboardListItem(
                                keyboardInfo: keyboardInfo,
                                isChosen: isChosen,
                                hasKeyboard: true,
                              );
                            });
                          }, childCount: list.length),
                        ),

                      SliverToBoxAdapter(child: SizedBox(height: 110.h)),
                    ],
                  );
                }),
              ),
            ],
          ),
        ),
        Positioned(
          bottom: 20.h,
          left: 16.w,
          right: 16.w,
          child: InkWell(
            onTap: () {
              controller.clickSaveButton();
            },
            child: Container(
              height: 48.h,
              alignment: Alignment.center,
              decoration: Styles.getActivateButtonDecoration(31.r),
              child: Text(
                StringName.profileSave,
                style: Styles.getTextStyleWhiteW500(16.sp),
              ),
            ),
          ),
        ),
        // 背景图片
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
      ],
    );
  }

  // 爱心
  _buildLoveIndex(int? intimacy) {
    return Container(
      width: 87.w,
      height: 71.h,
      decoration: BoxDecoration(
        image: DecorationImage(image: Assets.images.bgProfileLove.provider()),
      ),
      child: Column(
        children: [
          SizedBox(height: 45.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                padding: EdgeInsets.only(left: 8.w, right: 8.w),

                decoration: ShapeDecoration(
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                    side: BorderSide(
                      width: 1.18.w,
                      color: const Color(0xFFFD649B),
                    ),
                    borderRadius: BorderRadius.circular(12.36.r),
                  ),
                ),
                child:
                    (intimacy != null)
                        ? Center(
                          child: Text(
                            IntimacyUtil.getIntimacyName(intimacy),
                            style: TextStyle(
                              color: const Color(0xFFFF73E0),
                              fontSize: 11.sp,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        )
                        : Center(
                          child: Text(
                            "?",
                            style: TextStyle(
                              color: const Color(0xFFFF73E0),
                              fontSize: 11.sp,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  _buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 12.h, left: 16.w, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: () => controller.clickBack(),
            child: Assets.images.iconMineBackArrow.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
          Text(
            StringName.profileList,
            style: Styles.getTextStyleBlack204W500(17.sp),
          ),
          GestureDetector(
            onTap: () => controller.clickAddButton(),
            child: Assets.images.iconProfileAdd.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildKeyboardListItem({
    KeyboardInfo? keyboardInfo,
    bool isChosen = false,
    required bool hasKeyboard,
  }) {
    final String title = hasKeyboard ? '我&${keyboardInfo?.name ?? ""}' : '我';
    final int? intimacy = hasKeyboard ? keyboardInfo?.intimacy : null;
    final String? keyboardAvatar = hasKeyboard ? keyboardInfo?.imageUrl : null;
    final int gender = hasKeyboard ? (keyboardInfo?.gender ?? 1) : 1;

    return GestureDetector(
      onTap:
          hasKeyboard
              ? () => controller.clickOnChangeKeyboard(keyboardInfo!)
              : null,
      child: Container(
        height: 164.h,
        margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 12.h),
        decoration:
            isChosen
                ? ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment(0.02, 0.04),
                    end: Alignment(1.00, 1.00),
                    colors: [const Color(0xFFE7A0FF), const Color(0xFFAB8FFA)],
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.r),
                  ),
                  shadows: [
                    BoxShadow(
                      color: Color(0x1CD6C1FF),
                      blurRadius: 4.r,
                      offset: Offset(0, 4.r),
                      spreadRadius: 0,
                    ),
                  ],
                )
                : ShapeDecoration(
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20.r),
                  ),
                ),
        child: Stack(
          children: [
            if (isChosen)
              Opacity(
                opacity: 0.1,
                child: Assets.images.bgProfileSelected.image(),
              ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 16.w, right: 16.w, top: 10.h),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: TextStyle(
                          color:
                              isChosen ? Colors.white : const Color(0xFF202020),
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                      const Spacer(),
                      isChosen ?Text(StringName.profileSelect,style: TextStyle(
                        color: Colors.white,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                      ),):SizedBox(),
                      SizedBox(width: 4.w),
                      isChosen?Assets.images.iconProfileKeyboardSelect.image(
                        width: 17.w,
                        height: 17.w,
                      ):SizedBox(),
                    ],
                  ),
                ),
                SizedBox(height: 10.h),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w),
                  child: Divider(
                    height: 1.h,
                    color: isChosen ? Colors.transparent : Color(0xffF5F5F5),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin:
                        isChosen
                            ? EdgeInsets.symmetric(
                              horizontal: 4.w,
                              vertical: 4.w,
                            )
                            : EdgeInsets.zero,
                    decoration: ShapeDecoration(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.r),
                      ),
                      shadows: [
                        BoxShadow(
                          color: Color(0x1CD6C1FF),
                          blurRadius: 4.r,
                          offset: Offset(0, 4),
                          spreadRadius: 0,
                        ),
                      ],
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        _buildProfileAvatar(
                          imageUrl: controller.userInfo?.imageUrl,
                          gender: controller.userGender,
                          onTap: () => controller.clickAvatar(isUser: true),
                          genderIconAlignment: Alignment.topRight,
                        ),
                        SizedBox(width: 8.w),
                        _buildLoveIndex(intimacy),
                        SizedBox(width: 8.w),
                        hasKeyboard
                            ? _buildProfileAvatar(
                              imageUrl: keyboardAvatar,
                              gender: gender,
                              onTap:
                                  () => controller.clickAvatar(
                                    isUser: false,
                                    keyboardInfo: keyboardInfo,
                                  ),
                              genderIconAlignment: Alignment.topLeft,
                            )
                            : _buildKeyboardListEmptyAvatar(
                              onTap: () => controller.clickAddButton(),
                            ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  // 头像
  Widget _buildProfileAvatar({
    required String? imageUrl,
    required int gender,
    required VoidCallback? onTap,

    Alignment genderIconAlignment = Alignment.topRight,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Container(
            margin: EdgeInsets.only(bottom: 10.h),
            width: 78.w,
            height: 78.w,

            child: CircleAvatarWidget(
              image: Assets.images.iconKeyboardDefaultAvatar.provider(),
              imageUrl: imageUrl,
              size: 78.w,
              borderWidth: 0.r,
              borderColor: Colors.transparent,
              placeholder: (_, __) {
                return const CupertinoActivityIndicator();
              },
            ),
          ),

          Positioned(
            top: 0,
            left: genderIconAlignment == Alignment.topLeft ? 0 : null,
            right: genderIconAlignment == Alignment.topRight ? 0 : null,
            child:
                gender == 1
                    ? Assets.images.iconProfileMale.image(
                      width: 20.w,
                      height: 20.w,
                    )
                    : Assets.images.iconProfileFemale.image(
                      width: 20.w,
                      height: 20.w,
                    ),
          ),
          Positioned(
            child: Container(
              width: 58.w,
              height: 28.h,
              decoration: ShapeDecoration(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                  side: BorderSide(width: 1, color: const Color(0x6BE1E1E1)),
                  borderRadius: BorderRadius.circular(50.r),
                ),
                shadows: [
                  BoxShadow(
                    color: Color(0x56E6D9FF),
                    blurRadius: 4,
                    offset: Offset(0, 3),
                    spreadRadius: 0,
                  ),
                ],
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Assets.images.iconProfileEdit.image(
                    width: 12.w,
                    height: 12.w,
                  ),
                  Text(
                    StringName.profileEdit,
                    style: Styles.getTextStyleBlack178W500(11.sp),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  //   没有Keyboard时
  _buildKeyboardListEmptyAvatar({required VoidCallback? onTap}) {
    return GestureDetector(
      onTap: onTap,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Container(
            margin: EdgeInsets.only(bottom: 10.h),
            width: 78.w,
            height: 78.w,
            child: DottedBorder(
              color: const Color(0xFFA595C8),
              strokeWidth: 1.0.w,
              borderType: BorderType.Circle,
              child: Container(
                width: 78.w,
                height: 78.w,
                margin: EdgeInsets.only(bottom: 10.h),
                alignment: Alignment.center,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Assets.images.iconProfilePlus.image(
                      width: 22.5.w,
                      height: 22.5.w,
                      fit: BoxFit.cover,
                    ),
                    SizedBox(height: 2.h),
                    Text(
                      StringName.profileAdd,
                      style: TextStyle(
                        color: const Color(0xB2755BAB),
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}