--- highlight: androidstudio --- > 灵感来自DesignCode ##### 效果

##### 思路很简单，一眼就是Stack打底，先是中间一个毛玻璃层，后面是一个Shape，后置于中间层，zIndex最顶层是一个设定好宽高Container，用AnimationController根据bottombar选中的索引来做动画，根据系统深浅色主题，改变外观 ##### 实现最外层先包裹一层Container用来显示边线和切割顶部左右圆角： ``` Container( height: barHeight, decoration: BoxDecoration( borderRadius: BorderRadius.only( topLeft: radius, topRight: radius ), border: Border.all( color: Colors.grey.withOpacity(0.35), width: borderWidth, strokeAlign: BorderSide.strokeAlignOutside ) ), child: ClipRRect( borderRadius: BorderRadius.only( topLeft: radius, topRight: radius ), child: ... ) ) ``` 核心代码： ``` Stack(children: [ // 背景Shape Backdrop( controller: _animation, color: sColor, width: itemWidth, height: barHeight, previousIndex: _previousIndex, selectedIndex: selectedIndex), Container(color: Colors.grey.withOpacity(0.2)),/*填色*/ BackdropFilter( blendMode: BlendMode.src, filter: ImageFilter.blur(sigmaX: 26, sigmaY: 26), child: Container( width: double.infinity, color: (() { /*设置背景色，根据样式*/ final lightColor = Colors.white.withOpacity(.2); final darkColor = Colors.black.withOpacity(.2); switch(style) { case BlurEffectStyle.auto: return MediaQuery.of(context).platformBrightness == Brightness.light ? lightColor : darkColor; case BlurEffectStyle.light: return lightColor; case BlurEffectStyle.dark: return darkColor; } })(), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: items .asMap() .map((idx, item) => MapEntry(idx, _itemBuilder(context, idx, item, itemWidth))) .values .toList() ), ), ), // 游标 Cursor( color: sColor, width: itemWidth, controller: _animation, previousIndex: _previousIndex, selectedIndex: selectedIndex, ) ]) ``` ###### 坑1 - Border 原设计是顶部左右两个圆角，所以开始直接 ``` BoxDecoration( borderRadius: BorderRadius.only( topLeft: radius, topRight: radius ), border: Border.all( color: Colors.grey.withOpacity(0.35), width: borderWidth ) ), ``` 但仔细看会发现左右和底部亦会有一个边线存在 ![1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d883100e8ad44216b3210a356cd83caa~tplv-k3u1fbpfcp-watermark.image?) 所以就想着把边框只设置为顶部一条，随又改成了： ``` border: const Border(top: BorderSide(width: 1, color: Colors.white)) ``` 悲剧的是，直接就报错了： `A borderRadius can only be given for a uniform Border.` 顾名思义，只有设置统一的Border才能设置Radius，于是查了好多资料发现，普通的设置好像是无解，只能通过自定义CustomPaint来绘制Border，正当我准备paint的时候突然想到，之所以会显示出Border，是因为border的**strokeAlign**默认属性是-1！也就是strokeAlign***Inside***，那把它改成strokeAlign***Outside***不就直接可以了，机智如我。当然自定义绘画也已经实现，但不在本文章描述范围，就不赘述了。

（看不到了吧）

###### 坑2 - BackdropFilter 大家都知道，毛玻璃的效果是在使用BackdropFilter下实现的，但是无意中发现有一个问题，那就是如果容器背景色为透明的话，毛玻璃也会变成透明了： ``` Scaffold( backgroundColor: Colors.transparent, ) ```

（这...）

经过研究后发现，问题出在：**BlendMode** 观察BackdropFilter的属性后，会发现有一个属性：blendMode，学过安卓的可能会很熟悉，但对我来说有点陌生，进去一看好家伙，这么多，足足20+个枚举： ``` // https://skia.org/docs/user/api/skpaint_overview/#SkXfermode SkBlendMode modes[] = { SkBlendMode::kClear, SkBlendMode::kSrc, SkBlendMode::kDst, SkBlendMode::kSrcOver, SkBlendMode::kDstOver, SkBlendMode::kSrcIn, SkBlendMode::kDstIn, SkBlendMode::kSrcOut, SkBlendMode::kDstOut, SkBlendMode::kSrcATop, SkBlendMode::kDstATop, SkBlendMode::kXor, SkBlendMode::kPlus, SkBlendMode::kModulate, SkBlendMode::kScreen, SkBlendMode::kOverlay, SkBlendMode::kDarken, SkBlendMode::kLighten, SkBlendMode::kColorDodge, SkBlendMode::kColorBurn, SkBlendMode::kHardLight, SkBlendMode::kSoftLight, SkBlendMode::kDifference, SkBlendMode::kExclusion, SkBlendMode::kMultiply, SkBlendMode::kHue, SkBlendMode::kSaturation, SkBlendMode::kColor, SkBlendMode::kLuminosity, }; ``` 更直观的展示：

更多具体可见： `[BlendMode enum - dart:ui library - Dart API (flutter.dev)](https://api.flutter.dev/flutter/dart-ui/BlendMode.html)` 而Flutter默认的属性值是BlendMode.srcOver > - srcOver → const [BlendMode](https://api.flutter.dev/flutter/dart-ui/BlendMode.html) > - Composite the source image over the destination image. > This is the default value. It represents the most intuitive case, where shapes are painted on top of what is below, with transparent areas showing the destination layer. 所以当我们换成blendMode: BlendMode.src后 > - src → const [BlendMode](https://api.flutter.dev/flutter/dart-ui/BlendMode.html) > - Drop the destination image, only paint the source image. > Conceptually, the destination is first cleared, then the source image is painted. 问题就解决了 ##### 结束一个小组件，希望能给你带来一些帮助，如果喜欢的话，就请支持一下吧： [github: bottom_blur_bar](https://github.com/imWalsh/bottom_blur_bar) [pub.dev: bottom_blur_bar](https://pub.dev/packages/bottom_blur_bar)