【每日 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 的加强版。

目录
相关文章
|
2天前
|
容器
Flutter Widget 解析
Flutter Widget 解析
|
2天前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
1月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
76 8
|
1月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
103 2
|
2月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
1月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
75 0
|
5月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
199 0
|
6月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
52 0
|
7月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
7月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
86 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程