每日见闻之Container Decoration

1 Decoation 主要有两个方法

javascript 复制代码
Path getClipPath(Rect rect, TextDirection textDirection) {
  throw UnsupportedError('${objectRuntimeType(this, 'This Decoration subclass')} does not expect to be used for clipping.');
}
less 复制代码
@factory
BoxPainter createBoxPainter([ VoidCallback onChanged ]);

getClipPath 返回的是裁剪的路径,裁剪的是child的显示区域。Rect 就是Container的范围。

createBoxPainter 返回的是自定义绘制内容的BoxPointer

2 BoxPainter主要是实现下面的方法

arduino 复制代码
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration);

offset Container 在父节点中的位置

configuration Container的一些信息,包含宽高

最后留下一个demo,裁剪圆形图片

scala 复制代码
// 自定义装饰:绘制矩形,但裁剪为圆形
class CircleWithRectDecoration extends Decoration {
  final Color color;

  const CircleWithRectDecoration({required this.color});

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CircleWithRectPainter(this, onChanged);
  }

  @override
  Path getClipPath(Rect rect, TextDirection textDirection) {
    // 返回圆形裁剪路径
    return Path()
      ..addRect(Rect.fromCenter(center: rect.center, width: rect.width / 2, height: rect.height/2));
  }
}

class _CircleWithRectPainter extends BoxPainter {
  final CircleWithRectDecoration decoration;

  _CircleWithRectPainter(this.decoration, VoidCallback? onChanged) : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final rect = offset & configuration.size!;
    final paint = Paint()
      ..color = decoration.color
      ..style = PaintingStyle.fill;

    // 绘制矩形(而非圆形)
    canvas.drawOval(rect, paint);
  }
}

使用

less 复制代码
Container(
  width: 150,
  height: 150,
  clipBehavior: Clip.antiAlias, // 启用裁剪
  decoration: const CircleWithRectDecoration(color: Colors.blue),
  // 默认 clipBehavior: Clip.none,getClipPath() 无效
  child: const FlutterLogo(size: 150),
)
相关推荐
BD_Marathon20 小时前
【MySQL】函数
android·数据库·mysql
西西学代码21 小时前
安卓开发---耳机的按键设置的UI实例
android·ui
maki0771 天前
虚幻版Pico大空间VR入门教程 05 —— 原点坐标和项目优化技巧整理
android·游戏引擎·vr·虚幻·pico·htc vive·大空间
千里马学框架1 天前
音频焦点学习之AudioFocusRequest.Builder类剖析
android·面试·智能手机·车载系统·音视频·安卓framework开发·audio
fundroid1 天前
掌握 Compose 性能优化三步法
android·android jetpack
TeleostNaCl1 天前
如何在 IDEA 中使用 Proguard 自动混淆 Gradle 编译的Java 项目
android·java·经验分享·kotlin·gradle·intellij-idea
旷野说1 天前
Android Studio Narwhal 3 特性
android·ide·android studio
maki0772 天前
VR大空间资料 01 —— 常用VR框架对比
android·ue5·游戏引擎·vr·虚幻·pico
xhBruce2 天前
InputReader与InputDispatcher关系 - android-15.0.0_r23
android·ims
领创工作室2 天前
安卓设备分区作用详解-测试机红米K40
android·java·linux