improve ui

This commit is contained in:
nyne
2024-10-26 23:09:55 +08:00
parent 9375263790
commit 35fb5ec752

View File

@@ -23,8 +23,7 @@ class PaneActionEntry {
} }
class NaviPane extends StatefulWidget { class NaviPane extends StatefulWidget {
const NaviPane( const NaviPane({required this.paneItems,
{required this.paneItems,
required this.paneActions, required this.paneActions,
required this.pageBuilder, required this.pageBuilder,
this.initialPage = 0, this.initialPage = 0,
@@ -76,14 +75,17 @@ class _NaviPaneState extends State<NaviPane>
static const _kTopBarHeight = 48.0; static const _kTopBarHeight = 48.0;
double get bottomBarHeight => double get bottomBarHeight =>
_kBottomBarHeight + MediaQuery.of(context).padding.bottom; _kBottomBarHeight + MediaQuery
.of(context)
.padding
.bottom;
void onNavigatorStateChange() { void onNavigatorStateChange() {
onRebuild(context); onRebuild(context);
} }
void updatePage(int index) { void updatePage(int index) {
if(widget.observer.routes.length > 1) { if (widget.observer.routes.length > 1) {
widget.navigatorKey.currentState!.popUntil((route) => route.isFirst); widget.navigatorKey.currentState!.popUntil((route) => route.isFirst);
} }
setState(() { setState(() {
@@ -112,7 +114,10 @@ class _NaviPaneState extends State<NaviPane>
} }
double targetFormContext(BuildContext context) { double targetFormContext(BuildContext context) {
var width = MediaQuery.of(context).size.width; var width = MediaQuery
.of(context)
.size
.width;
double target = 0; double target = 0;
if (width > changePoint) { if (width > changePoint) {
target = 2; target = 2;
@@ -181,7 +186,8 @@ class _NaviPaneState extends State<NaviPane>
return Navigator( return Navigator(
observers: [widget.observer], observers: [widget.observer],
key: widget.navigatorKey, key: widget.navigatorKey,
onGenerateRoute: (settings) => AppPageRoute( onGenerateRoute: (settings) =>
AppPageRoute(
preventRebuild: false, preventRebuild: false,
isRootRoute: true, isRootRoute: true,
builder: (context) { builder: (context) {
@@ -224,22 +230,24 @@ class _NaviPaneState extends State<NaviPane>
Widget buildBottom() { Widget buildBottom() {
return Material( return Material(
textStyle: Theme.of(context).textTheme.labelSmall, textStyle: Theme
.of(context)
.textTheme
.labelSmall,
elevation: 0, elevation: 0,
child: Container( child: Container(
height: _kBottomBarHeight + MediaQuery.of(context).padding.bottom, height: _kBottomBarHeight,
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
top: BorderSide( top: BorderSide(
color: Theme.of(context).colorScheme.outlineVariant, color: Theme
.of(context)
.colorScheme
.outlineVariant,
width: 1, width: 1,
), ),
), ),
), ),
child: Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom,
),
child: Row( child: Row(
children: List<Widget>.generate( children: List<Widget>.generate(
widget.paneItems.length, widget.paneItems.length,
@@ -258,7 +266,6 @@ class _NaviPaneState extends State<NaviPane>
), ),
), ),
), ),
),
); );
} }
@@ -274,7 +281,10 @@ class _NaviPaneState extends State<NaviPane>
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
right: BorderSide( right: BorderSide(
color: Theme.of(context).colorScheme.outlineVariant, color: Theme
.of(context)
.colorScheme
.outlineVariant,
width: 1, width: 1,
), ),
), ),
@@ -288,10 +298,14 @@ class _NaviPaneState extends State<NaviPane>
child: Column( child: Column(
children: [ children: [
const SizedBox(height: 16), const SizedBox(height: 16),
SizedBox(height: MediaQuery.of(context).padding.top), SizedBox(height: MediaQuery
.of(context)
.padding
.top),
...List<Widget>.generate( ...List<Widget>.generate(
widget.paneItems.length, widget.paneItems.length,
(index) => _SideNaviWidget( (index) =>
_SideNaviWidget(
enabled: currentPage == index, enabled: currentPage == index,
entry: widget.paneItems[index], entry: widget.paneItems[index],
showTitle: value == 3, showTitle: value == 3,
@@ -304,7 +318,8 @@ class _NaviPaneState extends State<NaviPane>
const Spacer(), const Spacer(),
...List<Widget>.generate( ...List<Widget>.generate(
widget.paneActions.length, widget.paneActions.length,
(index) => _PaneActionWidget( (index) =>
_PaneActionWidget(
entry: widget.paneActions[index], entry: widget.paneActions[index],
showTitle: value == 3, showTitle: value == 3,
key: ValueKey(index + widget.paneItems.length), key: ValueKey(index + widget.paneItems.length),
@@ -325,8 +340,7 @@ class _NaviPaneState extends State<NaviPane>
} }
class _SideNaviWidget extends StatefulWidget { class _SideNaviWidget extends StatefulWidget {
const _SideNaviWidget( const _SideNaviWidget({required this.enabled,
{required this.enabled,
required this.entry, required this.entry,
required this.onTap, required this.onTap,
required this.showTitle, required this.showTitle,
@@ -349,7 +363,9 @@ class _SideNaviWidgetState extends State<_SideNaviWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme; final colorScheme = Theme
.of(context)
.colorScheme;
final icon = final icon =
Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon); Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon);
return MouseRegion( return MouseRegion(
@@ -408,7 +424,9 @@ class _PaneActionWidgetState extends State<_PaneActionWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme; final colorScheme = Theme
.of(context)
.colorScheme;
final icon = Icon(widget.entry.icon); final icon = Icon(widget.entry.icon);
return MouseRegion( return MouseRegion(
cursor: SystemMouseCursors.click, cursor: SystemMouseCursors.click,
@@ -445,8 +463,7 @@ class _PaneActionWidgetState extends State<_PaneActionWidget> {
} }
class _SingleBottomNaviWidget extends StatefulWidget { class _SingleBottomNaviWidget extends StatefulWidget {
const _SingleBottomNaviWidget( const _SingleBottomNaviWidget({required this.enabled,
{required this.enabled,
required this.entry, required this.entry,
required this.onTap, required this.onTap,
super.key}); super.key});
@@ -517,7 +534,9 @@ class _SingleBottomNaviWidgetState extends State<_SingleBottomNaviWidget>
Widget buildContent() { Widget buildContent() {
final value = controller.value; final value = controller.value;
final colorScheme = Theme.of(context).colorScheme; final colorScheme = Theme
.of(context)
.colorScheme;
final icon = final icon =
Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon); Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon);
return Center( return Center(
@@ -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),
], ],
); );
} }