fix(home): 首页深色底部导航补齐安全区底色
This commit is contained in:
1 parent
ac1202c329
commit
66e9062ba5
3 files changed
+91
-29
No files matched your search
@@ -43,37 +43,35 @@ class AppBottomNav extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final bar = Container(
|
||||||
|
key: barKey,
|
||||||
|
height: AppDimens.navHeight,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: dark ? Colors.black : backgroundColor.withValues(alpha: 0.95),
|
||||||
|
border: Border(
|
||||||
|
top: BorderSide(color: dark ? Colors.white12 : AppColors.border),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
for (final item in items)
|
||||||
|
_NavDestination(
|
||||||
|
item: item,
|
||||||
|
unselectedColor: dark ? Colors.white70 : AppColors.navUnselected,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
if (dark) {
|
||||||
|
return ColoredBox(
|
||||||
|
color: Colors.black,
|
||||||
|
child: SafeArea(top: false, child: bar),
|
||||||
|
);
|
||||||
|
}
|
||||||
return ClipRect(
|
return ClipRect(
|
||||||
child: BackdropFilter(
|
child: BackdropFilter(
|
||||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||||
child: SafeArea(
|
child: SafeArea(top: false, child: bar),
|
||||||
top: false,
|
|
||||||
child: Container(
|
|
||||||
key: barKey,
|
|
||||||
height: AppDimens.navHeight,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: dark
|
|
||||||
? const Color(0xE6000000)
|
|
||||||
: backgroundColor.withValues(alpha: 0.95),
|
|
||||||
border: Border(
|
|
||||||
top: BorderSide(
|
|
||||||
color: dark ? Colors.white12 : AppColors.border,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
for (final item in items)
|
|
||||||
_NavDestination(
|
|
||||||
item: item,
|
|
||||||
unselectedColor: dark
|
|
||||||
? Colors.white70
|
|
||||||
: AppColors.navUnselected,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -82,4 +82,68 @@ void main() {
|
|||||||
await tester.tap(find.byKey(const Key('tab-theater')));
|
await tester.tap(find.byKey(const Key('tab-theater')));
|
||||||
expect(theaterTaps, 1);
|
expect(theaterTaps, 1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('should_fill_dark_bottom_safe_area_with_black_background', (
|
||||||
|
tester,
|
||||||
|
) async {
|
||||||
|
const barKey = Key('dark-nav-bar');
|
||||||
|
await tester.pumpWidget(
|
||||||
|
MaterialApp(
|
||||||
|
home: MediaQuery(
|
||||||
|
data: const MediaQueryData(padding: EdgeInsets.only(bottom: 34)),
|
||||||
|
child: Scaffold(
|
||||||
|
bottomNavigationBar: AppBottomNav(
|
||||||
|
dark: true,
|
||||||
|
barKey: barKey,
|
||||||
|
items: [
|
||||||
|
AppBottomNavItem(
|
||||||
|
tabKey: const Key('tab-home'),
|
||||||
|
icon: Icons.movie_outlined,
|
||||||
|
selectedIcon: Icons.movie_rounded,
|
||||||
|
label: 'Home',
|
||||||
|
selected: true,
|
||||||
|
onTap: () {},
|
||||||
|
),
|
||||||
|
AppBottomNavItem(
|
||||||
|
tabKey: const Key('tab-theater'),
|
||||||
|
icon: Icons.explore_outlined,
|
||||||
|
selectedIcon: Icons.explore_rounded,
|
||||||
|
label: 'Theater',
|
||||||
|
onTap: () {},
|
||||||
|
),
|
||||||
|
AppBottomNavItem(
|
||||||
|
tabKey: const Key('tab-create'),
|
||||||
|
icon: Icons.add_box_outlined,
|
||||||
|
selectedIcon: Icons.add_box_rounded,
|
||||||
|
label: 'Create',
|
||||||
|
onTap: () {},
|
||||||
|
),
|
||||||
|
AppBottomNavItem(
|
||||||
|
tabKey: const Key('tab-mine'),
|
||||||
|
icon: Icons.person_outline_rounded,
|
||||||
|
selectedIcon: Icons.person_rounded,
|
||||||
|
label: 'Me',
|
||||||
|
onTap: () {},
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
tester.getSize(find.byType(AppBottomNav)).height,
|
||||||
|
AppDimens.navHeight + 34,
|
||||||
|
);
|
||||||
|
expect(tester.getSize(find.byKey(barKey)).height, AppDimens.navHeight);
|
||||||
|
|
||||||
|
final coloredBox = tester.widget<ColoredBox>(
|
||||||
|
find.descendant(
|
||||||
|
of: find.byType(AppBottomNav),
|
||||||
|
matching: find.byType(ColoredBox),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
expect(coloredBox.color, Colors.black);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
@@ -53,7 +53,7 @@ void main() {
|
|||||||
final decoration = bar.decoration as BoxDecoration;
|
final decoration = bar.decoration as BoxDecoration;
|
||||||
final border = decoration.border as Border;
|
final border = decoration.border as Border;
|
||||||
// 首页 feed 用深色导航。
|
// 首页 feed 用深色导航。
|
||||||
expect(decoration.color, const Color(0xE6000000));
|
expect(decoration.color, Colors.black);
|
||||||
expect(border.top.color, Colors.white12);
|
expect(border.top.color, Colors.white12);
|
||||||
expect(
|
expect(
|
||||||
tester
|
tester
|
||||||
|
|||||||
Reference in new issue
Block a user