opt: use NavigationRail on landscape page

This commit is contained in:
bggRGjQaUbCoE
2024-09-25 18:36:40 +08:00
parent e7af9b0ab3
commit 6138dfa51f

View File

@@ -111,7 +111,11 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
_homeController.flag = true; _homeController.flag = true;
} }
}, },
child: Scaffold( child: LayoutBuilder(
builder: (_, constriants) {
bool isPortait = constriants.maxHeight > constriants.maxWidth;
return Scaffold(
extendBody: true, extendBody: true,
body: Row( body: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@@ -156,13 +160,44 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
)) ))
.toList(), .toList(),
trailing: SizedBox(height: 0.1 * context.height), trailing: SizedBox(height: 0.1 * context.height),
)), ),
], ),
] else if (!isPortait)
NavigationRail(
onDestinationSelected: (value) => setIndex(value),
selectedIndex: _mainController.selectedIndex,
destinations: _mainController.navigationBars
.map(
(e) => NavigationRailDestination(
icon: Badge(
label: _mainController.dynamicBadgeType ==
DynamicBadgeMode.number
? Text(e['count'].toString())
: null,
padding: const EdgeInsets.fromLTRB(6, 0, 6, 0),
isLabelVisible:
_mainController.dynamicBadgeType !=
DynamicBadgeMode.hidden &&
e['count'] > 0,
child: e['icon'],
backgroundColor:
Theme.of(context).colorScheme.primary,
textColor: Theme.of(context)
.colorScheme
.onInverseSurface,
),
selectedIcon: e['selectIcon'],
label: Text(e['label']),
),
)
.toList(),
),
VerticalDivider( VerticalDivider(
width: 1, width: 1,
indent: MediaQuery.of(context).padding.top, indent: MediaQuery.of(context).padding.top,
endIndent: MediaQuery.of(context).padding.bottom, endIndent: MediaQuery.of(context).padding.bottom,
color: Theme.of(context).colorScheme.outline.withOpacity(0.06), color:
Theme.of(context).colorScheme.outline.withOpacity(0.06),
), ),
Expanded( Expanded(
child: PageView( child: PageView(
@@ -178,7 +213,7 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
if (useSideBar) SizedBox(width: context.width * 0.004), if (useSideBar) SizedBox(width: context.width * 0.004),
], ],
), ),
bottomNavigationBar: useSideBar bottomNavigationBar: useSideBar || !isPortait
? null ? null
: StreamBuilder( : StreamBuilder(
stream: _mainController.hideTabBar stream: _mainController.hideTabBar
@@ -192,34 +227,37 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
offset: Offset(0, snapshot.data ? 0 : 1), offset: Offset(0, snapshot.data ? 0 : 1),
child: enableMYBar child: enableMYBar
? NavigationBar( ? NavigationBar(
onDestinationSelected: (value) => setIndex(value), onDestinationSelected: (value) =>
setIndex(value),
selectedIndex: _mainController.selectedIndex, selectedIndex: _mainController.selectedIndex,
destinations: <Widget>[ destinations: _mainController.navigationBars
..._mainController.navigationBars.map((e) { .map(
return NavigationDestination( (e) => NavigationDestination(
icon: Badge( icon: Badge(
label: _mainController.dynamicBadgeType == label: _mainController
.dynamicBadgeType ==
DynamicBadgeMode.number DynamicBadgeMode.number
? Text(e['count'].toString()) ? Text(e['count'].toString())
: null, : null,
padding: padding: const EdgeInsets.fromLTRB(
const EdgeInsets.fromLTRB(6, 0, 6, 0), 6, 0, 6, 0),
isLabelVisible: isLabelVisible: _mainController
_mainController.dynamicBadgeType != .dynamicBadgeType !=
DynamicBadgeMode.hidden && DynamicBadgeMode.hidden &&
e['count'] > 0, e['count'] > 0,
child: e['icon'], child: e['icon'],
backgroundColor: backgroundColor: Theme.of(context)
Theme.of(context).colorScheme.primary, .colorScheme
.primary,
textColor: Theme.of(context) textColor: Theme.of(context)
.colorScheme .colorScheme
.onInverseSurface, .onInverseSurface,
), ),
selectedIcon: e['selectIcon'], selectedIcon: e['selectIcon'],
label: e['label'], label: e['label'],
); ),
}).toList(), )
], .toList(),
) )
: BottomNavigationBar( : BottomNavigationBar(
currentIndex: _mainController.selectedIndex, currentIndex: _mainController.selectedIndex,
@@ -232,36 +270,40 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
// Theme.of(context).colorScheme.primary, // 选中项的颜色 // Theme.of(context).colorScheme.primary, // 选中项的颜色
// unselectedItemColor: // unselectedItemColor:
// Theme.of(context).colorScheme.onSurface, // Theme.of(context).colorScheme.onSurface,
items: [ items: _mainController.navigationBars
..._mainController.navigationBars.map((e) { .map(
return BottomNavigationBarItem( (e) => BottomNavigationBarItem(
icon: Badge( icon: Badge(
label: _mainController.dynamicBadgeType == label: _mainController
.dynamicBadgeType ==
DynamicBadgeMode.number DynamicBadgeMode.number
? Text(e['count'].toString()) ? Text(e['count'].toString())
: null, : null,
padding: padding: const EdgeInsets.fromLTRB(
const EdgeInsets.fromLTRB(6, 0, 6, 0), 6, 0, 6, 0),
isLabelVisible: isLabelVisible: _mainController
_mainController.dynamicBadgeType != .dynamicBadgeType !=
DynamicBadgeMode.hidden && DynamicBadgeMode.hidden &&
e['count'] > 0, e['count'] > 0,
child: e['icon'], child: e['icon'],
backgroundColor: backgroundColor: Theme.of(context)
Theme.of(context).colorScheme.primary, .colorScheme
.primary,
textColor: Theme.of(context) textColor: Theme.of(context)
.colorScheme .colorScheme
.onInverseSurface, .onInverseSurface,
), ),
activeIcon: e['selectIcon'], activeIcon: e['selectIcon'],
label: e['label'], label: e['label'],
); ),
}).toList(), )
], .toList(),
), ),
); );
}, },
), ),
);
},
), ),
); );
} }