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

最新推荐文章于 2025-03-24 17:34:57 发布
原创 最新推荐文章于 2025-03-24 17:34:57 发布 · 1.7k 阅读 · 29 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #学习 #经验分享

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);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

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);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

![](https://img-blog.csdnimg.cn/20200822160340303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow

_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0OTE4Mjk=,size_16,color_FFFFFF,t_70)

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 + 60.0, size.height / 2 - 80.0), radius: 30.0);

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

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

3、绘制青色区域

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 * 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 * 1, -math.pi * 0.526, false, paint);

rect = Rect.fromCircle(

center: Offset(size.width / 2 - 4.0, size.height / 2 - 4.0),

radius: 30.0);

canvas.drawArc(rect, 0,

math.pi * 3 / 2,

false,

paint

…color = Colors.white

…strokeWidth = 16.0);

canvas.drawLine(

Offset(size.width / 2 + 30.0 - 4.0, size.height / 2 - 4.0),

Offset(size.width / 2 + 30.0 - 4.0, size.height / 2 - 80.0 - 4.0),

paint);

rect = Rect.fromCircle(

center:

Offset(size.width / 2 + 60.0 - 4.0, size.height / 2 - 80.0 - 4.0),

radius: 30.0);

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

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

安卓图标

1、绘制灰色矩形背景

class MyAndroidPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 0.0;

_drawRect(size, canvas, paint);

}

//绘制灰色矩形背景

void _drawRect(Size size, Canvas canvas, paint) {

Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);

canvas.drawRect(rect, paint…color = Colors.black12);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

2、绘制绿色圆角背景

class MyAndroidPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 0.0;

//矩形圆角

double _rCircular = size.width * 7 / 30;

_drawRect(size, canvas, paint);

_drawRRect(size, canvas, paint, _rCircular);

}

//绘制灰色矩形背景

void _drawRect(Size size, Canvas canvas, paint) {

Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);

canvas.drawRect(rect, paint…color = Colors.black12);

}

//绘制圆角矩形背景

void _drawRRect(Size size, Canvas canvas, paint, rCircular) {

Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);

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

canvas.drawRRect(rRect, paint…color = Colors.lightGreen);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

3、绘制半圆角白色背景

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 0.0;

//矩形圆角

double _rCircular = size.width * 7 / 30;

_drawRect(size, canvas, paint);

_drawRRect(size, canvas, paint, _rCircular);

//绘制中间半圆角

_drawMHalfRRect(size, canvas, paint, _rCircular / 3);

}

//绘制半圆角背景

void _drawMHalfRRect(Size size, Canvas canvas, paint, rCircular) {

double _halfRRectStartX = size.width / 3,

_halfRRectStartY = size.height / 3,

_halfRRectEndX = size.width * 2 / 3,

_halfRRectEndY = size.height * 2 / 3;

Rect rect = Rect.fromLTRB(

_halfRRectStartX, _halfRRectStartY, _halfRRectEndX, _halfRRectEndY);

RRect rRect = RRect.fromRectAndCorners(rect,

bottomLeft: Radius.circular(rCircular),

bottomRight: Radius.circular(rCircular),

topLeft: Radius.circular(0.0),

topRight: Radius.circular(0.0));

canvas.drawRRect(rRect, paint…color = Colors.white);

}

4、绘制中间半圆角-左、右边圆角矩形

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 0.0;

//矩形圆角

double _rCircular = size.width * 7 / 30;

_drawRect(size, canvas, paint);

_drawRRect(size, canvas, paint, _rCircular);

//绘制中间半圆角

_drawMHalfRRect(size, canvas, paint, _rCircular / 3);

_drawMLRRect(size, canvas, paint, _rCircular / 4);

_drawMRRRect(size, canvas, paint, _rCircular / 4);

}

//绘制中间半圆角-左边圆角矩形

void _drawMLRRect(Size size, Canvas canvas, paint, rCircular) {

double _rRectStartX = size.width / 3 - 30.0,

_rRectStartY = size.height / 3,

_rRectEndX = size.width / 3 - 6.0,

_rRectEndY = size.height / 3 * 2 - 20.0;

Rect rect =

Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);

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

canvas.drawRRect(rRect, paint…color = Colors.white);

}

//绘制中间半圆角-右边圆角矩形

void _drawMRRRect(Size size, Canvas canvas, paint, rCircular) {

double _rRectStartX = size.width / 3 * 2 + 6.0,

_rRectStartY = size.height / 3,

_rRectEndX = size.width / 3 * 2 + 30.0,

_rRectEndY = size.height / 3 * 2 - 20.0;

Rect rect =

Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);

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

canvas.drawRRect(rRect, paint…color = Colors.white);

}

5、绘制底部2个半圆角矩形

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 0.0;

//矩形圆角

double _rCircular = size.width * 7 / 30;

_drawRect(size, canvas, paint);

_drawRRect(size, canvas, paint, _rCircular);

_drawBLHalfRRect(size, canvas, paint, _rCircular / 4);

