Question

我想模糊脚手架的BottomNavigationBar的背景，以便它可以为它背后的物品提供炫酷的模糊效果。我怎么能这样做？

更多信息：我尝试通过为BottomNaviagtionBar创建新主题来为canvasColor添加不透明度。这是我的代码：

bottomNavigationBar: new Theme( data: Theme.of(context).copyWith( canvasColor: Color(0xff424242).withOpacity(0.5), ), child: new BottomNavigationBar( onTap: navigationTapped, currentIndex: _page, items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text('Home') ), new BottomNavigationBarItem( icon: new Icon(Icons.dashboard), title: new Text('Menu') ), new BottomNavigationBarItem( icon: new Icon(Icons.date_range), title: new Text('Dates') ) ], ), )

这是我得到的输出：Image

令人惊讶的是，正如您所看到的，不透明度根本没有应用。我实际上不希望BottomNavigationBar不透明。我希望它变得模糊，以便它背后的内容可以在BottomNaviagtionBar上被视为模糊。我也尝试在ImageFilter.blur（）中包装BottomNavigationBar，但这也没有用。

Answer 1

为此，我不得不将底部导航与屏幕上的其他内容放在一起。我使用了ClipRect，BackdropFilter和Opacity的组合。这是可行的解决方案：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(context),
      body: Stack(
        //these are the screens that will be loaded for every bottom nav item
        children: <Widget>[
          IndexedStack(
            index: _currentTab,
            children: _pages,
          ),
          _buildBottomNavigation()
        ],
      ),
    );
  }

Widget _buildBottomNavigation() => Align(
        alignment: FractionalOffset.bottomCenter,
        //this is very important, without it the whole screen will be blurred
        child: ClipRect(
          //I'm using BackdropFilter for the blurring effect
          child: BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 10.0,
              sigmaY: 10.0,
            ),
            child: Opacity(
              //you can change the opacity to whatever suits you best
              opacity: 0.8,
              child: BottomNavigationBar(
                currentIndex: _currentTab,
                onTap: (int index) {
                  setState(() {
                    _currentTab = index;
                  });
                },
                type: BottomNavigationBarType.fixed,
                unselectedItemColor: AppColors.colorBlack,
                items: allRoutes.map((NavigationRoute route) {
                  return _buildBottomNavigationBarItem(route);
                }).toList(),
              ),
            ),
          ),
        ),
      );

Answer 2

** just set a transparent backgroundColor .**
@override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        backgroundColor: Colors.transparent,
        border: Border.all(
          width: 0.0,
          style: BorderStyle.none,
        ),
      ),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(
                    left: 20.0,
                    top: 0.0,
                    right: 20.0,
                  ),
                  height: 280.0,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: Const.color.linearColors,
                    ),
//                    image: DecorationImage(
//                      image: AssetImage('assets/image/bac.png'),
//                    ),
                  ),
                  child: Row(
                    children: <Widget>[Text('Hello')],
                  ),
                ),
              ),

              /// end of Expanded
            ],
          ),
        ],
      ),
    );

如何在Flutter中模糊BottomNavigationBar？

2 个答案: