Flutter-自定义量角器

简介: Flutter-自定义量角器
效果图

在自定义量角器之前,我先说下,小样就是小样,本着实现效果为目的,当然可能会有更好或者更优的方式,就像做数学题目一样,答案只有一个,但是解答思路有很多种,当然有好的建议和方式下面留言哦!

观察量角器

这个量角器吗?有这几个特征。


  • 半圆形(里面有4个半圆)
  • 刻度线(长的、中等的、短的)
  • 有刻度值(正向,反向,注:这里0和180度省去,别问为啥,因为不好看)
  • 10度倍数内刻度线

像这种纯绘制的自定义基本上就是考验对Canvas API使用和数学知识,下面使用Flutter实现。

具体实现
创建Widget

因为尺子是一个静态的,一旦绘制完毕就不需要去改变的,所以说我们直接创建一个

//量角器Widget
class SemiCircleRulerWidget extends StatelessWidget {
}
相关文章
|
1天前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
5 1
|
2天前
|
Dart Android开发
Flutter-自定义短信验证码
Flutter-自定义短信验证码
|
2天前
Flutter-自定义画板
Flutter-自定义画板
11 0
Flutter-自定义画板
|
2天前
|
移动开发 UED 容器
Flutter-自定义可展开文本控件
Flutter-自定义可展开文本控件
|
2天前
Flutter-自定义折叠流布局实现
Flutter-自定义折叠流布局实现
|
2天前
Flutter-自定义三角形评分控件
Flutter-自定义三角形评分控件
|
2天前
|
安全 Android开发
Flutter自定义之旋转木马
本文详细介绍了如何在Flutter中实现子控件按照圆形顺序排列并平分角度,以及如何通过旋转、手势滑动和Stack组件实现3D效果,包括子控件的自动旋转、快速滑动手势响应和前后布局遮挡。
|
2天前
Flutter-自定义表情雨下落动画
Flutter-自定义表情雨下落动画
|
2天前
Flutter-自定义图片3D画廊
Flutter-自定义图片3D画廊
|
2天前
|
缓存 前端开发 API
Flutter-自定义之钟表
Flutter-自定义之钟表