_drawBRHalfRRect(size, canvas, paint, _rCircular / 4);

}

//绘制底部左边半圆角

void _drawBLHalfRRect(Size size, Canvas canvas, paint, rCircular) {

double _rRectStartX = size.width / 3 + 20.0,

_rRectStartY = size.height / 3 * 2,

_rRectEndX = size.width / 3 + 44.0,

_rRectEndY = size.height / 3 * 2 + 40.0;

Rect rect =

Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);

RRect rRect = RRect.fromRectAndCorners(rect,

bottomLeft: Radius.circular(rCircular),

bottomRight: Radius.circular(rCircular),

topLeft: Radius.circular(0.0),

topRight: Radius.circular(0.0));

canvas.drawRRect(rRect, paint…color = Colors.white);

}

//绘制底部右边半圆角

void _drawBRHalfRRect(Size size, Canvas canvas, paint, rCircular) {

double _rRectStartX = size.width / 3 + 56.0,

_rRectStartY = size.height / 3 * 2,

_rRectEndX = size.width / 3 * 2 - 20.0,

_rRectEndY = size.height / 3 * 2 + 40.0;

Rect rect =

Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);

RRect rRect = RRect.fromRectAndCorners(rect,

bottomLeft: Radius.circular(rCircular),

bottomRight: Radius.circular(rCircular),

topLeft: Radius.circular(0.0),

topRight: Radius.circular(0.0));

canvas.drawRRect(rRect, paint…color = Colors.white);

}

6、绘制顶部弧形区域

//绘制顶部半圆

void _drawTopArc(Size size, Canvas canvas, paint) {

最后

在这里小编整理了一份Android大厂常见面试题，和一些Android架构视频解析，都已整理成文档，全部都已打包好了，希望能够对大家有所帮助，在面试中能顺利通过。

image

image

喜欢本文的话，不妨顺手给我点个小赞、评论区留言或者转发支持一下呗

/ 3 * 2 + 40.0;

Rect rect =

Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);

RRect rRect = RRect.fromRectAndCorners(rect,

bottomLeft: Radius.circular(rCircular),

bottomRight: Radius.circular(rCircular),

topLeft: Radius.circular(0.0),

topRight: Radius.circular(0.0));

canvas.drawRRect(rRect, paint…color = Colors.white);

}

6、绘制顶部弧形区域

//绘制顶部半圆

