style(account): 保持账号入口首屏可用
This commit is contained in:
1 parent
6fce24d9ec
commit
7151bc9d8b
2 files changed
+110
-57
No files matched your search
@@ -9,6 +9,9 @@ import 'account_devices_page.dart';
|
|||||||
import 'account_export_page.dart';
|
import 'account_export_page.dart';
|
||||||
import 'account_profile_page.dart';
|
import 'account_profile_page.dart';
|
||||||
|
|
||||||
|
const _accountCardHeight = 48.0;
|
||||||
|
const _accountTitleWidth = 64.0;
|
||||||
|
|
||||||
/// 我的页账号入口卡;只在登录态由父页面展示。
|
/// 我的页账号入口卡;只在登录态由父页面展示。
|
||||||
class AccountEntryCard extends StatelessWidget {
|
class AccountEntryCard extends StatelessWidget {
|
||||||
const AccountEntryCard({super.key});
|
const AccountEntryCard({super.key});
|
||||||
@@ -21,54 +24,67 @@ class AccountEntryCard extends StatelessWidget {
|
|||||||
color: AppColors.card,
|
color: AppColors.card,
|
||||||
borderRadius: BorderRadius.circular(16),
|
borderRadius: BorderRadius.circular(16),
|
||||||
clipBehavior: Clip.antiAlias,
|
clipBehavior: Clip.antiAlias,
|
||||||
child: Column(
|
child: SizedBox(
|
||||||
children: [
|
height: _accountCardHeight,
|
||||||
Padding(
|
child: Row(
|
||||||
padding: const EdgeInsets.fromLTRB(16, 14, 16, 8),
|
children: [
|
||||||
child: Align(
|
SizedBox(
|
||||||
alignment: Alignment.centerLeft,
|
width: _accountTitleWidth,
|
||||||
child: Text(
|
child: Padding(
|
||||||
l10n.accountCenter,
|
padding: const EdgeInsets.only(left: 12),
|
||||||
style: const TextStyle(
|
child: Text(
|
||||||
fontSize: 16,
|
l10n.accountCenter,
|
||||||
fontWeight: FontWeight.w800,
|
style: const TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: FontWeight.w800,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
const VerticalDivider(
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
width: 1,
|
||||||
_entry(
|
color: AppColors.outlineVariantDark,
|
||||||
context,
|
),
|
||||||
key: const Key('mine-account-profile'),
|
Expanded(
|
||||||
icon: Icons.person_outline_rounded,
|
child: Row(
|
||||||
title: l10n.accountProfile,
|
children: [
|
||||||
page: const AccountProfilePage(),
|
_entry(
|
||||||
),
|
context,
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
key: const Key('mine-account-profile'),
|
||||||
_entry(
|
icon: Icons.person_outline_rounded,
|
||||||
context,
|
title: l10n.accountProfile,
|
||||||
key: const Key('mine-account-devices'),
|
page: const AccountProfilePage(),
|
||||||
icon: Icons.devices_other_rounded,
|
divider: true,
|
||||||
title: l10n.accountDevices,
|
),
|
||||||
page: const AccountDevicesPage(),
|
_entry(
|
||||||
),
|
context,
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
key: const Key('mine-account-devices'),
|
||||||
_entry(
|
icon: Icons.devices_other_rounded,
|
||||||
context,
|
title: l10n.accountDevices,
|
||||||
key: const Key('mine-account-export'),
|
page: const AccountDevicesPage(),
|
||||||
icon: Icons.file_download_outlined,
|
divider: true,
|
||||||
title: l10n.accountDataExport,
|
),
|
||||||
page: const AccountExportPage(),
|
_entry(
|
||||||
),
|
context,
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
key: const Key('mine-account-export'),
|
||||||
_entry(
|
icon: Icons.file_download_outlined,
|
||||||
context,
|
title: l10n.accountDataExport,
|
||||||
key: const Key('mine-account-deactivate'),
|
page: const AccountExportPage(),
|
||||||
icon: Icons.person_remove_outlined,
|
divider: true,
|
||||||
title: l10n.accountDeactivate,
|
),
|
||||||
page: const AccountDeactivatePage(),
|
_entry(
|
||||||
),
|
context,
|
||||||
],
|
key: const Key('mine-account-deactivate'),
|
||||||
|
icon: Icons.person_remove_outlined,
|
||||||
|
title: l10n.accountDeactivate,
|
||||||
|
page: const AccountDeactivatePage(),
|
||||||
|
divider: false,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -79,15 +95,40 @@ class AccountEntryCard extends StatelessWidget {
|
|||||||
required IconData icon,
|
required IconData icon,
|
||||||
required String title,
|
required String title,
|
||||||
required Widget page,
|
required Widget page,
|
||||||
|
required bool divider,
|
||||||
}) {
|
}) {
|
||||||
return ListTile(
|
return Expanded(
|
||||||
key: key,
|
child: Row(
|
||||||
leading: Icon(icon, color: AppColors.blueSoft),
|
children: [
|
||||||
title: Text(title),
|
Expanded(
|
||||||
trailing: const Icon(Icons.chevron_right_rounded),
|
child: InkWell(
|
||||||
onTap: () => Navigator.of(
|
key: key,
|
||||||
context,
|
onTap: () => Navigator.of(
|
||||||
).push<void>(MaterialPageRoute(builder: (_) => page)),
|
context,
|
||||||
|
).push<void>(MaterialPageRoute(builder: (_) => page)),
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
Icon(icon, color: AppColors.blueSoft, size: 16),
|
||||||
|
const SizedBox(height: 2),
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
maxLines: 2,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: const TextStyle(fontSize: 9.5, height: 1.05),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (divider)
|
||||||
|
const VerticalDivider(
|
||||||
|
width: 1,
|
||||||
|
color: AppColors.outlineVariantDark,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -200,14 +200,14 @@ class _MyPageState extends State<MyPage> {
|
|||||||
List<Widget> _accountPage(AppLocalizations l10n) => [
|
List<Widget> _accountPage(AppLocalizations l10n) => [
|
||||||
if (widget.signedIn) _signedInRow(l10n) else _guestRow(l10n),
|
if (widget.signedIn) _signedInRow(l10n) else _guestRow(l10n),
|
||||||
if (widget.signedIn) ...[
|
if (widget.signedIn) ...[
|
||||||
const SizedBox(height: 18),
|
const SizedBox(height: 8),
|
||||||
_wallet(l10n),
|
_wallet(l10n),
|
||||||
const SizedBox(height: 14),
|
const SizedBox(height: 4),
|
||||||
const AccountEntryCard(),
|
const AccountEntryCard(),
|
||||||
],
|
],
|
||||||
const SizedBox(height: 14),
|
const SizedBox(height: 4),
|
||||||
_menuCard(l10n),
|
_menuCard(l10n),
|
||||||
const SizedBox(height: 18),
|
const SizedBox(height: 8),
|
||||||
Text(
|
Text(
|
||||||
l10n.preferencesHeading,
|
l10n.preferencesHeading,
|
||||||
style: const TextStyle(
|
style: const TextStyle(
|
||||||
@@ -415,6 +415,8 @@ class _MyPageState extends State<MyPage> {
|
|||||||
child: Column(
|
child: Column(
|
||||||
children: [
|
children: [
|
||||||
ListTile(
|
ListTile(
|
||||||
|
dense: true,
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
leading: const Icon(
|
leading: const Icon(
|
||||||
Icons.card_giftcard_rounded,
|
Icons.card_giftcard_rounded,
|
||||||
color: AppColors.blueSoft,
|
color: AppColors.blueSoft,
|
||||||
@@ -428,6 +430,8 @@ class _MyPageState extends State<MyPage> {
|
|||||||
),
|
),
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
||||||
ListTile(
|
ListTile(
|
||||||
|
dense: true,
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
key: const Key('mine-notices'),
|
key: const Key('mine-notices'),
|
||||||
leading: const Icon(
|
leading: const Icon(
|
||||||
Icons.notifications_none_rounded,
|
Icons.notifications_none_rounded,
|
||||||
@@ -441,6 +445,8 @@ class _MyPageState extends State<MyPage> {
|
|||||||
),
|
),
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
||||||
ListTile(
|
ListTile(
|
||||||
|
dense: true,
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
leading: const Icon(
|
leading: const Icon(
|
||||||
Icons.history_rounded,
|
Icons.history_rounded,
|
||||||
color: AppColors.blueSoft,
|
color: AppColors.blueSoft,
|
||||||
@@ -453,6 +459,8 @@ class _MyPageState extends State<MyPage> {
|
|||||||
),
|
),
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
||||||
ListTile(
|
ListTile(
|
||||||
|
dense: true,
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
leading: const Icon(
|
leading: const Icon(
|
||||||
Icons.favorite_outline_rounded,
|
Icons.favorite_outline_rounded,
|
||||||
color: AppColors.blueSoft,
|
color: AppColors.blueSoft,
|
||||||
@@ -465,6 +473,8 @@ class _MyPageState extends State<MyPage> {
|
|||||||
),
|
),
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
||||||
ListTile(
|
ListTile(
|
||||||
|
dense: true,
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
leading: const Icon(
|
leading: const Icon(
|
||||||
Icons.download_outlined,
|
Icons.download_outlined,
|
||||||
color: AppColors.blueSoft,
|
color: AppColors.blueSoft,
|
||||||
@@ -477,6 +487,8 @@ class _MyPageState extends State<MyPage> {
|
|||||||
),
|
),
|
||||||
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
const Divider(height: 1, color: AppColors.outlineVariantDark),
|
||||||
ListTile(
|
ListTile(
|
||||||
|
dense: true,
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
leading: const Icon(
|
leading: const Icon(
|
||||||
Icons.settings_rounded,
|
Icons.settings_rounded,
|
||||||
color: AppColors.blueSoft,
|
color: AppColors.blueSoft,
|
||||||
|
|||||||
Reference in new issue
Block a user