|
|
@@ -1,7 +1,12 @@
|
|
|
+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:keyboard/base/base_view.dart';
|
|
|
-
|
|
|
+import 'package:get/get.dart';
|
|
|
+import 'package:keyboard/resource/string.gen.dart';
|
|
|
+import '../../resource/assets.gen.dart';
|
|
|
+import '../../utils/styles.dart';
|
|
|
import 'keyboard_controller.dart';
|
|
|
|
|
|
class KeyBoardView extends BaseView<KeyBoardController> {
|
|
|
@@ -9,8 +14,689 @@ class KeyBoardView extends BaseView<KeyBoardController> {
|
|
|
|
|
|
@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(
|
|
|
+ child: Column(
|
|
|
+ children: [
|
|
|
+ _buildAvatarCard(),
|
|
|
+ _buildLoveIndexCard(),
|
|
|
+ _buildPopularFeatures(),
|
|
|
+ _buildKeyboardSettings(),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 顶部标题栏
|
|
|
+ Widget _buildTitle() {
|
|
|
return Container(
|
|
|
- child: Text("KeyBoardView", style: TextStyle(color: Colors.black)),
|
|
|
+ padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
|
|
|
+ color: Colors.transparent,
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Assets.images.iconKeyboardTitle.image(
|
|
|
+ width: 110.w,
|
|
|
+ height: 26.h,
|
|
|
+ fit: BoxFit.cover,
|
|
|
+ ),
|
|
|
+ const Spacer(),
|
|
|
+ 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),
|
|
|
+ controller.hasPartner.value
|
|
|
+ ? _buildUserAvatar(false)
|
|
|
+ : _buildAddPartnerButton(),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ SizedBox(height: 10.h),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 爱情指数卡片
|
|
|
+ Widget _buildLoveIndexCard() {
|
|
|
+ return Container(
|
|
|
+ margin: EdgeInsets.symmetric(horizontal: 16.w),
|
|
|
+ padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 11.w),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Colors.white,
|
|
|
+ borderRadius: BorderRadius.circular(12.r),
|
|
|
+ ),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Assets.images.iconKeyboardLoveIndex.image(width: 72.w, height: 23.h),
|
|
|
+ Container(
|
|
|
+ height: 42.w,
|
|
|
+ width: 215.h,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Color(0xFFFAFAFC),
|
|
|
+ borderRadius: BorderRadius.circular(12.r),
|
|
|
+ ),
|
|
|
+ child: Column(
|
|
|
+ children: [
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ Expanded(
|
|
|
+ child: ProgressBar(
|
|
|
+ title: "爱情",
|
|
|
+ value: controller.appearancePercentage,
|
|
|
+ color: Colors.pink.shade100,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Expanded(
|
|
|
+ child: ProgressBar(
|
|
|
+ title: "爱情",
|
|
|
+ value: controller.appearancePercentage,
|
|
|
+ color: Colors.pink.shade100,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ Expanded(
|
|
|
+ child: ProgressBar(
|
|
|
+ title: "爱情",
|
|
|
+ value: controller.appearancePercentage,
|
|
|
+ color: Colors.pink.shade100,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Expanded(
|
|
|
+ child: ProgressBar(
|
|
|
+ title: "爱情",
|
|
|
+ value: controller.appearancePercentage,
|
|
|
+ color: Colors.pink.shade100,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 用户头像
|
|
|
+ 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.userInfo.value?.imageUrl ?? ""
|
|
|
+ : controller.currentChooseKeyboard.value.avatar ??
|
|
|
+ "",
|
|
|
+ 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: Text(
|
|
|
+ isUser
|
|
|
+ ? controller.userInfo.value?.name ?? ""
|
|
|
+ : controller.currentChooseKeyboard.value.name ?? "",
|
|
|
+ style: Styles.getTextStyleBlack204W400(14.sp),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ 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(
|
|
|
+ '追爱ing',
|
|
|
+ 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.hasPartner.value &&
|
|
|
+ controller
|
|
|
+ .currentChooseKeyboard
|
|
|
+ .value
|
|
|
+ .intimacy !=
|
|
|
+ null
|
|
|
+ ? controller
|
|
|
+ .currentChooseKeyboard
|
|
|
+ .value
|
|
|
+ .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 _buildAddPartnerButton() {
|
|
|
+ return Column(
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ width: 60,
|
|
|
+ height: 60,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ shape: BoxShape.circle,
|
|
|
+ color: Colors.grey.shade200,
|
|
|
+ ),
|
|
|
+ child: const Icon(Icons.mail_outline, color: Colors.grey),
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 4),
|
|
|
+ const Text('添加', style: TextStyle(fontSize: 12)),
|
|
|
+ ],
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 爱情指数项目
|
|
|
+ Widget _buildLoveIndexItems() {
|
|
|
+ return Obx(() {
|
|
|
+ return Row(
|
|
|
+ children: [
|
|
|
+ _buildIndexItem(
|
|
|
+ '心情',
|
|
|
+ controller.moodPercentage.value,
|
|
|
+ Colors.pink.shade100,
|
|
|
+ ),
|
|
|
+ _buildIndexItem(
|
|
|
+ '颜值',
|
|
|
+ controller.appearancePercentage.value,
|
|
|
+ Colors.purple.shade100,
|
|
|
+ ),
|
|
|
+ _buildIndexItem(
|
|
|
+ '财富',
|
|
|
+ controller.wealthPercentage.value,
|
|
|
+ Colors.amber.shade100,
|
|
|
+ ),
|
|
|
+ _buildIndexItem(
|
|
|
+ '洁净',
|
|
|
+ controller.cleanlinessPercentage.value,
|
|
|
+ Colors.blue.shade100,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 单个指数项
|
|
|
+ Widget _buildIndexItem(String title, int percentage, Color color) {
|
|
|
+ return Expanded(
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ Text(title, style: const TextStyle(fontSize: 12)),
|
|
|
+ const SizedBox(height: 4),
|
|
|
+ Stack(
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ height: 6,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Colors.grey.shade200,
|
|
|
+ borderRadius: BorderRadius.circular(3),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ FractionallySizedBox(
|
|
|
+ widthFactor: percentage / 100,
|
|
|
+ child: Container(
|
|
|
+ height: 6,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: color,
|
|
|
+ borderRadius: BorderRadius.circular(3),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 2),
|
|
|
+ Text(
|
|
|
+ '$percentage%',
|
|
|
+ style: TextStyle(fontSize: 10, color: Colors.grey.shade600),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
);
|
|
|
}
|
|
|
+
|
|
|
+ // 爆款玩法区域
|
|
|
+ Widget _buildPopularFeatures() {
|
|
|
+ return Container(
|
|
|
+ margin: const EdgeInsets.symmetric(horizontal: 16),
|
|
|
+ padding: const EdgeInsets.all(16),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Colors.white,
|
|
|
+ borderRadius: BorderRadius.circular(16),
|
|
|
+ ),
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ width: 8,
|
|
|
+ height: 8,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ shape: BoxShape.circle,
|
|
|
+ color: Colors.purple.shade200,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ const SizedBox(width: 8),
|
|
|
+ const Text(
|
|
|
+ '爆款玩法',
|
|
|
+ style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 16),
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ _buildFeatureCard(
|
|
|
+ '追爱小键盘',
|
|
|
+ '轻松回复TA',
|
|
|
+ Colors.purple.shade50,
|
|
|
+ Icons.keyboard,
|
|
|
+ Colors.purple.shade200,
|
|
|
+ ),
|
|
|
+ const SizedBox(width: 12),
|
|
|
+ _buildFeatureCard(
|
|
|
+ '亲密度分析',
|
|
|
+ '探索人格密码',
|
|
|
+ Colors.orange.shade50,
|
|
|
+ Icons.favorite_border,
|
|
|
+ Colors.orange.shade200,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 12),
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ _buildFeatureCard(
|
|
|
+ '截图回复',
|
|
|
+ '上下文义分析',
|
|
|
+ Colors.blue.shade50,
|
|
|
+ Icons.screenshot_monitor,
|
|
|
+ Colors.blue.shade200,
|
|
|
+ ),
|
|
|
+ const SizedBox(width: 12),
|
|
|
+ _buildFeatureCard(
|
|
|
+ '截图回复',
|
|
|
+ '上下文义分析',
|
|
|
+ Colors.green.shade50,
|
|
|
+ Icons.message,
|
|
|
+ Colors.green.shade200,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 功能卡片
|
|
|
+ Widget _buildFeatureCard(
|
|
|
+ String title,
|
|
|
+ String subtitle,
|
|
|
+ Color bgColor,
|
|
|
+ IconData icon,
|
|
|
+ Color iconColor,
|
|
|
+ ) {
|
|
|
+ return Expanded(
|
|
|
+ child: Container(
|
|
|
+ padding: const EdgeInsets.all(12),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: bgColor,
|
|
|
+ borderRadius: BorderRadius.circular(12),
|
|
|
+ ),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Expanded(
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ Text(
|
|
|
+ title,
|
|
|
+ style: const TextStyle(
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 4),
|
|
|
+ Text(
|
|
|
+ subtitle,
|
|
|
+ style: TextStyle(fontSize: 12, color: Colors.grey.shade700),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ width: 40,
|
|
|
+ height: 40,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Colors.white,
|
|
|
+ borderRadius: BorderRadius.circular(8),
|
|
|
+ ),
|
|
|
+ child: Icon(icon, color: iconColor),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 键盘设置区域
|
|
|
+ Widget _buildKeyboardSettings() {
|
|
|
+ return Container(
|
|
|
+ margin: const EdgeInsets.all(16),
|
|
|
+ padding: const EdgeInsets.all(16),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Colors.white,
|
|
|
+ borderRadius: BorderRadius.circular(16),
|
|
|
+ ),
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ Row(
|
|
|
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
+ children: [
|
|
|
+ const Text(
|
|
|
+ '当前键盘人设',
|
|
|
+ style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
|
|
|
+ ),
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ const Text(
|
|
|
+ '去管理',
|
|
|
+ style: TextStyle(fontSize: 12, color: Colors.grey),
|
|
|
+ ),
|
|
|
+ Icon(
|
|
|
+ Icons.chevron_right,
|
|
|
+ size: 16,
|
|
|
+ color: Colors.grey.shade400,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 16),
|
|
|
+ Wrap(
|
|
|
+ spacing: 8,
|
|
|
+ runSpacing: 8,
|
|
|
+ children: [
|
|
|
+ _buildPersonaTag('高冷'),
|
|
|
+ _buildPersonaTag('幽默搞笑'),
|
|
|
+ _buildPersonaTag('粘心暖男'),
|
|
|
+ _buildPersonaTag('温柔体贴'),
|
|
|
+ _buildPersonaTag('阳光大男孩'),
|
|
|
+ _buildPersonaTag('都市精英'),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 人设标签
|
|
|
+ Widget _buildPersonaTag(String text) {
|
|
|
+ return Container(
|
|
|
+ padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Colors.grey.shade100,
|
|
|
+ borderRadius: BorderRadius.circular(16),
|
|
|
+ ),
|
|
|
+ child: Row(
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
+ children: [
|
|
|
+ const Icon(Icons.emoji_emotions, size: 16, color: Colors.amber),
|
|
|
+ const SizedBox(width: 4),
|
|
|
+ Text(text, style: const TextStyle(fontSize: 12)),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ @override
|
|
|
+ Color backgroundColor() {
|
|
|
+ return const Color(0xFFF5F5F5);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class ProgressBar extends StatelessWidget {
|
|
|
+ final String title;
|
|
|
+ final RxInt value; // 例如传入 50,代表 50%
|
|
|
+ final Color color;
|
|
|
+
|
|
|
+ const ProgressBar({
|
|
|
+ super.key,
|
|
|
+ required this.title,
|
|
|
+ required this.value,
|
|
|
+ required this.color,
|
|
|
+ });
|
|
|
+
|
|
|
+ @override
|
|
|
+ Widget build(BuildContext context) {
|
|
|
+ return Obx(() {
|
|
|
+ final double progress = (value.value / 100).clamp(0.0, 1.0); // 保证 0~1 范围
|
|
|
+ return Container(
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ SizedBox(width: 40, child: Text(title)),
|
|
|
+ const SizedBox(width: 8),
|
|
|
+ Expanded(
|
|
|
+ child: Stack(
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ height: 20,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: color.withOpacity(0.15), // 修正:用 withOpacity
|
|
|
+ borderRadius: BorderRadius.circular(20.r),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ FractionallySizedBox(
|
|
|
+ widthFactor: progress,
|
|
|
+ child: Container(
|
|
|
+ height: 20.h,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: color,
|
|
|
+ borderRadius: BorderRadius.circular(20.r),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Positioned.fill(
|
|
|
+ child: Center(
|
|
|
+ child: Text(
|
|
|
+ "${value.value}%",
|
|
|
+ style: const TextStyle(
|
|
|
+ color: Colors.white,
|
|
|
+ fontSize: 12,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|