import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:get/get.dart'; import 'package:keyboard/base/base_view.dart'; import 'package:keyboard/data/bean/character_info.dart'; import 'package:keyboard/resource/string.gen.dart'; import '../../resource/assets.gen.dart'; import '../../utils/styles.dart'; import '../../widget/pargress_bar.dart'; import 'keyboard_controller.dart'; class KeyBoardView extends BaseView { const KeyBoardView({super.key}); @override Widget buildBody(BuildContext context) { return Stack( children: [ IgnorePointer(child: Assets.images.bgKeyboard.image(width: 360.w)), SafeArea( child: Column( children: [ _buildTitle(), Expanded( child: SingleChildScrollView( physics: NeverScrollableScrollPhysics(), child: Column( children: [ _buildAvatarCard(), SizedBox(height: 10.h), _buildLoveIndexCard(), SizedBox(height: 10.h), Container( padding: EdgeInsets.only(top: 16.h), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r), ), ), child: Column( children: [ _buildHitCard(), SizedBox(height: 10.h), _buildKeyboardSettings(), _buildBanner(), ], ), ), ], ), ), ), ], ), ), ], ); } // 顶部标题栏 Widget _buildTitle() { return Container( padding: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 12.h), color: Colors.transparent, child: Row( children: [ Assets.images.iconKeyboardTitle.image( width: 110.w, height: 26.h, fit: BoxFit.cover, ), const Spacer(), GestureDetector( onTap: controller.clickVip, child: Container( padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 6.w), decoration: ShapeDecoration( color: Colors.white.withAlpha(204), shape: RoundedRectangleBorder( side: BorderSide(width: 1, color: Colors.white), borderRadius: BorderRadius.circular(13.r), ), ), child: Row( children: [ Assets.images.iconKeyboardVipLogo.image( width: 12.w, height: 12.w, ), const SizedBox(width: 2), Text( StringName.keyboardMemberOpen, style: TextStyle( color: Color(0xFFA85600), fontSize: 12, fontWeight: FontWeight.w400, ), ), Icon( Icons.chevron_right, color: Color(0xFFA85600), size: 11.r, ), ], ), ), ), ], ), ); } // 用户头像卡片 Widget _buildAvatarCard() { return Obx(() { return Container( padding: EdgeInsets.symmetric(horizontal: 22.w), decoration: BoxDecoration(color: Colors.transparent), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ _buildUserAvatar(true), const SizedBox(width: 16), _buildLovePercentage(), const SizedBox(width: 16), _buildUserAvatar(false), ], ), ], ), ); }); } // 爱情指数卡片 Widget _buildLoveIndexCard() { return Stack( clipBehavior: Clip.none, children: [ Positioned( left: 0, right: 0, top: -12.h, child: Assets.images.iconKeyboardTriangle.image( color: Colors.white, width: 20.w, height: 16.h, ), ), Container( margin: EdgeInsets.symmetric(horizontal: 22.w), padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 5.w), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(12.r), ), child: Row( children: [ Assets.images.iconKeyboardLoveIndex.image( width: 72.w, height: 23.h, ), SizedBox(width: 10.w), Expanded( child: Container( padding: EdgeInsets.symmetric( horizontal: 10.w, vertical: 8.h, ), decoration: BoxDecoration( color: Color(0xFFFAFAFC), borderRadius: BorderRadius.circular(12.r), ), child: Row( children: [ Expanded( child: Column( children: [ ProgressBar( title: "激情", value: controller.appearancePercentage, color: Color(0xFFFF637D), ), SizedBox(height: 6.h), ProgressBar( title: "默契", value: controller.appearancePercentage, color: Color(0xFFF5E8FC), ), ], ), ), SizedBox(width: 21.w), Expanded( child: Column( children: [ ProgressBar( title: "羁绊", value: controller.appearancePercentage, color: Color(0xFFFFC954), ), SizedBox(height: 6.h), ProgressBar( title: "承诺", value: controller.appearancePercentage, color: Color(0xFF6382FF), ), ], ), ), ], ), ), ), ], ), ), ], ); } // 用户头像 Widget _buildUserAvatar(bool isUser) { return Column( children: [ Stack( alignment: Alignment.bottomCenter, children: [ Column( children: [ Container( width: 98.r, height: 98.r, decoration: ShapeDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(50.r), ), ), child: CachedNetworkImage( imageUrl: isUser ? controller.homeInfo?.imageUrl ?? "" : controller.homeInfo?.targetImageUrl ?? "", placeholder: (_, __) => const CupertinoActivityIndicator(), errorWidget: (context, url, error) => CircleAvatar( backgroundImage: Assets.images.iconKeyboardDefaultAvatar .provider(), ), imageBuilder: (context, imageProvider) => Container( decoration: ShapeDecoration( shape: RoundedRectangleBorder( side: BorderSide(width: 2.r, color: Colors.white), borderRadius: BorderRadius.circular(50.r), ), ), child: CircleAvatar(backgroundImage: imageProvider), ), ), ), SizedBox(height: 10.h), ], ), Container( padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 4.w), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(22.r), ), child: isUser ? Text( controller.homeInfo?.name ?? StringName.keyboardNoLogin, style: Styles.getTextStyleBlack204W400(14.sp), ) : Text( controller.homeInfo?.targetName ?? StringName.keyboardAdd, style: controller.homeInfo?.targetName != null ? Styles.getTextStyleBlack204W400(14.sp) : TextStyle( color: const Color(0xFF8651FF), fontSize: 14.sp, fontWeight: FontWeight.w500, ), ), ), ], ), const SizedBox(height: 4), // Text(name, style: const TextStyle(fontSize: 12)), ], ); } // 爱情百分比 Widget _buildLovePercentage() { return Container( decoration: BoxDecoration(shape: BoxShape.circle), child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), decoration: ShapeDecoration( color: Colors.white.withValues(alpha: 153), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(17.r), ), ), child: Row( children: [ Assets.images.iconKeyboardLoveLogo.image( width: 18.w, height: 18.w, ), Text( controller.homeInfo?.intimacyName ?? "", textAlign: TextAlign.center, style: Styles.getTextStyleBlack153W400(14.sp), ), ], ), ), SizedBox(height: 7.h), SizedBox( width: 88.w, height: 72.h, child: Stack( children: [ Assets.images.bgKeyboardLove.image(width: 88.w, height: 72.h), Positioned.fill( child: Center( child: Obx( () => Text.rich( TextSpan( children: [ TextSpan( text: controller.homeInfo?.intimacy != null ? controller.homeInfo?.intimacy .toString() : "?", style: TextStyle( color: Colors.white, fontSize: 33.sp, fontWeight: FontWeight.w700, shadows: [ Shadow( offset: Offset(0, 1), blurRadius: 4.r, color: const Color( 0xFFFF6BD3, ).withValues(alpha: 0.63), ), ], ), ), TextSpan( text: '%', style: TextStyle( color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.w700, shadows: [ Shadow( offset: Offset(0, 1), blurRadius: 4.r, color: const Color( 0xFFFF6BD3, ).withValues(alpha: 0.63), ), ], ), ), ], ), ), ), ), ), ], ), ), ], ), ), ); } // 爆款玩法区域 Widget _buildHitCard() { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: 16.r), child: Assets.images.iconKeyboardHitPlay.image( width: 83.w, height: 22.h, fit: BoxFit.cover, ), ), const SizedBox(height: 5), Padding( padding: EdgeInsets.only(left: 12.w, right: 12.w), child: Row( children: [ GestureDetector( onTap: controller.clickEasyReply, child: Container( width: 166.w, height: 155.h, decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.black.withValues(alpha: 0.10), offset: Offset(0, 6), blurRadius: 20, spreadRadius: 0, ), ], ), child: Assets.images.bgKeyboardEasyReply.image( fit: BoxFit.fill, ), ), ), SizedBox(width: 11.w), Column( children: [ _buildFeatureCard( bg: Assets.images.bgKeyboardIntimacyAnalyze.image(), title: Assets.images.iconKeyboardInitmacyTitle.image( width: 80.w, height: 19.h, ), subtitle: StringName.keyboardIntimacySubtitle, logo: Assets.images.iconKeyboardIntimacyLogo.image( width: 69.w, height: 68.w, fit: BoxFit.cover, ), onTap: controller.clickIntimacyAnalyze, ), SizedBox(height: 10.h), _buildFeatureCard( bg: Assets.images.bgKeyboardScreenshotReply.image(), title: Assets.images.iconKeyboardScreenshotTitle.image( width: 72.w, height: 22.h, ), subtitle: StringName.keyboardScreenshotSubtitle, logo: Assets.images.iconKeyboardScreenshotLogo.image( width: 67.w, height: 59.w, fit: BoxFit.cover, ), onTap: controller.clickScreenshotReply, ), ], ), ], ), ), ], ); } // 功能卡片 Widget _buildFeatureCard({ required Widget bg, required Widget title, required String subtitle, required Widget logo, required VoidCallback onTap, }) { return GestureDetector( onTap: onTap, child: SizedBox( height: 73.h, width: 159.w, child: Stack( clipBehavior: Clip.none, children: [ Positioned( child: Container( decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.black.withValues(alpha: 0.10), offset: Offset(0, 6), blurRadius: 20, spreadRadius: 0, ), ], ), child: bg, ), ), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( padding: EdgeInsets.only(top: 12.h, left: 8.w), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ title, Padding( padding: EdgeInsets.only(left: 2.w), child: Text( subtitle, style: TextStyle( color: Colors.black.withAlpha(128), fontSize: 10.sp, fontWeight: FontWeight.w400, ), ), ), ], ), ), ], ), Positioned(top: -5.h, right: 5.w, child: logo), ], ), ), ); } // 当前键盘人设信息 Widget _buildKeyboardSettings() { return GestureDetector( onTap: controller.clickGoKeyboardManage, child: Container( margin: EdgeInsets.symmetric(horizontal: 16.w), padding: EdgeInsets.only( left: 11.w, right: 11.w, top: 15.h, bottom: 15.h, ), decoration: ShapeDecoration( color: Colors.white, shape: RoundedRectangleBorder( side: BorderSide(width: 2, color: const Color(0xFFF5F4F9)), borderRadius: BorderRadius.only( topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r), bottomLeft: Radius.circular(16.r), bottomRight: Radius.circular(16.r), ), ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Assets.images.iconKeyboardCurrentCharacterTitle.image( width: 90.w, height: 20.h, fit: BoxFit.cover, ), Row( children: [ Text( StringName.keyboardGoToManage, style: TextStyle( color: Colors.black.withAlpha(102), fontSize: 12.sp, fontWeight: FontWeight.w500, ), ), Assets.images.iconKeyboardCurrentGo.image( width: 7.w, height: 7.w, ), ], ), ], ), const SizedBox(height: 16), Obx(() { final list = controller.homeInfo?.characterInfos; if (list == null) { return const Center(child: CircularProgressIndicator()); } final showList = list.take(9).toList(); return SizedBox( height: 32.h * 3 + 8.h * 2, // 三行高度 + 两个间距 child: GridView.builder( padding: EdgeInsets.zero, physics: const NeverScrollableScrollPhysics(), // 禁止滑动 itemCount: showList.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, // 每行3个 mainAxisSpacing: 8.h, crossAxisSpacing: 8.w, childAspectRatio: 96.w / 32.h, // 控制宽高比 ), itemBuilder: (context, index) { return _buildCharacterItem(showList[index]); }, ), ); }), ], ), ), ); } // 人设标签 Widget _buildCharacterItem(CharacterInfo character) { return Container( alignment: Alignment.center, decoration: ShapeDecoration( color: const Color(0xFFF5F4F9), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(31.r), ), ), child: Text( '${character.emoji}${character.name}', style: Styles.getTextStyleBlack204W400(12.sp), maxLines: 1, overflow: TextOverflow.fade, ), ); } // 活动banner Widget _buildBanner() { return Container( width: 328.w, height: 64.h, child: Stack( children: [ Assets.images.iconKeyboardBanner.image(width: 328.w, height: 64.h), Positioned( right: 53.w, bottom: 18.h, child: Obx( () => Text( controller.formattedTime, style: TextStyle( color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.w500, ), ), ), ), ], ), ); } @override Color backgroundColor() { return const Color(0xFFF5F5F5); } }