diff --git a/lib/pages/account/account_entry_card.dart b/lib/pages/account/account_entry_card.dart index 48f9b38..65c687e 100644 --- a/lib/pages/account/account_entry_card.dart +++ b/lib/pages/account/account_entry_card.dart @@ -9,6 +9,9 @@ import 'account_devices_page.dart'; import 'account_export_page.dart'; import 'account_profile_page.dart'; +const _accountCardHeight = 48.0; +const _accountTitleWidth = 64.0; + /// 我的页账号入口卡;只在登录态由父页面展示。 class AccountEntryCard extends StatelessWidget { const AccountEntryCard({super.key}); @@ -21,54 +24,67 @@ class AccountEntryCard extends StatelessWidget { color: AppColors.card, borderRadius: BorderRadius.circular(16), clipBehavior: Clip.antiAlias, - child: Column( - children: [ - Padding( - padding: const EdgeInsets.fromLTRB(16, 14, 16, 8), - child: Align( - alignment: Alignment.centerLeft, - child: Text( - l10n.accountCenter, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.w800, + child: SizedBox( + height: _accountCardHeight, + child: Row( + children: [ + SizedBox( + width: _accountTitleWidth, + child: Padding( + padding: const EdgeInsets.only(left: 12), + child: Text( + l10n.accountCenter, + style: const TextStyle( + fontSize: 12, + fontWeight: FontWeight.w800, + ), ), ), ), - ), - const Divider(height: 1, color: AppColors.outlineVariantDark), - _entry( - context, - key: const Key('mine-account-profile'), - icon: Icons.person_outline_rounded, - title: l10n.accountProfile, - page: const AccountProfilePage(), - ), - const Divider(height: 1, color: AppColors.outlineVariantDark), - _entry( - context, - key: const Key('mine-account-devices'), - icon: Icons.devices_other_rounded, - title: l10n.accountDevices, - page: const AccountDevicesPage(), - ), - const Divider(height: 1, color: AppColors.outlineVariantDark), - _entry( - context, - key: const Key('mine-account-export'), - icon: Icons.file_download_outlined, - title: l10n.accountDataExport, - page: const AccountExportPage(), - ), - const Divider(height: 1, color: AppColors.outlineVariantDark), - _entry( - context, - key: const Key('mine-account-deactivate'), - icon: Icons.person_remove_outlined, - title: l10n.accountDeactivate, - page: const AccountDeactivatePage(), - ), - ], + const VerticalDivider( + width: 1, + color: AppColors.outlineVariantDark, + ), + Expanded( + child: Row( + children: [ + _entry( + context, + key: const Key('mine-account-profile'), + icon: Icons.person_outline_rounded, + title: l10n.accountProfile, + page: const AccountProfilePage(), + divider: true, + ), + _entry( + context, + key: const Key('mine-account-devices'), + icon: Icons.devices_other_rounded, + title: l10n.accountDevices, + page: const AccountDevicesPage(), + divider: true, + ), + _entry( + context, + key: const Key('mine-account-export'), + icon: Icons.file_download_outlined, + title: l10n.accountDataExport, + page: const AccountExportPage(), + divider: true, + ), + _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 String title, required Widget page, + required bool divider, }) { - return ListTile( - key: key, - leading: Icon(icon, color: AppColors.blueSoft), - title: Text(title), - trailing: const Icon(Icons.chevron_right_rounded), - onTap: () => Navigator.of( - context, - ).push(MaterialPageRoute(builder: (_) => page)), + return Expanded( + child: Row( + children: [ + Expanded( + child: InkWell( + key: key, + onTap: () => Navigator.of( + context, + ).push(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, + ), + ], + ), ); } } diff --git a/lib/pages/mine/mine_view.dart b/lib/pages/mine/mine_view.dart index 9056524..e4d794b 100644 --- a/lib/pages/mine/mine_view.dart +++ b/lib/pages/mine/mine_view.dart @@ -200,14 +200,14 @@ class _MyPageState extends State { List _accountPage(AppLocalizations l10n) => [ if (widget.signedIn) _signedInRow(l10n) else _guestRow(l10n), if (widget.signedIn) ...[ - const SizedBox(height: 18), + const SizedBox(height: 8), _wallet(l10n), - const SizedBox(height: 14), + const SizedBox(height: 4), const AccountEntryCard(), ], - const SizedBox(height: 14), + const SizedBox(height: 4), _menuCard(l10n), - const SizedBox(height: 18), + const SizedBox(height: 8), Text( l10n.preferencesHeading, style: const TextStyle( @@ -415,6 +415,8 @@ class _MyPageState extends State { child: Column( children: [ ListTile( + dense: true, + visualDensity: VisualDensity.compact, leading: const Icon( Icons.card_giftcard_rounded, color: AppColors.blueSoft, @@ -428,6 +430,8 @@ class _MyPageState extends State { ), const Divider(height: 1, color: AppColors.outlineVariantDark), ListTile( + dense: true, + visualDensity: VisualDensity.compact, key: const Key('mine-notices'), leading: const Icon( Icons.notifications_none_rounded, @@ -441,6 +445,8 @@ class _MyPageState extends State { ), const Divider(height: 1, color: AppColors.outlineVariantDark), ListTile( + dense: true, + visualDensity: VisualDensity.compact, leading: const Icon( Icons.history_rounded, color: AppColors.blueSoft, @@ -453,6 +459,8 @@ class _MyPageState extends State { ), const Divider(height: 1, color: AppColors.outlineVariantDark), ListTile( + dense: true, + visualDensity: VisualDensity.compact, leading: const Icon( Icons.favorite_outline_rounded, color: AppColors.blueSoft, @@ -465,6 +473,8 @@ class _MyPageState extends State { ), const Divider(height: 1, color: AppColors.outlineVariantDark), ListTile( + dense: true, + visualDensity: VisualDensity.compact, leading: const Icon( Icons.download_outlined, color: AppColors.blueSoft, @@ -477,6 +487,8 @@ class _MyPageState extends State { ), const Divider(height: 1, color: AppColors.outlineVariantDark), ListTile( + dense: true, + visualDensity: VisualDensity.compact, leading: const Icon( Icons.settings_rounded, color: AppColors.blueSoft,