首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter 组件集录】Card | 8 月更文挑战

一、 认识 Card 组件 卡片效果作为 Material Design 中的一员,Flutter 中 Card 组件自然是要有的。源码注释中是这么描述它的:带有轻微圆角和立面阴影的面板。...上层用 Card 组件的包裹后,会有小圆角 + 阴影 的效果,其中 color 属性就是面板的颜色。...,我们还可以自己定义 Shape, 比如下面通过 nStarPath 获取一个多角星的路径,然后在继承自 ShapeBorder 的 StarShapeBorder#getOuterPath 中返回路径...的组件可以发现,这种类型的组件主要的目的就是方便用户使用,其内部都是依赖于别的组件实现的,使用在看 StatelessWidget 时多看看内部的实现方式,就可以将很多组件联系到一块,很多曾经的疑惑点...了解了内部的实现,在使用时,也会多几分底气。那本文到这里就结束了,谢谢观看,明天见~

97940

【Flutter高级玩法-shape】Path在手,天下我有

不知你注意或是没注意组件的shape属性, 可能你觉得没啥用,或说一带而过,今天就来掰扯一下这个ShapeBorder 对象 它的强大远远超出你的想象,不过记住: Path 在手,天下我有,先看下效果...返回一个Path对象,也就是形状的裁剪,这个更厉害 先来看圆角怎么切: 用path.addRRect来添加一个圆角矩形,然后就出现效果了 ?...你所知道的和不知道的一切-填充的环绕原则 ?...Card中使用shape Card是基于Material实现的,可以直接使用shape属性 比如下面的列表题目,可以通过边线来润色一下 没形状 有形状 ? ?...这篇就到这里吧,只是为你打开了一扇大门,究其核心还是path的操作。 不要让框架限制住你,它仅是最底的基层;在其之上的,应是用创造来筑建的大厦和城楼。

3.9K61
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Flutter 组件集录 | RawMagnifier 组件 - 拿起你的八倍镜

    如下所示,背景是一张图片,使用 RawMagnifier 实现了点击拖拽局部放大的效果,看起来还是蛮酷的: 另外,也可以自定义放大镜的形状,如下的五角星: 该组件已收录入 FlutterUnit...RawMagnifier 组件的简单使用 下面来简单使用一下:案例中通过 Stack 将 Image 和 RawMagnifier 叠放在一起,并且居中对齐。...可以配置装饰效果:从源码来看,可以定义放大镜的透明度、阴影和形状: 如下所示,0.9 的透明度可以看出一点底部的图案,去掉了边线。...手势交互 上面就是 RawMagnifier 组件的使用方式,那如何实现按下展示放大镜、拖拽更新位置、抬起取消呢?答案很简单:监听手势事件。...至于 RawMagnifier 内部的实现原理,有机会再单独分析一下。那本文就到这里,谢谢观看~

    46020

    【Flutter 组件集录】ClipPath| 8月更文挑战

    ClipPath 的构造方法中可以,传入 clipper 和 clipBehavior 两个参数,分别代表裁剪路径和 裁剪行为。 final CustomClipper?...ClipPath 的简单使用 clipper 类型为 CustomClipper ,可以看出它是一个 抽象类,所以无法直接实例化对象,所以需要找到可用实现类,或自己实现。...如下,是通过 CircleBorder 和 RoundedRectangleBorder 两个形状进行裁剪的案例。...如下是一个简单的爱心路径裁剪,这里使用的贝塞尔曲线,正好也来看一下 antiAlias 和 hardEdge 的表现效果,你放大一下可以看出使用 hardEdge 类型的裁剪效果周围有明显锯齿。...三、ClipPath 的源码实现简看 实现,它继承自 SingleChildRenderObjectWidget。

    74530

    Flutter 绘制番外篇 - 圆中取形

    前言: 对一些有趣的绘制 技能和知识, 我会通过 [番外篇] 的形式加入《Flutter 绘制指南 - 妙笔生花》小册中,一方面保证小册的“与时俱进” 和 “活力”。...因为上面以水平方向的 0° 为起点,是上下对称。视觉上,我们更习惯于 左右对称。想实现如下的左右对称 的正 N 边形,其实也很简单,在计算点位时逆时针旋转 90°即可。...最重要的一步是找到角度偏移量 α 和 n 的对应关系,不难算出: α = 180°- 180°*(n-2)/n/2-90° = 180°/n 注: n 边形的内角和为 180°*(n-2) 上面为了方便理解...close(); } } 3、路径的作用 路径是绘制操作的基石,它的作用可以说非常多,可以根据路径进行合并、裁剪、描边、填充、运动等。...如下是自定义 ShapeBorder 形状进行裁剪: ClipPath( clipper: ShapeBorderClipper(shape: MyShapeBorder()), child

    74620

    flutter系列之:Material中的3D组件Card

    简介 除了通用的组件之外,flutter还提供了两种风格的特殊组件,其中在Material风格中,有一个Card组件,可以很方便的绘制出卡片风格的界面,并且还带有圆角和阴影,非常的好用,我们一起来看看吧...shape是Card的形状,它是一个ShapeBorder对象,有很多已知的实现,比如CircleBorder,RoundedRectangleBorder,ContinuousRectangleBorder...borderOnForeground表示是否将Card的border在child之前展示。 clipBehavior是Card的裁剪规则。margin是card周围的空白部分。...不同的ListTile组件,可以用Divider来进行分割,让界面更加美观。...总结 以上就是flutter中Card的使用了,大家可以结合ListTile一起构建更加美观和复杂的系统。

    63510

    我的小工具,用C和python实现远程读卡器,远程读写消费卡片

    服务器端考虑用python,有很多模块可以用,实现起来快。 一、功能简介: 本工具实现一个在电脑上运行的模拟车载机终端。只是功能上的模拟,并不是与车载机完全一样。...全采的车载机记录也可以拿过来用,通过此工具传给采集前置。 实现了供本地电脑调用的读卡库,通信库和记录存储库,所有库的接口均与嵌入式终端程序中的文件库,卡库,通信库接口一致。...二、实现原理: 1.移植嵌入式程序中的文件库到电脑上,实现参数保存和记录存储模块。 2.用电脑上的socket通信封装嵌入式终端上的通信接口。...只要现场的电脑能连外网,就可以把现场电脑的端口映射到外网,可以使用免费的端口映射工具。 4.提供现场映射过的公网IP地址和端口给开发人员。 5.把待读取的卡片放到机器上。...'; del rt; 实现的效果图: ? 用C语言封装一下读写卡接口,可以做个客户端测试了: ? ? ?

    1K20

    【Flutter 实战】各种各样形状的组件

    老孟导读:Flutter中很多组件都有一个叫做shape的属性,类型是ShapeBorder,比如Button类、Card等组件,shape表示控件的形状,系统已经为我们提供了很多形状,对于没有此属性的组件...,直线和圆角平滑连续的过渡,和RoundedRectangleBorder相比,圆角效果会小一些。...clipBehavior参数定义了裁剪的方式,只有子控件超出父控件的范围才有裁剪的说法,各个方式说明如下: none:不裁剪,系统默认值,如果子组件不超出边界,此值没有任何性能消耗。...antiAlias:裁剪而且抗锯齿,此方式看起来更平滑,比antiAliasWithSaveLayer快,比hardEdge慢,通常用于处理圆形和弧形裁剪。...= this.scale; } } scale参数表示间隔的点到圆心的缩放比例,五角星效果如下: 下面用动画动态设置scale,代码如下: class StartClip extends StatefulWidget

    1.3K10

    读唇术OUT了!在喉咙安装传感器,通过皮肤震动录入声音!东大索尼共同研发

    这可不是特工电影里某个天马行空的高科技,最近,东京大学和索尼计算机科学研究所(CSL)共同研发出AI系统“Derma”就能实现上述功能,通过将传感器贴合在喉咙周围的皮肤上,就能实现从口形(无声说话)到语音的转化...据相关研究人员透露,研究灵感最初来源于视听障碍者的触诊唇读法,他们会用手指触摸说话者的嘴唇和下巴周围,以此读取说话内容。也就是说,他们通过触摸障碍者嘴唇周围的皮肤就可以知道他们的说话内容。...只要在下颚皮肤的两个位置安装MEMS(Micro ElectroMechanical Systems)加速度计和角速度传感器,就能通过随着说话发生的下颚运动和舌肌运动引起的从下颚到喉咙的皮肤颤动,进行无声的...Derma的概要图:利用附着在咽喉周围皮肤上的加速度/角速度传感器,通过无声说话获取下颚皮肤运动信息,利用深层学习进行分析和识别 于是,利用生成音素记号系列的连接时间分类(Connectionist Temporal...Classification, CTC)的神经网络进行训练,训练之后的模型就能把无声说话的皮肤颤动转换为语音,转换后的语音合成除了可以输入到附近的具有语音识别功能的数字设备(语音助手)之外,还可以用于帮助因声带损伤等原因而难以发声的用户进行交流

    2.1K20

    Flutter第3天--基础控件(上)

    Widget ---- 4.恭喜达成成就:Widget源码偷窥者, 成就奖励:三张卡片: 卡片初始属性:见白框(PS:属性会随着你的阅历变多哦) - - - ---- 二、Flutter卡牌游戏...一个方便的widget,它组合了常见的painting、positioning和sizing 控件。...,不过能有一个孩子,Card我最喜欢了 这里mark一下Card里的ShapeBorder shape,源码粗略看了一下,可能挺好玩,今天主看控件 ---- 4.IndexedStack--定索引显示...flow.png 代码实现:从网上找了一个FlowDelegate的实现类 核心就是根据位置可以自己绘制孩子的位置(吐槽:源码了竟然没有实现类,给一个也好啊...)...children: formTextList(5), ); ---- 2.FractionallySizedBox 这个挺有意思,儿子随爷爷,父亲(FractionallySizedBox)中间倒把手 可以实现爷爷和孙子之间的尺寸比例联系

    3K30

    Flutter 裁剪类组件 最全总结

    clipBehavior参数定义了裁剪的方式,只有子控件超出父控件的范围才有裁剪的说法,各个方式说明如下: none:不裁剪,系统默认值,如果子组件不超出边界,此值没有任何性能消耗。...antiAlias:裁剪而且抗锯齿,此方式看起来更平滑,比antiAliasWithSaveLayer快,比hardEdge慢,通常用于处理圆形和弧形裁剪。...类型,系统已经定义了很多形状,介绍如下: RoundedRectangleBorder:圆角矩形 ContinuousRectangleBorder:直线和圆角平滑连续的过渡,和RoundedRectangleBorder...欢迎您的加入Flutter的微信交流群(mqd_zzy),欢迎您的加入,让我们一起学习,一起进步,开始我们的故事,生活不止眼前的苟且,还有诗和《远方》。...当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。 今天的文章对大家是否有帮助?如果有,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力!

    66910

    Flutter 裁剪类组件 最全总结

    clipBehavior参数定义了裁剪的方式,只有子控件超出父控件的范围才有裁剪的说法,各个方式说明如下: none:不裁剪,系统默认值,如果子组件不超出边界,此值没有任何性能消耗。...antiAlias:裁剪而且抗锯齿,此方式看起来更平滑,比antiAliasWithSaveLayer快,比hardEdge慢,通常用于处理圆形和弧形裁剪。...= this.scale; } } scale参数表示间隔的点到圆心的缩放比例,五角星效果如下: [1240] 下面用动画动态设置scale,代码如下: class StartClip extends...如果有,请在文章底部留言和点赞,你们的留言、点赞和转发关注是我持续更新的动力!...欢迎您的加入Flutter的微信交流群(mqd_zzy),欢迎您的加入,让我们一起学习,一起进步,开始我们的故事,生活不止眼前的苟且,还有诗和《远方》。

    1.5K00

    Power BI DAX裁剪图片

    有时想给图片加点花样,比如进行圆形裁剪,以下是对比效果,注意人物的毛衣下方,图库不用重新准备,使用DAX可以精准裁剪。 有人可能想到,图片上方叠加一个SVG的圆形标签不就好?...因此,如果需要圆形裁剪和图像清晰度二者得兼,还是需要叠加方式,只不过不能直接叠加一个圆圈,而是用PPT画一个这样的造型,圆圈和正方形相交的地方填充上颜色,圆圈内部无色,将形状另存为SVG矢量图,记事本打开复制里面的代码...,和image标签放到一起。...这样对圆圈外部的毛衣进行了遮挡,圆圈内部没有颜色,使得头像得以显示。蓝色可以设置为和背景色相同,从而产生裁剪效果。 叠加的清晰度和原图保持一致,裁剪后的图片可以用在表格矩阵和新卡片图。...---- 新卡片图是Power BI迄今为止最强大的三大视觉对象之一(另外两个是表格和矩阵) 《卡片图添加异形边框》 《卡片图主次指标组合》 《卡片图总分结构》 《卡片图添加地图》 《卡片图添加下划线

    35330

    Flutter第4天--基础控件(下)+Flex布局详解

    今天一开始借助Image来给大家说一个分析的小技巧,让你不到30行代码画出下图 不要问有什么用,有用的时候自然会用到,有知识储备,留个印象也是好的 ?...图片的颜色混合模式.png ---- Row和Column应该说是非常常用的控件,其中有几个属性挺重要, 本文最后,我将对Flex布局(Row和Column的父类)进行细致的讲解,希望你不要错过。...,Android也好,Flutter也好,套路都是一样的 当你遇到很多种情况的问题时,都可以用这个套路,多分析,你才能巩固自己的知识库 ?...是Row和Column的老爸,现在先忘掉Row和Column 等你认清Flex怎么玩的,Row和Column 也就清楚了 1.先看Flex的的属性 可以看出direction是必须的,类型和枚举都在下面列出了...c2和c3,最终c2和c3的长度是一样的 如果同时Expanded--c1,c2和c3,最终c1,c2,c3长度都是一样的 ?

    2.2K30

    Flutter 卡片选择器

    卡片的边角和阴影有些调整。卡片是用于表示某些关联数据,例如集合,地理区域,膳食,联系方式等。卡片包含有关单个对象的内容和动作。 在本文中,我们将探讨Flutter中 的**Card Selector。...**我们将看到如何在flutter应用程序中使用card_selector包来实现带有动画和堆叠卡的卡选择器的演示程序。...选择器是完全可配置的,动画时间,卡之间的间隙,堆叠卡的尺寸因子。用户可以从左向右或从右向左滑动卡。特定卡上的信息将有所不同。 该演示视频展示了如何在颤动中创建卡选择器。...**onChanged:**此属性用于在卡更改后执行的回调。 **mainCardPadding:**此属性用于左填充列表中的第一个元素。 实现 将依赖项添加到pubspec-yaml文件。...另外,我们将添加mainCardWidth表示列表中第一个元素的宽度,mainCardHeight表示列表中第一个元素的高度,onChanged表示要在更改后的卡片上执行的回调。

    7.4K20

    华为鸿蒙原生应用碰一碰分享

    使用方法: 构造分享数据时,仅传递预览图(thumbnailUri)字段,即可生成此卡片模板。 布局要求 预览图:支持最小宽高比1:4,超出部分将被裁剪。...布局要求 预览图:支持最小宽高比1:4,超出部分将被裁剪。 标题:最大可显示2行,当文本超过2行时,未能正常在屏幕显示的文本用省略号代替。...描述:仅可显示1行,文本超过1行时,未能正常在屏幕上显示的文本用省略号代替。 应用图标:无需配置,系统将默认获取应用图标用于显示在卡片底部。...布局要求 预览图:仅显示在卡片上方,不会铺满整个卡片。 标题:最大可显示2行,当文本超过2行时,未能正常在屏幕显示的文本用省略号代替。...描述:仅可显示1行,文本超过1行时,未能正常在屏幕上显示的文本用省略号代替。 应用图标:无需配置,系统将默认获取应用图标用于显示在卡片底部。

    8410
    领券