From 35fb5ec75286366a1edde523c92e5331c2d4ef0e Mon Sep 17 00:00:00 2001 From: nyne Date: Sat, 26 Oct 2024 23:09:55 +0800 Subject: [PATCH] improve ui --- lib/components/navigation_bar.dart | 226 ++++++++++++++++------------- 1 file changed, 123 insertions(+), 103 deletions(-) diff --git a/lib/components/navigation_bar.dart b/lib/components/navigation_bar.dart index 3f65a5a..5620505 100644 --- a/lib/components/navigation_bar.dart +++ b/lib/components/navigation_bar.dart @@ -23,15 +23,14 @@ class PaneActionEntry { } class NaviPane extends StatefulWidget { - const NaviPane( - {required this.paneItems, - required this.paneActions, - required this.pageBuilder, - this.initialPage = 0, - this.onPageChange, - required this.observer, - required this.navigatorKey, - super.key}); + const NaviPane({required this.paneItems, + required this.paneActions, + required this.pageBuilder, + this.initialPage = 0, + this.onPageChange, + required this.observer, + required this.navigatorKey, + super.key}); final List paneItems; @@ -76,14 +75,17 @@ class _NaviPaneState extends State static const _kTopBarHeight = 48.0; double get bottomBarHeight => - _kBottomBarHeight + MediaQuery.of(context).padding.bottom; + _kBottomBarHeight + MediaQuery + .of(context) + .padding + .bottom; void onNavigatorStateChange() { onRebuild(context); } void updatePage(int index) { - if(widget.observer.routes.length > 1) { + if (widget.observer.routes.length > 1) { widget.navigatorKey.currentState!.popUntil((route) => route.isFirst); } setState(() { @@ -112,7 +114,10 @@ class _NaviPaneState extends State } double targetFormContext(BuildContext context) { - var width = MediaQuery.of(context).size.width; + var width = MediaQuery + .of(context) + .size + .width; double target = 0; if (width > changePoint) { target = 2; @@ -181,13 +186,14 @@ class _NaviPaneState extends State return Navigator( observers: [widget.observer], key: widget.navigatorKey, - onGenerateRoute: (settings) => AppPageRoute( - preventRebuild: false, - isRootRoute: true, - builder: (context) { - return _NaviMainView(state: this); - }, - ), + onGenerateRoute: (settings) => + AppPageRoute( + preventRebuild: false, + isRootRoute: true, + builder: (context) { + return _NaviMainView(state: this); + }, + ), ); } @@ -224,38 +230,39 @@ class _NaviPaneState extends State Widget buildBottom() { return Material( - textStyle: Theme.of(context).textTheme.labelSmall, + textStyle: Theme + .of(context) + .textTheme + .labelSmall, elevation: 0, child: Container( - height: _kBottomBarHeight + MediaQuery.of(context).padding.bottom, + height: _kBottomBarHeight, decoration: BoxDecoration( border: Border( top: BorderSide( - color: Theme.of(context).colorScheme.outlineVariant, + color: Theme + .of(context) + .colorScheme + .outlineVariant, width: 1, ), ), ), - child: Padding( - padding: EdgeInsets.only( - bottom: MediaQuery.of(context).padding.bottom, - ), - child: Row( - children: List.generate( - widget.paneItems.length, - (index) { - return Expanded( - child: _SingleBottomNaviWidget( - enabled: currentPage == index, - entry: widget.paneItems[index], - onTap: () { - updatePage(index); - }, - key: ValueKey(index), - ), - ); - }, - ), + child: Row( + children: List.generate( + widget.paneItems.length, + (index) { + return Expanded( + child: _SingleBottomNaviWidget( + enabled: currentPage == index, + entry: widget.paneItems[index], + onTap: () { + updatePage(index); + }, + key: ValueKey(index), + ), + ); + }, ), ), ), @@ -274,7 +281,10 @@ class _NaviPaneState extends State decoration: BoxDecoration( border: Border( right: BorderSide( - color: Theme.of(context).colorScheme.outlineVariant, + color: Theme + .of(context) + .colorScheme + .outlineVariant, width: 1, ), ), @@ -288,27 +298,32 @@ class _NaviPaneState extends State child: Column( children: [ const SizedBox(height: 16), - SizedBox(height: MediaQuery.of(context).padding.top), + SizedBox(height: MediaQuery + .of(context) + .padding + .top), ...List.generate( widget.paneItems.length, - (index) => _SideNaviWidget( - enabled: currentPage == index, - entry: widget.paneItems[index], - showTitle: value == 3, - onTap: () { - updatePage(index); - }, - key: ValueKey(index), - ), + (index) => + _SideNaviWidget( + enabled: currentPage == index, + entry: widget.paneItems[index], + showTitle: value == 3, + onTap: () { + updatePage(index); + }, + key: ValueKey(index), + ), ), const Spacer(), ...List.generate( widget.paneActions.length, - (index) => _PaneActionWidget( - entry: widget.paneActions[index], - showTitle: value == 3, - key: ValueKey(index + widget.paneItems.length), - ), + (index) => + _PaneActionWidget( + entry: widget.paneActions[index], + showTitle: value == 3, + key: ValueKey(index + widget.paneItems.length), + ), ), const SizedBox( height: 16, @@ -325,12 +340,11 @@ class _NaviPaneState extends State } class _SideNaviWidget extends StatefulWidget { - const _SideNaviWidget( - {required this.enabled, - required this.entry, - required this.onTap, - required this.showTitle, - super.key}); + const _SideNaviWidget({required this.enabled, + required this.entry, + required this.onTap, + required this.showTitle, + super.key}); final bool enabled; @@ -349,9 +363,11 @@ class _SideNaviWidgetState extends State<_SideNaviWidget> { @override Widget build(BuildContext context) { - final colorScheme = Theme.of(context).colorScheme; + final colorScheme = Theme + .of(context) + .colorScheme; final icon = - Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon); + Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon); return MouseRegion( cursor: SystemMouseCursors.click, onEnter: (details) => setState(() => isHovering = true), @@ -369,23 +385,23 @@ class _SideNaviWidgetState extends State<_SideNaviWidget> { color: widget.enabled ? colorScheme.primaryContainer : isHovering - ? colorScheme.surfaceContainerHigh - : null, + ? colorScheme.surfaceContainerHigh + : null, borderRadius: BorderRadius.circular(8), ), child: widget.showTitle ? Row( - children: [ - icon, - const SizedBox( - width: 12, - ), - Text(widget.entry.label) - ], - ) + children: [ + icon, + const SizedBox( + width: 12, + ), + Text(widget.entry.label) + ], + ) : Center( - child: icon, - )), + child: icon, + )), ), ); } @@ -408,7 +424,9 @@ class _PaneActionWidgetState extends State<_PaneActionWidget> { @override Widget build(BuildContext context) { - final colorScheme = Theme.of(context).colorScheme; + final colorScheme = Theme + .of(context) + .colorScheme; final icon = Icon(widget.entry.icon); return MouseRegion( cursor: SystemMouseCursors.click, @@ -428,28 +446,27 @@ class _PaneActionWidgetState extends State<_PaneActionWidget> { borderRadius: BorderRadius.circular(8)), child: widget.showTitle ? Row( - children: [ - icon, - const SizedBox( - width: 12, - ), - Text(widget.entry.label) - ], - ) + children: [ + icon, + const SizedBox( + width: 12, + ), + Text(widget.entry.label) + ], + ) : Center( - child: icon, - )), + child: icon, + )), ), ); } } class _SingleBottomNaviWidget extends StatefulWidget { - const _SingleBottomNaviWidget( - {required this.enabled, - required this.entry, - required this.onTap, - super.key}); + const _SingleBottomNaviWidget({required this.enabled, + required this.entry, + required this.onTap, + super.key}); final bool enabled; @@ -517,9 +534,11 @@ class _SingleBottomNaviWidgetState extends State<_SingleBottomNaviWidget> Widget buildContent() { final value = controller.value; - final colorScheme = Theme.of(context).colorScheme; + final colorScheme = Theme + .of(context) + .colorScheme; final icon = - Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon); + Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon); return Center( child: Container( width: 64, @@ -620,12 +639,12 @@ class _NaviPopScope extends StatelessWidget { Widget res = App.isIOS ? child : PopScope( - canPop: App.isAndroid ? false : true, - onPopInvokedWithResult: (value, result) { - action(); - }, - child: child, - ); + canPop: App.isAndroid ? false : true, + onPopInvokedWithResult: (value, result) { + action(); + }, + child: child, + ); if (popGesture) { res = GestureDetector( onPanStart: (details) { @@ -684,7 +703,8 @@ class _NaviMainViewState extends State<_NaviMainView> { ), ), ), - if (shouldShowAppBar) state.buildBottom().paddingBottom(context.padding.bottom), + if (shouldShowAppBar) state.buildBottom().paddingBottom( + context.padding.bottom), ], ); }