前言
在前几天的业务需求中&＃xff0c;UI给出的页面中有新拟态的按钮&＃xff0c;就是带内部阴影的按钮&＃xff0c;如果是利用css中box-shadow的属性&＃xff0c;那么实现起来很简单&＃xff0c;但是奈何Flutter中的Container的BoxShadow不具备inset内部阴影的功能&＃xff0c;那么本文就来解决这个问题&＃xff0c;在解决的过程中&＃xff0c;我发现了Neumorphism.io&＃xff0c;这可是一个神奇的网站&＃xff0c;能满足各种圆角矩形icon图表立体化效果要求&＃xff0c;同时给出了css代码。那么咱用Flutter简单模仿一个&＃xff0c;并给出Flutter Container按钮对应的代码。
源码地址&＃xff1a;https://github.com/taxze6/flutter_neumorphism
效果图&＃xff1a;适配了手机端与网页
实现Flutter内部阴影
在Flutter中&＃xff0c;可以使用以下几种方式来实现阴影&＃xff1a;
BoxShadow(color: Colors.grey.withOpacity(0.5),spreadRadius: 5,blurRadius: 7,offset: Offset(0, 3),
),
- 使用Material组件的elevation属性来添加阴影
Material(elevation: 5.0,child: Text(&＃39;Material Shadow&＃39;),
),
PhysicalModel(color: Colors.white,elevation: 5.0,shadowColor: Colors.grey.withOpacity(0.5),borderRadius: BorderRadius.circular(10),child: const Text(&＃39;PhysicalModel Shadow&＃39;),
),
总的来说&＃xff0c;Flutter实现阴影的方法有很多。但是&＃xff0c;在这么多实现的方法中&＃xff0c;却没有能实现这样内部阴影的方法。
而在前几天的需求中&＃xff0c;就遇到了需要这样的按钮UI&＃xff0c;第一时间想到的是&＃xff0c;通过Stack来实现多层阴影&＃xff0c;从而达到内部阴影的效果&＃xff0c;下面是简单的例子&＃xff0c;实现出来的效果还可以&＃xff0c;但是不够优雅。
Stack(alignment: AlignmentDirectional.center,children: [Container(width: 63,height: 63,decoration: const BoxDecoration(color: Color(0xFF949494),shape: BoxShape.circle,boxShadow: [BoxShadow(color: Color(0xFFE8E8E8),offset: Offset(8, 8),blurRadius: 10,spreadRadius: 1,),],),),ClipRRect(borderRadius: BorderRadius.circular(63),child: Container(width: 63,height: 63,decoration: const BoxDecoration(shape: BoxShape.circle,boxShadow: [BoxShadow(color: Color(0xFFF7F7F7),offset: Offset(3, 3),blurRadius: 3,spreadRadius: 1,),],),),),],
)
这时我想到了BoxShadow实现外阴影的功能&＃xff0c;我想它既然能实现外部的阴影&＃xff0c;那么把它的源码拉出来&＃xff0c;模仿它外阴影的实现逻辑去绘制内阴影是否可行呢&＃xff1f;我觉得可以&＃xff0c;那么理论方案已经出现&＃xff0c;开始实践。
将box_shadow与box_decoration的源码拷贝
先看box_decoration&＃xff0c;看绘制的方法&＃xff0c;这个paint方法主要就是绘制BoxDecoration中的各种装饰&＃xff0c;例如背景颜色。而_paintShadows方法就是本文关注的重点&＃xff0c;
//绘制阴影效果的函数void _paintShadows(Canvas canvas, Rect rect, TextDirection? textDirection) {// 检查是否需要绘制阴影if (_decoration.boxShadow &＃61;&＃61; null) {// 如果不需要&＃xff0c;直接返回 return;}// 遍历阴影效果列表中的每个阴影配置for (final BoxShadow boxShadow in _decoration.boxShadow!) {// 根据阴影配置创建 Paint 对象final Paint paint &＃61; boxShadow.toPaint();// 根据阴影配置计算出阴影绘制区域final Rect bounds &＃61;rect.shift(boxShadow.offset).inflate(boxShadow.spreadRadius);//绘制阴影_paintBox(canvas, bounds, paint, textDirection);}}
根据外阴影的绘制逻辑&＃xff0c;我们要做的就是在BoxShadow添加一个是否是绘制内阴影的属性&＃xff0c;用于判断&＃xff0c;因为如果需要内阴影就不再绘制外阴影了。
for (final painting.BoxShadow boxShadow in _decoration.boxShadow!) {//添加判断if (boxShadow is! BoxShadow || !boxShadow.inset) {continue;}...
}
既然判断了&＃xff0c;如果需要绘制内阴影&＃xff0c;就跳过外阴影的绘制逻辑&＃xff0c;那么我们就需要自己添加内阴影的绘制逻辑。
void _paintInnerShadows(Canvas canvas,Rect rect,TextDirection? textDirection,
) {// 检查是否有需要绘制的阴影&＃xff0c;如果没有则直接返回if (_decoration.boxShadow &＃61;&＃61; null) {return;}// 遍历所有的BoxShadowfor (final painting.BoxShadow boxShadow in _decoration.boxShadow!) {// 如果BoxShadow不是BoxShadow类型&＃xff0c;或者不是内阴影&＃xff0c;跳过本次循环if (boxShadow is! BoxShadow || !boxShadow.inset) {continue;}// 获取BoxShadow的颜色final color &＃61; boxShadow.color;// 计算圆角final borderRadiusGeometry &＃61; _decoration.borderRadius ??(_decoration.shape &＃61;&＃61; BoxShape.circle? BorderRadius.circular(rect.longestSide): BorderRadius.zero);// 解决文本方向final borderRadius &＃61; borderRadiusGeometry.resolve(textDirection);// 使用RRect剪切画布final clipRRect &＃61; borderRadius.toRRect(rect);// 计算内部矩形final innerRect &＃61; rect.deflate(boxShadow.spreadRadius);// 如果内部矩形为空&＃xff0c;则绘制整个矩形if (innerRect.isEmpty) {final paint &＃61; Paint()..color &＃61; color;canvas.drawRRect(clipRRect, paint);}// 否则&＃xff0c;绘制内阴影else {// 计算内部矩形的RRectvar innerRRect &＃61; borderRadius.toRRect(innerRect);// 保存画布状态canvas.save();// 在剪切区域内绘制内阴影canvas.clipRRect(clipRRect);// 计算包含内阴影和剪切区域的矩形final outerRect &＃61; _areaCastingShadowInHole(rect, boxShadow);// 绘制内阴影canvas.drawDRRect(RRect.fromRectAndRadius(outerRect, Radius.zero),innerRRect.shift(boxShadow.offset),Paint()..color &＃61; color..colorFilter &＃61; ColorFilter.mode(color, BlendMode.srcIn)..maskFilter &＃61;MaskFilter.blur(BlurStyle.normal, boxShadow.blurSigma),);// 恢复画布状态canvas.restore();}}
}
其中_areaCastingShadowInHole方法就是用来计算box中阴影的区域&＃xff1a;
///holeRect:表示阴影的位置和大小
///shadow:表示阴影的颜色、大小、位置
Rect _areaCastingShadowInHole(Rect holeRect, BoxShadow shadow) {var bounds &＃61; holeRect;//将bounds沿着所有方向膨胀shadow.blurRadius的距离//确保生成的阴影图像元素不会被截断bounds &＃61; bounds.inflate(shadow.blurRadius);//BoxShadow.spreadRadius用于控制阴影扩展的距离//如果值小于0&＃xff0c;则阴影会从矩形边界开始&＃xff0c;向内收缩。if (shadow.spreadRadius <0) {bounds &＃61; bounds.inflate(-shadow.spreadRadius);}//Rect.shift 方法用于将矩形的位置偏移指定的距离final offsetBounds &＃61; bounds.shift(shadow.offset);return _unionRects(bounds, offsetBounds);
}
返回的_unionRects作用主要是先检查bounds、offsetBounds两个矩形是否有空矩形&＃xff0c;如果有&＃xff0c;则直接返回非空矩形。否则&＃xff0c;它计算出包含这两个矩形的最小矩形&＃xff0c;并返回该矩形。
Rect _unionRects(Rect a, Rect b) {if (a.isEmpty) {return b;}if (b.isEmpty) {return a;}final left &＃61; math.min(a.left, b.left);final top &＃61; math.min(a.top, b.top);final right &＃61; math.max(a.right, b.right);final bottom &＃61; math.max(a.bottom, b.bottom);return Rect.fromLTRB(left, top, right, bottom);
}
然后就能在paint方法中参与绘制的过程&＃xff1a;
更多的细节可以参考源码&＃xff0c;注释都很全。
讲完了如何实现Flutter的内部阴影&＃xff0c;本文也没有其他重要的知识点了&＃xff0c;不过有一些有趣的东西&＃xff1a;
在实现Flutter_Neumorphism中&＃xff0c;计算方块上下两个阴影的颜色的过程&＃xff1a;
// 定义静态函数 getAdjustColor&＃xff0c;接收基础颜色 baseColor 和需要调整的颜色量 amount
static Color getAdjustColor(Color baseColor, int amount) {// 将 baseColor 的 red、green、blue 数值存储在一个 Map 对象 colors 中Map colors &＃61; {"red": baseColor.red,"green": baseColor.green,"blue": baseColor.blue};// 使用 map 函数对 colors 中的每一个键值对进行处理colors &＃61; colors.map((key, value) {// 如果 value &＃43; amount <0&＃xff0c;则将当前数值设为 0if (value &＃43; amount <0) return MapEntry(key, 0);// 如果 value &＃43; amount > 255&＃xff0c;则将当前数值设为 255if (value &＃43; amount > 255) return MapEntry(key, 255);// 否则&＃xff0c;将当前数值设为 value &＃43; amountreturn MapEntry(key, value &＃43; amount);});// 返回根据调整后的 red、green、blue 数值创建的颜色对象return Color.fromRGBO(colors["red"], colors["green"], colors["blue"], 1);
}
更多的细节请看源码&＃xff0c;建议大家运行体验看看~
关于我
Hello&＃xff0c;我是Taxze&＃xff0c;如果您觉得文章对您有价值&＃xff0c;希望您能给我的文章点个❤️&＃xff0c;有问题需要联系我的话&＃xff1a;我在这里 如果您觉得文章还差了那么点东西&＃xff0c;也请通过关注督促我写出更好的文章~万一哪天我进步了呢&＃xff1f;&＃x1f61d;
京公网安备 11010802041100号