每日见闻之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),
)
相关推荐
晨陌y6 小时前
深入剖析:仓颉语言的性能优化核心技术
android·性能优化·仓颉
xhbh6666 小时前
【实战总结】MySQL日期加减大全:日期计算、边界处理与性能优化详解
android
00后程序员张6 小时前
如何提高 IPA 安全性 多工具组合打造可复用的 iOS 加固与反编译防护体系(IPA 安全 iOS 加固 无源码混淆 Ipa Guard 实战)
android·安全·ios·小程序·uni-app·iphone·webview
张拭心7 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart7 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
西西学代码7 小时前
Flutter---个人信息(3)---实现修改性别
flutter
西西学代码8 小时前
Flutter---ListTile列表项组件
flutter
某空m8 小时前
【Android】DrawerLayout实现侧边导航栏
android
西西学代码9 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
stevenzqzq9 小时前
Android开发工作经历整理
android·简历