style(nav): 对齐四 Tab 底栏布局规格

This commit is contained in:
Zhou Weidong committed 2026-10-22 16:38:14 +08:00
1 parent 667fdc5f0a
commit 81787dc3aa
10 files changed
+103 -106

No files matched your search

+2 -3
View File
@@ -69,10 +69,9 @@ abstract final class AppColors {
/// 底部导航底色。
static const bar = ink;
/// 底部导航专用:纯黑背景、选中白、未选中灰与轻分割线。
/// 底部导航专用:纯黑背景、选中白与未选中灰。
static const navBackground = Color(0xFF000000);
static const navSelected = Color(0xFFFFFFFF);
static const navDivider = Color(0xFF1C1C1E);
/// 卡片阴影(深色几乎不用阴影)。
static const cardShadow = Color(0x00000000);
@@ -126,7 +125,7 @@ abstract final class AppColors {
static const badgeBeige = raised;
/// 导航未选中。
static const navUnselected = Color(0xFF8A8A8E);
static const navUnselected = Color(0xFF8E8E93);
/// 播放器次要文字。
static const playerMuted = Color(0xA3FFFFFF);
+3 -2
View File
@@ -37,6 +37,7 @@ abstract final class AppDimens {
static const double previewSectionTitle = 14;
static const double chipFont = 10;
static const double navLabel = 11;
static const double navLabelGap = 4;
static const double buttonHeight = 48;
static const double primaryButtonHeight = 52;
@@ -47,8 +48,8 @@ abstract final class AppDimens {
static const double tapTarget = 44;
static const double contentHeaderHeight = 46;
static const double navHeight = 68;
static const double navIcon = 24;
static const double navHeight = 56;
static const double navIcon = 26;
static const double progressHeight = 3;
static const double progressRadius = 2;
static const double progressLineHeight = 3;
+3 -16
View File
@@ -26,30 +26,17 @@ class AppBottomNavItem {
/// 四槽底部导航:纯黑背景,白色选中态,灰色未选中态。
class AppBottomNav extends StatelessWidget {
const AppBottomNav({
super.key,
required this.items,
this.backgroundColor = AppColors.navBackground,
this.barKey,
this.dark = false,
});
const AppBottomNav({super.key, required this.items, this.barKey});
final List<AppBottomNavItem> items;
final Color backgroundColor;
final Key? barKey;
final bool dark;
@override
Widget build(BuildContext context) {
final bar = Container(
key: barKey,
height: AppDimens.navHeight,
decoration: BoxDecoration(
color: dark ? AppColors.navBackground : backgroundColor,
border: const Border(
top: BorderSide(color: AppColors.navDivider, width: 0.5),
),
),
color: AppColors.navBackground,
child: Row(
children: [
for (final item in items)
@@ -99,7 +86,7 @@ class _NavDestination extends StatelessWidget {
: unselectedColor,
),
),
const SizedBox(height: 3),
const SizedBox(height: AppDimens.navLabelGap),
Text(
item.label,
maxLines: 1,
+34
View File
@@ -3,6 +3,7 @@
import 'package:flutter/material.dart';
import '../../l10n/app_localizations.dart';
import 'app_bottom_nav.dart';
/// 客户端根导航的固定顺序。
enum AppRootTab { home, recommend, following, mine }
@@ -36,3 +37,36 @@ extension AppRootTabUi on AppRootTab {
AppRootTab.mine => l10n.myTab,
};
}
/// 根导航唯一入口,确保四个主页面使用完全一致的底栏配置。
class AppRootBottomNav extends StatelessWidget {
const AppRootBottomNav({
super.key,
required this.selected,
required this.onSelected,
this.barKey,
});
final AppRootTab selected;
final ValueChanged<AppRootTab> onSelected;
final Key? barKey;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return AppBottomNav(
barKey: barKey,
items: [
for (final tab in AppRootTab.values)
AppBottomNavItem(
tabKey: tab.tabKey,
icon: tab.icon,
selectedIcon: tab.selectedIcon,
label: tab.label(l10n),
selected: tab == selected,
onTap: () => onSelected(tab),
),
],
);
}
}