【每日 widget】Flutter PhysicalModel

简介: 【每日 widget】Flutter PhysicalModel

image.png

前面讲了 ClipRectClipPathClipOval 与 ClipRRect。本文学习 PhysicalModel,不仅可以剪裁,还能有阴影效果。

建议先看前面关于 clip 的三篇文章,因为 PhysicalModel 在 clip 的基础上增加了阴影功能。读完这三篇,再读这篇会非常轻松。从源码的位置上看 PhysicalModel 也是紧接着 clip 的。

源码分析

从文档上看,觉得很神秘,其实看看源码就知道了,不管是什么效果,最后都得用 canvas 画来出。

abstract class _RenderPhysicalModelBase<T> extends _RenderCustomClip<T> 
复制代码
class RenderPhysicalModel extends _RenderPhysicalModelBase<RRect> 
复制代码

从继承关系上也能看出 RenderPhysicalModel 是 clip widget 的近亲。

先看下构造函数,了解下参数。

const PhysicalModel({
    super.key,
    this.shape = BoxShape.rectangle,
    this.clipBehavior = Clip.none,
    this.borderRadius,
    this.elevation = 0.0,
    required this.color,
    this.shadowColor = const Color(0xFF000000),
    super.child,
  }
复制代码

再看下在实现上是如何使用这些参数的。

if (elevation != 0.0 && paintShadows) {     
      canvas.drawRect(
        offsetBounds.inflate(20.0),
        _transparentPaint,
      );
      canvas.drawShadow(
        offsetRRectAsPath,
        shadowColor,
        elevation,
        color.alpha != 0xFF,
      );
    }
}
复制代码

如果参数 elevation 不为 0 就会用到参数 shadowColor,调用 canvas.drawShadow 方法画阴影。

final bool usesSaveLayer = clipBehavior == Clip.antiAliasWithSaveLayer;
 if (!usesSaveLayer) {
      canvas.drawPath(offsetPath, Paint()..color = color);
    }
    layer = context.pushClipPath(
      needsCompositing,
      offset,
      Offset.zero & size,
      _clip!,
      (PaintingContext context, Offset offset) {
        if (usesSaveLayer) {
          context.canvas.drawPaint(Paint()..color = color);
        }
        super.paint(context, offset);
     },
复制代码

参数 color 用来做背景色,我们看到共有两处用到 color。 clipBehavior 为 Clip.antiAliasWithSaveLayer 的时候,只能用 context.canvas.drawPaint 方法。否则用 canvas.drawPath 方法,这也是 Clip.antiAliasWithSaveLayer 比较昂贵的原因。

switch (_shape) {
      case BoxShape.rectangle:
        return (borderRadius ?? rectangle.zero).toRRect(Offset.zero & size);
      case BoxShape.circle:
        final Rect rect = Offset.zero & size;
        return RRect.fromRectXY(rect, rect.width / 2, rect.height / 2);
}
复制代码

当参数 shape 为 rectangle 的时候,参数 borderRadius 决定矩形的圆角大小。 shape 只能有两种,一种是 BoxShape.rectangle,一种是 BoxShape.rectangle。 但从实现上看,其实就是一种,都是 RRect(圆角矩形)。

layer = context.pushClipRRect(
 ...
复制代码

clip 效果用的是 pushClipRRect, 和 ClipRect 用的的方法是一样的。flutter 看似有很多 widget,但核心却不多。

知道了每个参数的作用,就不会迷惑了,下面看下这些参数会产生什么样的效果。

使用 PhysicalModel

从代码上可以看出 PhysicalModel 一共两个能力,一个是阴影效果,一个是裁剪。我们就一起用上。


image.png

PhysicalModel(
   color: Colors.white,
   elevation: 10,
   shadowColor: Colors.black,
   clipBehavior: Clip.hardEdge,
   shape: BoxShape.circle,
   child:  SizedBox(width: 100,height: 100),
)
复制代码

child 不能为空,否则什么也不会绘制

到这里就是全部了,挺简单的。 唯一的问题就是 elevation 无法和设计师的阴影参数对应上。如果用这个widget ,只能靠感觉调 elevation 的值了。

知识都是有联系的,寻着 clip 一族找到这里,就会非常自然。可以把 PhysicalModel 看作是 ClipRRect widget 的加强版,

PhysicalModel 只能 clip 矩形和圆形,可能你会觉得有所不足,RenderPhysicalShape 可以解决这个问题。

看下它的构造函数

PhysicalShape({
    super.key,
    required this.clipper,
    this.clipBehavior = Clip.none,
    this.elevation = 0.0,
    required this.color,
    this.shadowColor = const Color(0xFF000000),
    super.child,
  }
复制代码

我们发现多了一个 clipper 参数,类型是 CustomClipper,可以把 RenderPhysicalShape 看作是 ClipPath 的加强版。

目录
相关文章
|
1月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
70 0
|
2月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
22 0
|
3月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
3月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
49 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
3月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
37 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
3月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
3月前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
3月前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
Flutter源码分析笔记:Widget类源码分析
本文记录阅读与分析Flutter源码 - Widget类源码分析。
80 0
Flutter源码分析笔记:Widget类源码分析
|
11月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget