<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[掘金博客名称相同]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/asdf11111_____</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; asdf11111_____]]></copyright><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（十一）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/157333467</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/157333467</guid><author>asdf11111_____</author><pubDate>Sat, 24 Jan 2026 23:05:29 +0800</pubDate><description><![CDATA[当我们点击某个区域想选中其中的某个元素并进行操作，但是并不想调整元素的层级，恰好这个元素露出来的东西很少，或者干脆就是一个透明的相框，我想要操作相框下面的图片，那么此时就需要额外的功能来辅助我们实现这块功能。目前我们响应手势的区域虽然是整个变换区域，但是实际上只有手指在元素内部的时候才能执行操作，当元素堆叠在一起的时候，变换操作将会变得很不流畅，因为响应手势的元素始终是最顶层元素，元素之外就自动执行了清空操作。粗糙的实现了功能，大致的效果就是如此，这样就可以让我们选中非顶层元素了，而且也可以很好的操作。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（十）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/156432082</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/156432082</guid><author>asdf11111_____</author><pubDate>Tue, 30 Dec 2025 21:33:55 +0800</pubDate><description><![CDATA[首先我们来简单的限制移动的边界，通过上面我们知道，移动的点都是通过左上角的坐标定位的，在元素旋转后，判断边界就应该以最接近边界的顶点去计算，我们首先获取四个顶点的坐标，再通过通过顶点坐标的最值判断边界。之前在未旋转的时候，我么通过左上和右下值来判断的吸附，现在我们旋转了元素，再用之前那个吸附方法，判断的永远也只是初始的蓝色矩形，这样很不和逻辑，当旋转后，理应是旋转后的某个顶点在吸附阈值内就进行吸附，所以我们通过用最值顶点来判断吸附。接下来就是实现吸附效果了，有了辅助线就可以很好的理解吸附的原理。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（九）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/156342623</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/156342623</guid><author>asdf11111_____</author><pubDate>Sat, 27 Dec 2025 22:47:12 +0800</pubDate><description><![CDATA[对于文本元素，文本元素的高度是由文本自身的样式来决定的，所以我们限制文本元素只能缩放宽度，高度自动计算。基础的功能差不多就完成了，接下来主功能就还有一个，那就是保存，我们不知道这个功能是否还存在编辑，如果不存在，直接将该结构转成图片返回即可，所以我们保存就直接将数据和图片都传递过去即可。可以看到，随着功能的增加，可能就需要对之前的逻辑做更改，不过因为抽取了配置，很多地方就只需要加入少量的代码即可实现部分功能。前面我们简单实现了图片元素和文本元素的新增，优先实现的功能，很多地方还可以优化。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（八）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/156169169</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/156169169</guid><author>asdf11111_____</author><pubDate>Mon, 22 Dec 2025 23:04:36 +0800</pubDate><description><![CDATA[有许多方式实现扩展功能区域，第一种就是划分区域，划分下面为属性扩展区域，元素变换区域则会相应的压缩，所以涉及到变换的计算有使用到容器宽高属性的都要变化；按照部分经验，这种功能操作的大多数是图片+文本，所以我们以这两种来划分元素的类型为例，后续如果有新的类型再增加即可。这样我们就简单实现了属性的修改，样式什么的后面有时间再慢慢调整，现在只是功能为主，毕竟真实的开发总会有UI的。前面我们实现了元素的变换操作，单纯的变换操作只是为了后续功能的实现，接下来我们就开始扩展容器的属性。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（七）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/156169095</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/156169095</guid><author>asdf11111_____</author><pubDate>Mon, 22 Dec 2025 22:57:40 +0800</pubDate><description><![CDATA[前面我们抽取了区域的配置，主要实现了对内置区域的自定义，现在有个问题，如果是我们想自定义某个特定区域实现特定的效果，现在的数据都在部件的内部，如果不能提升到外部，那我们不能由外界传入貌似也没有什么用，因为功能需求都不一样，只有尽可能的以我现在的能力去进行封装。可以看到我们定义了左下角为自定义区域，其他内置的区域配置也生效了，接下来我们来实现这个区域的方法。如果还需要实现其他自定义可能，可以按照类似的方式来实现。好了，今天的分享就结束了，后续就开始实现容器属性的设置了，比如辅助线，比如撤销还原。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（六）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/156132523</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/156132523</guid><author>asdf11111_____</author><pubDate>Sun, 21 Dec 2025 18:33:22 +0800</pubDate><description><![CDATA[我们使用的顶点坐标顺序是顺时针，第一次循环 i = 0，j = 3，那么i就是左上顶点，j就是左下顶点，两个顶点刚好构成矩形左边；这样就简单实现了元素的删除功能。前面有人提到在元素内部的那块判断怎么那么写的，看来对知识渴望的小伙伴还是有，这样挺好的。这样就得到了代码中的判断依据，至于循环遍历顶点的写法，就是为了获取相邻两个顶点，这个就可以带入square坐标和循环去算一下就行了，保证每次循环都是相邻的两个顶点。可以看到，我们将旋转区域移到右下角了，并且不使用缩放区域，这样就简单完成了区域自定义的配置。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（五）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/156118443</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/156118443</guid><author>asdf11111_____</author><pubDate>Sun, 21 Dec 2025 00:04:52 +0800</pubDate><description><![CDATA[之前我们使用的是以宽度为基准实现的元素缩放，这样如果y变化大于x的变化，就会不是很协调，现在我们使用新的一种计算方式，以初始按下的坐标和中心点坐标的距离和结束点坐标到中心点坐标的距离来计算缩放的比例，通过这个比例再去计算宽高，这样可能稍微会协调一点。前面我们简单实现了属性的抽取和元素的移动，接下来我们实现元素的旋转（因为旋转涉及到角度的变化，所以先行实现），因为原理在之前的单个中已经分析了，所以这里依然以代码结合详细注释来说明，只对特别注意的点单独提取出来说明。可以看到，这样就简单实现了多个元素的变换。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（四）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/155992753</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/155992753</guid><author>asdf11111_____</author><pubDate>Tue, 16 Dec 2025 23:26:17 +0800</pubDate><description><![CDATA[这里给出一种确定响应区域的计算方式，基于元素本身创建一个坐标系，坐标原点为元素的左上角，使用元素的总体宽高和响应区域中心点来计算出一个比例，通过这个比例就能让我们使用区域内包括区域外的任意区域来做响应的区域，例如，元素整体宽高为20*20，我需要响应区域的中心点在右上角(20, 0)，所以这个比例就是 （x: 20/20，y: 0/20）。现在是多个元素的，当前正在操作的肯定只有一个元素，所以按下的时候得选中元素，后续的操作就是作用于选中的元素，因为还只是移动操作，所以也先不考虑旋转。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（三）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/155894304</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/155894304</guid><author>asdf11111_____</author><pubDate>Sat, 13 Dec 2025 23:56:39 +0800</pubDate><description><![CDATA[然后我们继续考虑热区的问题，当旋转一定角度的时候，再次点击对应的热区，就无法响应事件了，因为旋转后热区坐标已经发生改变，所以我们得对点击判断中加入角度的影响。值得注意的是，现在我们研究的是单个元素，所以坐标系就是以元素自身形成的（响应的事件也是在这个元素上），等后期要实现多个，坐标系就得以外层容器作为参考了。要实现旋转，我们就得知道元素的旋转角度，主要得出旋转的角度，那么实现起来就比较简单，所以简单使用数学的知识分析一下吧。这样就对单个元素实现了变换的效果，前置就算时铺垫完成了，后续就开始实现多个的。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（二）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/155790978</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/155790978</guid><author>asdf11111_____</author><pubDate>Wed, 10 Dec 2025 22:19:21 +0800</pubDate><description><![CDATA[接下来我们实现以元素中心为缩放中心的效果，如果我们想以元素的中心为缩放的中心（现在的中心是元素的左上角），这样在缩放过程中，对应的坐标值也得更着变化，缩放从原来的一边转换为双边。这样就简单的实现了缩放，如果没有其他的要求，不在意拉伸挤压的话，这就完成了，实际上肯定有需要保持等比例缩放（例如对一张图片的缩放，如果拉伸挤压后就很难看了）。这样就简单实现了元素的缩放，因为只是快速演示，所以考虑的情况没有那么复杂，部分极限的情况也没有做限制。可以看到，我们抽取了响应的区域，当点击对应的区域则可以实现响应的操作。]]></description><category></category></item><item><title><![CDATA[Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（一）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/155428256</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/155428256</guid><author>asdf11111_____</author><pubDate>Sun, 30 Nov 2025 22:20:29 +0800</pubDate><description><![CDATA[为了解决这个问题，我们可以使用下面这种方法，将手指按下，移动，抬起看做一个操作动作，用变量记录当前的初始的x和y，手指按下记录按下的坐标，手指移动时记录移动到的坐标，通过按下的坐标与移动的坐标计算移动的距离，那么就有：当前的值 = 初始化值 + (手指当前移动的值 - 手指按下的值)；这样就达到了我们的要求。现在我们对边界做出了限制，但新的问题又出现了，我们手指拖动到容器外面，依然在响应事件，此时移动到容器内的过程中，元素也在跟着移动，待完全将手指移动到容器内，元素和手指已经隔了很长一个距离了。]]></description><category></category></item><item><title><![CDATA[flutter 封装一个 tab]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/155395586</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/155395586</guid><author>asdf11111_____</author><pubDate>Sat, 29 Nov 2025 21:22:59 +0800</pubDate><description><![CDATA[上面我们就完成了一个简单的tab封装，但是目前还不算很通用，例如我想要TabBar在下面，TabView在上面，这个就不能直接使用了，得更改内部代码，所以继续继续封装，允许用户自定义方向。一种是使用PageView，这个天生就支持上下滑动，但是如果使用这个，得维护PageController，同步TabBar的切换，有兴趣的可自行试一下。另一种方式依然是旋转，我们将其旋转90度后，自然而然滑动手势从左右变成了上下，不过需要注意的是，子项依然要反方向旋转90度还原。]]></description><category></category></item><item><title><![CDATA[flutter实现背景容器与滚动容器的联动滚动]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/155363004</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/155363004</guid><author>asdf11111_____</author><pubDate>Fri, 28 Nov 2025 22:09:00 +0800</pubDate><description><![CDATA[当滑动可滚动的前景容器时，需要判断背景容器是否滑动到底部，如果背景没有滚动到底部，需先滚动背景容器，如果背景已经滚动到底部，则滚动前景容器，这样来实现联动滚动效果。起初分析用双层滚动容器实现，外层滚动容器放背景，内层滚动容器放列表，通过动态控制内层容器的可滚动属性来实现效果。其实进一步分析不难发现，当内层容器覆盖在背景上时，当内层容器滚动，背景跟着一起滚动就行了，所以可以监听滚动容器的滚动，当背景没有滚动到底部时，就设置背景容器距离顶部高度为滚动容器滚动的距离即可。为透明的，那么底部滚动内容滑动就会被。]]></description><category></category></item><item><title><![CDATA[基于CupertinoPicker封装日期选择器]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/143437095</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/143437095</guid><author>asdf11111_____</author><pubDate>Fri, 01 Nov 2024 17:35:27 +0800</pubDate><description><![CDATA[实现这个需求，可以找一下三方插件，应该有很多插件实现了这个功能，不过我们项目使用到的比较简单，就自行实现了一个，这里做一下简单的记录。因为实现类似于ios风格的可滑动选择的小部件，所以通过查阅官方文档，找到了小部件 =>]]></description><category></category></item><item><title><![CDATA[flutter自定义table_calendar]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/143234584</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/143234584</guid><author>asdf11111_____</author><pubDate>Fri, 25 Oct 2024 14:57:20 +0800</pubDate><description><![CDATA[如果我要对头部新增一些按钮图标，或者控制某些样式，这样我们就需要使用和属性来自定义头部// 用于自定义切换上一月和下一月@override),// 监听日历组件创建，设置_pageController},// 可选时间区间的开始时间// 可选时间区间的结束时间// 当前获取焦点的时间// 所以自定义头部Builder，我们就可以自定义头部小部件了Stack(left: 20,top: 3,// 处理事件},width: 26,),),),Row(]]></description><category></category></item><item><title><![CDATA[uniapp封装原生 firebase-analytics 插件]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/143052984</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/143052984</guid><author>asdf11111_____</author><pubDate>Fri, 18 Oct 2024 14:35:21 +0800</pubDate><description><![CDATA[因为有这个需求，先查看官方文档，官方提供了上传配置文件功能，但是并没有开放对应的api，然后又找了插件市场里面，并没有合适的，所以就自己简单弄了一下，后续有其他需要原生的功能也可以使用类似的方式实现。这里只是一个简单的记录流程，方便后续做参考。]]></description><category></category></item><item><title><![CDATA[uniapp 小程序端简单实现一个拖动排序]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/135704592</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/135704592</guid><author>asdf11111_____</author><pubDate>Fri, 19 Jan 2024 18:22:11 +0800</pubDate><description><![CDATA[在小程序端实现这个功能没有 web 端那么方便，在插件市场也没有找到合适的，所以简单实现一个。我们知道，一般来说要实现拖动排序的列表大概率没有很长很长，所以就不做长列表的优化了。微信小程序可以单独使用 wxs 优化当然实现方式多样，适合自己的才是最好的。通常来说，部分列表项拥有自己特定的响应事件，例如点击操作，我们实现拖动最好和这些事件避开。首先确定列表项的排列方式，我们选择的是定位来布局列表项，因为这样方便操作每个元素的位置，直接动态改变元素的定位信息即可。接着就是怎么确定元素的位置信息，包括后面如何判断]]></description><category></category></item><item><title><![CDATA[小程序 canvas 绘制文本实现换行，设置字距]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/133794314</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/133794314</guid><author>asdf11111_____</author><pubDate>Thu, 12 Oct 2023 16:47:44 +0800</pubDate><description><![CDATA[实现始终都是按照自己项目的需求来的，不同的项目，近似的一个需求可能实现的方式就稍微不同。]]></description><category></category></item><item><title><![CDATA[记录元素平移、旋转、缩放和镜像翻转（4）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/132897605</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/132897605</guid><author>asdf11111_____</author><pubDate>Fri, 15 Sep 2023 10:56:09 +0800</pubDate><description><![CDATA[记录元素平移、旋转、缩放和镜像翻转（4）
接下来就是一些收尾的工作，实现镜像翻转功能。这个功能就相对来说比较简单了，这里只做简单的实现，使用 css 即可。
首先为元素新增字段来确定翻转效果，这个效果就两种，翻转和不翻转，所以使用 boolean 值。
/**
 * 处理元素属性
 *
 * @param {Object} options 元素属性
 */
handleOptions(options = {}) {
  // 之前的代码省略......

  // 新增镜像翻转字段
  _options.m]]></description><category></category></item><item><title><![CDATA[记录元素平移、旋转、缩放和镜像翻转（3）]]></title><link>https://blog.youkuaiyun.com/asdf11111_____/article/details/132888015</link><guid>https://blog.youkuaiyun.com/asdf11111_____/article/details/132888015</guid><author>asdf11111_____</author><pubDate>Thu, 14 Sep 2023 18:09:31 +0800</pubDate><description><![CDATA[上面我们实现了抽取区域，对应的区域做相应的事情，基于此，我们可以让外界也传入同样的配置，来实现自己的操作，不过这个操作有部分限制，函数定义在配置对象内，那么 this 指向会变，所以也不能完全方便的使用方法，当然这个也可以更改（等等，这里我有个好sou主意，对于涉及到 this 的地方可以增加可以外界传入，然后可以通过 call apply bind 来更改 this 指向），算了，我反正不想改了！接下来就开始抽取区域，让对应的区域做对应的事情，目前已有的功能有旋转和缩放，所以用这两个为基准开始修改代码。]]></description><category></category></item></channel></rss>