flutter旋转,flutter旋转组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Flutter CustomPaint 使用介绍

CustomPaint class提供了让用户自定义widget的能力，它暴露了一个canvas，可以通过这个canvas来绘制widget，CustomPaint会先调用painter绘制背景，然后再绘制child，最后调用foregroundPainter来绘制前景，CustomPaint的定义如下

CustomPaint的绘制过程都将会交给CustomPainter来完成，CustomPainter是个抽象接口，在子类化CustomPainter的时候必须要重写它的 paint 跟 shouldRepaint 接口，可以根据自己的场景来选择性的重写 hitTest 跟 shouldRebuildSemantics 方法。

canvas--画布，真正的绘制是由canvas跟paint来完成的，画布提供了各种绘制的接口来绘制图形，除此以外画布还提供了平移、缩放、旋转等矩阵变换接口，画布都有固定大小跟形状，还可以使用画布提供的裁剪接口来裁剪画布的大小形状等等。

常用的绘制接口有更多请查看官方文档

Paint---笔画，是用来设置在画布上面绘制图形时的一些笔画属性，如：颜色、线宽、绘制模式、抗锯齿等等。常用属性有更多请查看官方文档

color ：设置画笔颜色

isAntiAlias ：设置画笔是否扛锯齿

shader : 着色器，填充形状或者画线时用到，如果没设置将会使用color

strokeWidth ：设置画笔画线宽度

style ：绘制模式，画线或充满

下面这个例子来自于官方，通过 CustomPaint 画出了一个蓝天跟太阳出来

效果如下：

相关问答

Q1: Flutter动画 --- 平移/旋转/缩放/渐变

在Flutter中Widget动画的核心类有下面这些：

Animation：动画库中的一个核心类，它生成指导动画的值；

CurvedAnimation：将动画过程抽象为一个非线性曲线；

AnimationController：用来管理管理动画，常用的方法有forward()：启动动画；reverse({double from}：倒放动画；reset()：重置动画，将其设置到动画的开始位置；stop({ bool canceled = true })：停止动画。

Tween：AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。

Q2: Flutter Transform使用介绍

窗口小部件(Widget)可以在Paint之前应用Transform进行转换，通过Transform可以对widget进行平移、旋转、缩放等矩阵变换。不像RotatedBox在layout前就对Widget进行旋转操作，Transform是在Widget绘制前进行转换，这意味着在计算Widget的显示需要占用多少空间时，不会去考虑Transform变换。

例子

在垂直方向移动15个单位距离

例子

顺时针旋转45°

例子

放大1.5倍

Q3: Flutter实现堆叠式卡轮播效果

在本博客中，我们将探讨Flutter中的堆叠式卡轮播。我们还将实现一个演示程序，并学习在您的flutter应用程序中使用 stacked_card_carousel 包创建一个带有垂直轮播的堆叠卡。

用于创建带有堆叠卡片的垂直轮播的小部件。下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。它显示了在您的flutter应用程序中如何使用stacked_card_carousel软件包来使用堆叠式卡轮播。它显示了垂直圆盘传送带滑动卡的列表，所有卡向上滑动并堆叠，称为堆叠式卡传送带。它会显示在您的设备上。

堆叠式卡轮播的一些属性是：

在lib文件夹中创建一个名为style_card.dart的新dart文件。

首先，我们创建StyleCard类，将在后续的DEMO中调用它

我们将制作一个 card 控件. 在card控件中, 我们加入一个elevation 属性和一个column控件。在column中, 我们加入一个container用于包含image, title 和 description. 然后在stacked_card_demo页面中使用它。

在lib文件夹中创建一个新的名为stacked_card_demo.dart的dart文件。

现在，我们将创建一个styleCards列表，并在其中添加一个StyleCard类。

我们创建了八个卡片控件，并在其中添加了image，title和description。程序运行后，我们将看到一个卡片列表，当用户向上滑动时，所有卡片都将堆叠在一起；当用户向下滑动时，卡片都将回到原始位置；

效果如下：

Demo地址：

Q4: Flutter 94: 初识 MediaQuery

当我们同时为手机和平板适配编写 app 针对不同屏幕尺寸进行 UI 布局或当用户偏好设置较大字号或是想要最大限度等减少动画等；此时就需要 MediaQuery 来帮我们获取所用设备的信息以及用户设置的偏好信息；

MediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中， MediaQuery 继承自 InheritedWidget 是一个单独的 Widget ，但一般通过 MediaQuery.of(context) 来获取相关信息；