style(nav): 对齐四 Tab 底栏布局规格
This commit is contained in:
1 parent
667fdc5f0a
commit
81787dc3aa
10 files changed
+103
-106
No files matched your search
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user