Make nav bar part of app bar instead in collections page

This commit is contained in:
Ming Ming 2024-10-27 00:02:23 +08:00
parent 121f611c7f
commit 6f148e57d1
5 changed files with 74 additions and 91 deletions

View file

@ -20,6 +20,7 @@ class HomeSliverAppBar extends StatelessWidget {
this.menuActions, this.menuActions,
this.onSelectedMenuActions, this.onSelectedMenuActions,
this.isShowProgressIcon = false, this.isShowProgressIcon = false,
this.bottom,
}); });
@override @override
@ -39,6 +40,7 @@ class HomeSliverAppBar extends StatelessWidget {
blurFilter: Theme.of(context).appBarBlurFilter, blurFilter: Theme.of(context).appBarBlurFilter,
floating: true, floating: true,
automaticallyImplyLeading: false, automaticallyImplyLeading: false,
bottom: bottom,
actions: [ actions: [
...actions ?? [], ...actions ?? [],
if (menuActions?.isNotEmpty == true) if (menuActions?.isNotEmpty == true)
@ -70,6 +72,7 @@ class HomeSliverAppBar extends StatelessWidget {
/// Screen specific action buttons /// Screen specific action buttons
final List<Widget>? actions; final List<Widget>? actions;
final PreferredSizeWidget? bottom;
/// Screen specific actions under the overflow menu. The value of each item /// Screen specific actions under the overflow menu. The value of each item
/// much >= 0 /// much >= 0

View file

@ -142,7 +142,6 @@ class _WrappedHomeCollectionsState extends State<_WrappedHomeCollections>
? const _AppBar() ? const _AppBar()
: const _SelectionAppBar(), : const _SelectionAppBar(),
), ),
const _NavigationBar(),
const SliverToBoxAdapter( const SliverToBoxAdapter(
child: SizedBox(height: 8), child: SizedBox(height: 8),
), ),

View file

@ -31,6 +31,10 @@ class _AppBar extends StatelessWidget {
break; break;
} }
}, },
bottom: const PreferredSize(
preferredSize: Size.fromHeight(48),
child: _NavigationBar(),
),
), ),
); );
} }

View file

@ -44,19 +44,22 @@ class HomeCollectionsNavBarButton extends StatelessWidget {
), ),
); );
} else { } else {
return ActionChip( return Theme(
avatar: icon, data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
label: Row( child: ActionChip(
mainAxisSize: MainAxisSize.min, avatar: icon,
children: [ label: Row(
Text(label), mainAxisSize: MainAxisSize.min,
if (isShowIndicator) ...const [ children: [
SizedBox(width: 4), Text(label),
_NavBarButtonIndicator(), if (isShowIndicator) ...const [
SizedBox(width: 4),
_NavBarButtonIndicator(),
],
], ],
], ),
onPressed: isEnabled ? onPressed : null,
), ),
onPressed: isEnabled ? onPressed : null,
); );
} }
} }

View file

@ -37,88 +37,62 @@ class _NavigationBarState extends State<_NavigationBar> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SliverToBoxAdapter( return SizedBox(
child: SizedBox( height: 48,
height: 48, child: Row(
child: Row( children: [
children: [ Expanded(
Expanded( child: ShaderMask(
child: Stack( shaderCallback: (rect) {
children: [ final colors = <Color>[];
_BlocSelector( final stops = <double>[];
selector: (state) => state.navBarButtons, if (_hasLeftContent) {
builder: (context, navBarButtons) { colors.addAll([Colors.white, Colors.transparent]);
final buttons = navBarButtons stops.addAll([0, .1]);
.map((e) => _buildButton(context, e)) } else {
.nonNulls colors.add(Colors.transparent);
.toList(); stops.add(0);
return ListView.separated( }
controller: _scrollController, if (_hasRightContent) {
scrollDirection: Axis.horizontal, colors.addAll([Colors.transparent, Colors.white]);
padding: const EdgeInsets.only(left: 16), stops.addAll([.9, 1]);
itemCount: buttons.length, } else {
itemBuilder: (context, i) => Center( colors.add(Colors.transparent);
child: buttons[i], stops.add(1);
), }
separatorBuilder: (context, _) => return LinearGradient(
const SizedBox(width: 12), begin: Alignment.centerLeft,
); end: Alignment.centerRight,
}, colors: colors,
), stops: stops,
if (_hasLeftContent) ).createShader(rect);
Positioned( },
left: 0, blendMode: BlendMode.dstOut,
top: 0, child: _BlocSelector(
bottom: 0, selector: (state) => state.navBarButtons,
child: IgnorePointer( builder: (context, navBarButtons) {
ignoring: true, final buttons = navBarButtons
child: Container( .map((e) => _buildButton(context, e))
width: 32, .nonNulls
decoration: BoxDecoration( .toList();
gradient: LinearGradient( return ListView.separated(
colors: [ controller: _scrollController,
Theme.of(context).colorScheme.background, scrollDirection: Axis.horizontal,
Theme.of(context) padding: const EdgeInsets.only(left: 16),
.colorScheme itemCount: buttons.length,
.background itemBuilder: (context, i) => Center(
.withOpacity(0), child: buttons[i],
],
),
),
),
),
), ),
if (_hasRightContent) separatorBuilder: (context, _) => const SizedBox(width: 12),
Positioned( );
right: 0, },
top: 0,
bottom: 0,
child: IgnorePointer(
ignoring: true,
child: Container(
width: 32,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Theme.of(context)
.colorScheme
.background
.withOpacity(0),
Theme.of(context).colorScheme.background,
],
),
),
),
),
),
],
), ),
), ),
const SizedBox(width: 8), ),
const _NavBarNewButton(), const SizedBox(width: 8),
const SizedBox(width: 16), const _NavBarNewButton(),
], const SizedBox(width: 16),
), ],
), ),
); );
} }