void _drawTopArc(Size size, Canvas canvas, paint) {

最后

在这里小编整理了一份Android大厂常见面试题，和一些Android架构视频解析，都已整理成文档，全部都已打包好了，希望能够对大家有所帮助，在面试中能顺利通过。

[外链图片转存中…(img-eDfY3JoN-1716043188108)]

[外链图片转存中…(img-SQC61eNW-1716043188109)]

喜欢本文的话，不妨顺手给我点个小赞、评论区留言或者转发支持一下呗

Flutter 自定义控件-仿照安卓和抖音图标绘制(1)，含小米、腾讯、阿里
2401_84149256的博客
04-08 432
UI这块知识是现今使用者最多的。当年火爆一时的Android入门培训，学会这小块知识就能随便找到不错的工作了。不过很显然现在远远不够了，拒绝无休止的CV,亲自去项目实战，读源码，研究原理吧！
Flutter 自定义控件-仿照安卓和抖音图标绘制，看完不会的来打我
2401_83692985的博客
04-08 476
paint//背景为纸红色@override@override//背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图paint//背景为纸红色@override@override//背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图paint//背景为纸红色@override@override//背景为纸红色// 设置矩形的半径和圆角的半径相等，效果如下面右图paint//背景为纸红色。
Flutter 自定义单选控件
Android_008的博客
07-17 1202
在Flutter 应用开发中，经常会遇到各种单选效果，虽然官方提供了Radio组件，但是并不能满足我们实际的开发需求，所以往往还需要自定义控件才能满足平时的开发需求。下面就平时开发中用到的单选进行介绍： 自定义SegmentBar 对于分段组件大家肯定不会陌生，主要是实现多个分段，实现单选功能，效果如下图。 话不多说，直接上代码： class SegmentBarView extends StatefulWidget { List<String> datas; Function(St
Flutter 自定义UI控件并设置交互能力
z979451341的博客
06-26 8267
1.自定义UI控件首先UI控件按照是否能够与用户交互分为交互型控件和非交互型控件。下面就是创建了一个交互型控件，只是关于界面是空的，如果我们继承StatelessWidget就是创建了一个非交互型控件，比如我们最顶层的容器MyApp就是一个非交互型控件至于MyWidgetState是来实现UI控件的界面class MyWidget extends StatefulWidget { @overr...
Flutter开发实战 高仿微信（一）首页
kyl282889543的博客
07-13 1980
flutter 开发微信项目 （一）flutter 开发微信项目 （一）1. 开发HomePage页 flutter 开发微信项目 （一） 源码地址：flutter_wetchat 1. 开发HomePage页 运行效果： 功能介绍 代码讲解 KYLRootPage是根页面 class KYLRootPage extends StatefulWidget { @override...
Flutter实现原生UISwitch效果的教程
从描述中我们可以看出，本次的目标是创建一个在视觉和交互上模仿iOS系统中UISwitch效果的Flutter控件。Flutter的Widget系统允许开发者通过继承StatelessWidget或StatefulWidget来创建自己的组件。StatefulWidget在...
Flutter(十二)——广告轮播效果与换肤设计
热门推荐
李元静
02-02 2万+
本文目录轮播图效果轮播子图片代码PageView代码Scaffold全局主题设置 轮播图效果 在各种主流的App当中，比如说淘宝，京东等，打开首页基本能看到顶部都有一个轮播的商品广告图片，这种轮播图的效果，基本每个App都有在用，而在Flutter开发中，它也给我们提供了这样一种控件：PageView。 使用起来也是非常的简单，每张图片就是它的子元素，右多少个图片子元素，就右多少个轮播图，而且不...
flutter 自定义控件RenderObjectWidget使用
最新发布
书弋江山的博客
03-24 416
CustomWidget的自定义组件的注释还是比较清晰的。
Flutter基础学习之自定义组件
09-05
Flutter基础学习之进阶。里面有一些开发中需要的基础组件。
Flutter 笔记 | Flutter 自定义组件
川峰的博客
05-29 3057
Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定义组件，Flutter自定
flutter之自定义图标
qq_29407683的博客
03-18 3355
1、第一步 咱们要先确定一下自定义图标的网站，网站地址如下：http://fluttericon.com/。 2、第二步 选择咱们需要的图标，然后点击download。 3、第三步 首先将咱们下载下来的ttf文件放到fonts的目录（其中fonts目录是本人自建）下,其次将.dart文件放到config的目录下面（其中config目录是本人自建）。 4、第四步 在pubspec.ya...
flutter自定义组件
Dream It Possible
06-29 1150
https://github.com/shang1219178163/flutter_templet_projechttps://github.com/shang1219178163/flutter_templet_projec NumberStepper.dart如果打不开，这里是源码： LineSegmentControl.dart
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-31 6068
一、Flutter 组件简介、 二、Flutter 自定义 StatelessWidget 组件流程、 1、导入父类包、 2、选择继承的父类、 3、设置成员变量及构造函数、 4、重写 build 方法、 5、完整代码示例、 三、Flutter 自定义 StatefulWidget 组件流程、 四、使用 final 修饰 Widget 组件成员变量分析、 五、调用自定义组件、 1、主要方法、 2、完整代码、 3、效果展示、
Flutter使用自定义icon
ding139725的博客
03-13 6945
前言 在flutter中，为我们提供了大量的icon字体图标，当这些图标满足不了我们时，我们就需要使用自定义的icon图标。作为演示，本文章的字体图标文件是在阿里巴巴图标库，下载的。 一、下载自定义的icon文件 在阿里巴巴图标库中，找到自己需要的图标添加至项目中，进行下载 下载后是一个压缩包，解压后我们在这里只需要这两个文件 我们把后缀名为：.ttf 的文件放到flutter文件的assets/...
Flutter系列教程之(4)——自定义Widget控件及相关知识
软件开发
02-25 1585
我们需要创建我们自定义的Widget控件，只需要创建一个类去继承和这两个类即可，这两个类都是Flutter提供的基本Widget类，不过在使用上有所区别是静态Widget，而则是动态Widget与唯一不同的特点，就是其提供了一个setState()的方法，我们可以调用此方法，更新数据，从而会让该Widget的内容发生改变(本质上与 MVVM 模式类似)那什么是静态Widget和动态Widget分别是什么意思呢？静态Widget。
flutter toast 自定义控件
仰望星空
03-10 1288
虽然fluttertoast很好用,还是决定自定义一个,毕竟产品经常需要,黑点,亮点,大点小店,带点图片的…需求,如果需要图片等特殊效果,该下UI即可 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class ToastUtils { static OverlayEntry _...
聊一聊Flutter自定义组件
大模型训练
07-07 562
何时需要自定义组件Flutter提供的现有组件无法满足业务需求，或者需要封装一些通用组件，多处复用时Flutter中自定义组件有三种方式：通过组合其它组件自绘组件实现RenderObject组合其它Widget该方式通过拼装其它组件来组合成一个新的组件。自绘组件若遇到无法通过现有的组件来实现需要的UI时，可以通过自绘组件的方式来实现，例如一个颜色渐变的圆形进度条。实现RenderObjectFlutter提供的自身具有UI外观的组件，如TextImage。
Flutter-vector-icons: 自定义图标解决方案的介绍
- 对于需要自定义图标的情况，Flutter提供了Icon类和IconTheme，允许开发者绘制自定义的矢量图形。 8. 拓展功能和社区支持 - flutter-vector-icons不断更新，集成最新的图标集以满足开发者的需要。 - 社区支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值