Flutter 自定义控件-仿照安卓和抖音图标绘制

最新推荐文章于 2024-04-08 01:25:16 发布

2401_84009579

最新推荐文章于 2024-04-08 01:25:16 发布

阅读量304

点赞数 4

分类专栏：程序员文章标签： android flutter java

本文链接：https://blog.csdn.net/2401_84009579/article/details/137188463

版权

文章详细描述了如何在Android应用中使用CustomPainter类创建复杂的图形，包括矩形、圆角矩形、弧形、眼睛和天线形状，以及如何设置颜色和样式。展示了如何组合这些元素来实现各种视觉效果。

摘要由CSDN通过智能技术生成

…color = Colors.black; //背景为纸红色

// 设置矩形的半径和圆角的半径相等，效果如下面右图

Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);

RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));

canvas.drawRRect(rRect, paint);

paint

…style = PaintingStyle.stroke //

…strokeWidth = 60.0 / 3

…color = Colors.redAccent; //背景为纸红色

rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);

canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);

canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 - 7.0, size.height / 2 - 9.0), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2 + 0.1, false, paint…color = Colors.cyanAccent);

canvas.drawLine(Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 9.0), Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 80.0 - 9.0), paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0 - 7.0, size.height / 2 - 80.0 - 9.0), radius: 30.0);

canvas.drawArc(rect, math.pi * 1, -math.pi * 0.526, false, paint);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

4、绘制白色区域

class _MyHomePageState extends State {

@override

void initState() {

// TODO: implement initState

super.initState();

}

@override

Widget build(BuildContext context) {

print(“main_build”);

return Scaffold(

backgroundColor: Colors.white,

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: CustomPaint(

size: Size(300, 300), //指定// 画布大小

painter: MyTrillPainter(),

);

}

//抖音

class MyTrillPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 1.0

…color = Colors.black; //背景为纸红色

// 设置矩形的半径和圆角的半径相等，效果如下面右图

Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);

RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));

canvas.drawRRect(rRect, paint);

paint

…style = PaintingStyle.stroke //

…strokeWidth = 60.0 / 3

…color = Colors.redAccent; //背景为纸红色

rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);

canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);

canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 - 7.0, size.height / 2 - 9.0), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2 + 0.1, false, paint…color = Colors.cyanAccent);

canvas.drawLine(Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 9.0), Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 80.0 - 9.0), paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0 - 7.0, size.height / 2 - 80.0 - 9.0), radius: 30.0);

canvas.drawArc(rect, math.pi