我不知道如何讓底部導航欄與 Flutter 中的背景模糊如下圖
我希望底部導航欄模糊螢屏底部附近的背景，但我只能在下面用白色背景來做，上面有兩個非常厚的頂部和底部邊框，模糊了內容
這是我的代碼，
class _MainPageState extends State<MainPage> {
var currentIndex = 0;
//int currentIndex = 0;
void onTabTapped(int index) {
setState(() {
currentIndex = index;
HapticFeedback.lightImpact();
});
}
final screens = [
const HomePage(),
NotificationPage(),
MessagePage(),
BookmarkPage(),
];
List<IconData> listOfIcons = [
Icons.home_rounded,
Icons.notifications,
Icons.message_rounded,
Icons.library_books,
];
List<String> listOfStrings = [
'Home',
'T.báo',
'T.Nh?n',
'B.??ng',
];
@override
Widget build(BuildContext context) {
double displayWidth = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(child: screens[currentIndex]),
bottomNavigationBar: Container(
margin: EdgeInsets.all(displayWidth * .03),
height: displayWidth * .155,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.1),
blurRadius: 30,
offset: Offset(0, 10),
),
],
borderRadius: BorderRadius.circular(50),
),
child: ListView.builder(
itemCount: 4,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(horizontal: displayWidth * .02),
itemBuilder: (context, index) => InkWell(
onTap: () {
setState(() {
currentIndex = index;
HapticFeedback.lightImpact();
});
},
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Stack(
children: [
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width: index == currentIndex
? displayWidth * .32
: displayWidth * .18,
alignment: Alignment.center,
child: AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
height: index == currentIndex ? displayWidth * .12 : 0,
width: index == currentIndex ? displayWidth * .32 : 0,
decoration: BoxDecoration(
color: index == currentIndex
? Color(0xffEC1C24).withOpacity(.2)
: Colors.transparent,
borderRadius: BorderRadius.circular(50),
),
),
),
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width: index == currentIndex
? displayWidth * .31
: displayWidth * .18,
alignment: Alignment.center,
child: Stack(
children: [
Row(
children: [
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width:
index == currentIndex ? displayWidth * .13 : 0,
),
AnimatedOpacity(
opacity: index == currentIndex ? 1 : 0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
child: Text(
index == currentIndex
? '${listOfStrings[index]}'
: '',
style: TextStyle(
color: Color(0xffEC1C24),
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
),
],
),
Row(
children: [
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
width:
index == currentIndex ? displayWidth * .03 : 20,
),
Icon(
listOfIcons[index],
size: displayWidth * .076,
color: index == currentIndex
? Color(0xffEC1C24)
: Colors.black26,
),
],
),
],
),
),
],
),
),
),
),
);
}
}
非常感謝您的評論和貢獻。
uj5u.com熱心網友回復：
比較簡單，首先需要將body設定extendBody: true在Scaffold中，這樣就可以讓bottomNavigation越過腳手架的body。
重要的是 body 的內容是 as Clip.none，就像我對 the 所做的那樣SingleChildScrollView，這是為了防止內容在 BottomNavigation 之前被剪切。
對于bottomNavigation，我們將使用堆疊將其欄添加到
uj5u.com熱心網友回復：
bottomNavigationBar在腳手架的主體下方渲染，因此它們不會塌陷。
您可以stack改為將自定義導航欄堆疊到正文內容上并用于BackdropFilter模糊背景
這是示例代碼：
body: Stack(
children: [
ListView(
children: [
],
),
Column(
children: [
Spacer(),
ClipRect(
// set boundary for BackdropFilter
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 2,
sigmaY: 2,
),
child: Column(
children: [
Container(
// this is your bottomNavBar
height: 50,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.1),
blurRadius: 30,
offset: Offset(0, 10),
),
],
borderRadius: BorderRadius.circular(50),
),
),
const SizedBox(
height: 16.0,
)
],
),
),
),
],
),
],
),
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/523383.html
標籤：扑镖
下一篇：我收到顏色和裝飾null錯誤