feat(mobile-app): 优化创建钱包页面UI
- 添加背景图片 onboarding_bg.jpg - 移除重复的logo和标题(背景图已包含) - 添加白色半透明卡片背景提高文字可读性 - 调整颜色主题为绿色系匹配背景 - 修改认种确认弹窗标题为"一旦确认,无法更改" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
ebb0b85ab5
commit
bbd6f2ee38
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
|
|
@ -257,31 +257,28 @@ class _OnboardingPageState extends ConsumerState<OnboardingPage> {
|
|||
body: Container(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
// 渐变背景 - 从浅米色到金黄色
|
||||
// 背景图片
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Color(0xFFFFF5E6), // 浅米色
|
||||
Color(0xFFFFE4B5), // 金黄色
|
||||
],
|
||||
image: DecorationImage(
|
||||
image: AssetImage('assets/images/backgrounds/onboarding_bg.jpg'),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 15),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
|
||||
child: Column(
|
||||
children: [
|
||||
// 顶部 Logo 和标题区域
|
||||
// 顶部返回按钮
|
||||
_buildHeader(),
|
||||
const SizedBox(height: 48),
|
||||
// 留出空间给背景图的 logo
|
||||
const Spacer(flex: 3),
|
||||
// 创建账户说明区域
|
||||
_buildDescription(),
|
||||
const Spacer(),
|
||||
const SizedBox(height: 16),
|
||||
// 底部操作区域
|
||||
_buildActionSection(),
|
||||
const SizedBox(height: 9),
|
||||
const Spacer(flex: 1),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
@ -297,136 +294,122 @@ class _OnboardingPageState extends ConsumerState<OnboardingPage> {
|
|||
context.go(RoutePaths.guide, extra: 4);
|
||||
}
|
||||
|
||||
/// 构建顶部 Logo 和标题
|
||||
/// 构建顶部返回按钮
|
||||
Widget _buildHeader() {
|
||||
return Column(
|
||||
children: [
|
||||
// 返回按钮行 - 仅在账号未创建时显示
|
||||
SizedBox(
|
||||
height: 32,
|
||||
child: (!_isLoading && !_isAccountCreated)
|
||||
? Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: GestureDetector(
|
||||
onTap: _goBackToGuide,
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.arrow_back_ios,
|
||||
size: 18,
|
||||
color: Color(0xFF5D4037),
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
'返回',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color(0xFF5D4037),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
return SizedBox(
|
||||
height: 32,
|
||||
child: (!_isLoading && !_isAccountCreated)
|
||||
? Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: GestureDetector(
|
||||
onTap: _goBackToGuide,
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.9),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
// Logo 容器
|
||||
Container(
|
||||
width: 100,
|
||||
height: 80,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.05),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 2),
|
||||
child: const Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.arrow_back_ios,
|
||||
size: 16,
|
||||
color: Color(0xFF2E7D32),
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
'返回',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xFF2E7D32),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'ap',
|
||||
style: TextStyle(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xFF2E7D32), // 绿色
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
// 应用标题
|
||||
const Text(
|
||||
'榴莲皇后',
|
||||
style: TextStyle(
|
||||
fontSize: 32,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w700,
|
||||
height: 1.25,
|
||||
color: Color(0xFF5D4037), // 深棕色
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
);
|
||||
}
|
||||
|
||||
/// 构建创建账户说明区域
|
||||
Widget _buildDescription() {
|
||||
return Column(
|
||||
children: [
|
||||
// 标题
|
||||
const Text(
|
||||
'创建账户',
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w700,
|
||||
height: 1.25,
|
||||
letterSpacing: -0.33,
|
||||
color: Color(0xFF5D4037),
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.95),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.1),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
// 说明文字
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20),
|
||||
child: Text(
|
||||
],
|
||||
),
|
||||
child: const Column(
|
||||
children: [
|
||||
// 标题
|
||||
Text(
|
||||
'创建账户',
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w700,
|
||||
height: 1.25,
|
||||
letterSpacing: -0.33,
|
||||
color: Color(0xFF2E7D32),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
// 说明文字
|
||||
Text(
|
||||
'我们将为你创建三个链的钱包地址:KAVA / DST / BSC,同时生成唯一序列号用于推荐与权益。',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontSize: 15,
|
||||
fontFamily: 'Inter',
|
||||
height: 1.5,
|
||||
color: Color(0xFF5D4037),
|
||||
color: Color(0xFF424242),
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 构建底部操作区域
|
||||
Widget _buildActionSection() {
|
||||
return Column(
|
||||
children: [
|
||||
// 生成钱包按钮
|
||||
_buildCreateButton(),
|
||||
const SizedBox(height: 20),
|
||||
// 用户协议勾选
|
||||
_buildAgreementCheckbox(),
|
||||
const SizedBox(height: 24),
|
||||
// 导入助记词链接
|
||||
_buildImportLink(),
|
||||
],
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.95),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.1),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// 生成钱包按钮
|
||||
_buildCreateButton(),
|
||||
const SizedBox(height: 16),
|
||||
// 用户协议勾选
|
||||
_buildAgreementCheckbox(),
|
||||
const SizedBox(height: 16),
|
||||
// 导入助记词链接
|
||||
_buildImportLink(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -532,8 +515,8 @@ class _OnboardingPageState extends ConsumerState<OnboardingPage> {
|
|||
_isAgreed = value ?? false;
|
||||
});
|
||||
},
|
||||
activeColor: const Color(0xFFD4AF37),
|
||||
side: const BorderSide(color: Color(0xFF5D4037)),
|
||||
activeColor: const Color(0xFF2E7D32),
|
||||
side: const BorderSide(color: Color(0xFF757575)),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
|
|
@ -549,18 +532,18 @@ class _OnboardingPageState extends ConsumerState<OnboardingPage> {
|
|||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w500,
|
||||
height: 1.43,
|
||||
color: Color(0xFF5D4037),
|
||||
color: Color(0xFF424242),
|
||||
),
|
||||
children: [
|
||||
const TextSpan(text: '我已阅读并同意 '),
|
||||
TextSpan(
|
||||
text: '《用户协议》',
|
||||
style: const TextStyle(color: Color(0xFFD4AF37)),
|
||||
style: const TextStyle(color: Color(0xFF2E7D32)),
|
||||
recognizer: TapGestureRecognizer()..onTap = _showUserAgreement,
|
||||
),
|
||||
TextSpan(
|
||||
text: '《隐私政策》',
|
||||
style: const TextStyle(color: Color(0xFFD4AF37)),
|
||||
style: const TextStyle(color: Color(0xFF2E7D32)),
|
||||
recognizer: TapGestureRecognizer()..onTap = _showPrivacyPolicy,
|
||||
),
|
||||
],
|
||||
|
|
@ -580,9 +563,9 @@ class _OnboardingPageState extends ConsumerState<OnboardingPage> {
|
|||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
height: 1.43,
|
||||
color: Color(0xFFD4AF37),
|
||||
color: Color(0xFF2E7D32),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ class _PlantingConfirmDialogState extends State<PlantingConfirmDialog> {
|
|||
/// 构建标题
|
||||
Widget _buildTitle() {
|
||||
return const Text(
|
||||
'最后确认!不可修改!',
|
||||
'一旦确认,无法更改',
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontFamily: 'Inter',
|
||||
|
|
|
|||
Loading…
Reference in New Issue