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

+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),
),
],
);
}
}