nyne/venera
1
0
Fork 0
mirror of https://github.com/venera-app/venera.git synced 2025-09-27 07:47:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
nyne
2024-10-26 23:09:55 +08:00
parent 9375263790
commit 35fb5ec752
1 changed files with 123 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
lib/components/navigation_bar.dart
View File

@@ -23,15 +23,14 @@ 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, this.onPageChange,
this.onPageChange, required this.observer,
required this.observer, required this.navigatorKey,
required this.navigatorKey, super.key});
super.key});
final List<PaneItemEntry> paneItems; final List<PaneItemEntry> paneItems;
@@ -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,13 +186,14 @@ 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) =>
preventRebuild: false, AppPageRoute(
isRootRoute: true, preventRebuild: false,
builder: (context) { isRootRoute: true,
return _NaviMainView(state: this); builder: (context) {
}, return _NaviMainView(state: this);
), },
),
); );
} }
@@ -224,38 +230,39 @@ 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( child: Row(
padding: EdgeInsets.only( children: List<Widget>.generate(
bottom: MediaQuery.of(context).padding.bottom, widget.paneItems.length,
), (index) {
child: Row( return Expanded(
children: List<Widget>.generate( child: _SingleBottomNaviWidget(
widget.paneItems.length, enabled: currentPage == index,
(index) { entry: widget.paneItems[index],
return Expanded( onTap: () {
child: _SingleBottomNaviWidget( updatePage(index);
enabled: currentPage == index, },
entry: widget.paneItems[index], key: ValueKey(index),
onTap: () { ),
updatePage(index); );
}, },
key: ValueKey(index),
),
);
},
),
), ),
), ),
), ),
@@ -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,27 +298,32 @@ 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) =>
enabled: currentPage == index, _SideNaviWidget(
entry: widget.paneItems[index], enabled: currentPage == index,
showTitle: value == 3, entry: widget.paneItems[index],
onTap: () { showTitle: value == 3,
updatePage(index); onTap: () {
}, updatePage(index);
key: ValueKey(index), },
), key: ValueKey(index),
),
), ),
const Spacer(), const Spacer(),
...List<Widget>.generate( ...List<Widget>.generate(
widget.paneActions.length, widget.paneActions.length,
(index) => _PaneActionWidget( (index) =>
entry: widget.paneActions[index], _PaneActionWidget(
showTitle: value == 3, entry: widget.paneActions[index],
key: ValueKey(index + widget.paneItems.length), showTitle: value == 3,
), key: ValueKey(index + widget.paneItems.length),
),
), ),
const SizedBox( const SizedBox(
height: 16, height: 16,
@@ -325,12 +340,11 @@ 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, super.key});
super.key});
final bool enabled; final bool enabled;
@@ -349,9 +363,11 @@ 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(
cursor: SystemMouseCursors.click, cursor: SystemMouseCursors.click,
onEnter: (details) => setState(() => isHovering = true), onEnter: (details) => setState(() => isHovering = true),
@@ -369,23 +385,23 @@ class _SideNaviWidgetState extends State<_SideNaviWidget> {
color: widget.enabled color: widget.enabled
? colorScheme.primaryContainer ? colorScheme.primaryContainer
: isHovering : isHovering
? colorScheme.surfaceContainerHigh ? colorScheme.surfaceContainerHigh
: null, : null,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: widget.showTitle child: widget.showTitle
? Row( ? Row(
children: [ children: [
icon, icon,
const SizedBox( const SizedBox(
width: 12, width: 12,
), ),
Text(widget.entry.label) Text(widget.entry.label)
], ],
) )
: Center( : Center(
child: icon, child: icon,
)), )),
), ),
); );
} }
@@ -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,
@@ -428,28 +446,27 @@ class _PaneActionWidgetState extends State<_PaneActionWidget> {
borderRadius: BorderRadius.circular(8)), borderRadius: BorderRadius.circular(8)),
child: widget.showTitle child: widget.showTitle
? Row( ? Row(
children: [ children: [
icon, icon,
const SizedBox( const SizedBox(
width: 12, width: 12,
), ),
Text(widget.entry.label) Text(widget.entry.label)
], ],
) )
: Center( : Center(
child: icon, child: icon,
)), )),
), ),
); );
} }
} }
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});
final bool enabled; final bool enabled;
@@ -517,9 +534,11 @@ 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(
child: Container( child: Container(
width: 64, width: 64,
@@ -620,12 +639,12 @@ class _NaviPopScope extends StatelessWidget {
Widget res = App.isIOS Widget res = App.isIOS
? child ? child
: PopScope( : PopScope(
canPop: App.isAndroid ? false : true, canPop: App.isAndroid ? false : true,
onPopInvokedWithResult: (value, result) { onPopInvokedWithResult: (value, result) {
action(); action();
}, },
child: child, child: child,
); );
if (popGesture) { if (popGesture) {
res = GestureDetector( res = GestureDetector(
onPanStart: (details) { 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),
], ],
); );
} }