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

flutter系列之:flutter中常用的Stack layout详解

如果一个对象被包含在Positioned,那么这个对象就是一个Stack的positioned对象。...接下来的属性是textDirection,textDirection是一个TextDirection对象,它有两个值,分别是rtl和ltr,讲解alignment的时候,我们已经提到过textDirection...我们这个例子,我们Stack设置一个背景图片,然后图片上叠加一个文本。 那么应该怎么实现呢?...首先我们需要设置Stack的alignment方式,我们希望文本和图片的中心重合,也就是说把文字放在图片中间,我们将Stack的alignment设置为Alignment.center。...接下来是一个背景图片,因为原始图片是一个正方形的图片,我们需要对图片进行裁剪成圆形,这里使用一个非常方便的类CircleAvatar来创建圆形的图标: const CircleAvatar(

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

Flutter 布局常用的 widgets(Common layout widgets)

GridView 将多个widget放在一个可滑动的表格。 ListView 将多个widget放在一个可滑动的列表。 Stack 一个widget上面盖上另一个widget。...GridView 小结: 将多个widget放进一个表格 当超出渲染范围,自动提供滚动功能 可自定义格子,也可用下面提供的2种 GridView.count 指定的数目 GridView.extent...ListView ListView能以的形式展示数据。当内容超过渲染范围,自动提供滚动的功能。...Stack 小结: 用来在当前widget上面再盖上一层widget Stack children的第一个widget放在最下,后面的widget会一层层盖上去 Stack的内容不支持滚动 可以裁剪超出范围的子...widget Stack示例1 显示一个CircleAvatar import 'package:flutter/material.dart'; class StackPage1 extends StatefulWidget

1.3K30

【Flutter 专题】122 图解自定义半遮挡头像 SeriesCircleProfile & CircleAvatar

可自定义边框样式; 整个自定义过程主要是通过基础的 Stack 层级和 Positioned 设置偏移量来完成,和尚仅记录一下测试过程遇到的小问题; ?...2.2 本地图片 + 网络图混合 和尚设置一个 List</map 类型的 mixUrlList,Map 存储是否为本地图和图片地址,遍历加载通过 bool 类型判断即可; if...CircleAvatar 和尚在设置圆形头像了解到 CircleAvatar 组件,Flutter 提供了很多绘制圆形的方法,和尚趁此机会简单学习一下 CircleAvatarCircleAvatar...,否则两个背景色之间会自动匹配;默认 backgroundColor 对应 Theme 的主题颜色; return CircleAvatar( radius: 40.0, child:...4. radius & minRadius & maxRadius 了解源码可得,CircleAvatar 是通过 BoxConstraints 来限制半径范围的;若设置 radius 则其余两个不生效

1.1K51

《Flutter》-- 5.Flutter页面布局

:子组件交叉轴方向上的布局顺序; 7)textBaseline:排列子组件使用的基线标准; 8)children:弹性布局里排列的内容。...:流式布局会自动换行或换,runAlignment属性指的是每行或每的对齐方式; 4)runSpacing:每行或每的间距,默认是0.0; 5)crossAxisAlignment:子组件交叉轴上的对齐方式...层叠布局允许子组件以堆叠的方式来排列子组件,它和Web的绝对定位、Android的Frame布局类似。...Flutter使用Stack和Positioned两个组件来配合实现绝对定位,Stack组件主要用于子组件的堆叠操作,而Positioned组件则用于确定子组件Stack组件的位置。...层叠布局,先排列的子组件会出现在视图的底部,后排列的则会显示在上面。Stack组件将子组件分为无定位的子组件和有定位的子组件。

96220

Flutter | 事件处理

注意:该属性不能用于组件树拦截(忽略)事件,他只是决定命中测试的组件大小 translucent:当组件点击透明区域,可以对自身边界及底部可视区域都进行命中测试。...当注释掉最后一行代码,左上角200x100 范围内非文本区域点击(顶部组件透明区域),控制台只会打印 down0,也就是说顶部没有接收到事件,只有底部接收到了 当放开注释后,再点击顶部和底部都会接收到事件...实际上取决于第一次移动两个轴上的位移分量,那个轴的大,那么哪个轴就会在本次滑动事件胜出 实际上 Flutter 引入了一个 Arenal 的概念,直译为 竞技场 的意思,每一个手势识别器(GestureRecognizer...,而竞争者发生在手指按下后首次移动 上例获胜的条件是,首次移动的位置水平和垂直方向上分量大的一个获胜 手势冲突 由于手势竞争最终只有一个胜出者,所以,当有多个手势识别器,可能会产生冲突; 例如有一个...,都可以通过 Listener 直接识别原始指针事件来解决冲突 事件总线 App ,我们经常需要一个广播机制,用以夸页面事件通知,例如注销登录,某些页面可能需要进行状态更新。

2.7K10

10 个派上用场的 Flutter 小部件

今天的文章,我将告诉你我希望早点知道的最方便的几个Flutter小部件。 Spacer Spacer 创建一个可调整的空白空间,它占据 Flex 容器中小部件之间的任何剩余空间,例如行或。...Spacer(flex: 2), Text('End'), ], ), TextButton.icon 创建带有图标的按钮,此小部件取代了使用行的需要...当孩子被过度滚动,动画圆形进度指示器会淡入视图并调用未来来更新可滚动的内容。...RefreshIndicator( child: ListView(), onRefresh: () async {}), RichText 这允许我们一个句子或段落上显示具有不同样式的文本。...您可以包含内联链接、下划线文本、彩色文本等等。 Transform 这个小部件将您的动画游戏提升到一个全新的水平。它可以实现简单的动画,如旋转和缩放到更复杂的动画,如 3D 和倾斜动画。

1.3K20

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

一、认识 CircleAvatar 组件 首先看一下CircleAvatar 是什么意思,可能很多人会把它当成一个圆形图片裁剪的组件。其实源码中有介绍:它是代表用户的一个圆。...拿下面的有道词典来说,CircleAvatar 就是用户的头像。另外他可以设置颜色和子组件,这样当头像不存在,一般以颜色和用户名首字母显示。...二、CircleAvatar 的源码实现 它作为一个 StatelessWidget ,就说明其本身只是依赖于其他组件进行构建,逻辑都集中 build 方法,并不复杂。... build 方法一开始,会通过 Theme.of 获取主体数据,根据暗亮模式设置文字颜色。...CircleAvatar 是基于 AnimatedContainer 组件实现的功能,其中前背景图片被用于 decoration 和 foregroundDecoration 属性

1.5K30

Flutter 标签类控件大全Chip

老孟导读:Flutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程可以将其放在放在一起学习,方便记忆。...RawChip可以通过设置onSelected被选中,设置onDeleted被删除,也可以通过设置onPressed而像一个按钮,它有一个label属性,有一个前置(avatar)和后置图标(deleteIcon...禁用状态设置: RawChip( label: Text('老孟'), isEnabled: false, ) 效果如下: 设置左侧控件,一般是图标: RawChip( avatar: CircleAvatar..., selected: true, showCheckmark: true, checkmarkColor: Colors.red, ) 效果如下: showCheckmark为false,...shadowColor: shadowColor, isEnabled: true, ); } InputChip 以紧凑的形式表示一条复杂的信息,例如实体(人,地方或事物)或对话文本

2K20

给Android开发者Flutter上手指南

Flutter,布局主要由专门设计用于提供布局的小部件定义,并结合控件widget及其样式属性。 例如, 和 行 widgets 控制一个数组的条目 并且 分别垂直和水平对齐它们。...Stack 覆盖容器 (显示其“Text”半透明的黑色背景上) CircleAvatar之上.... iOS ,你给 view 包裹上 ScrollView 来允许用户需要滚动你的内容。 Flutter ,最简单的方法是使用 ListView widget。...当它得到你的 ListView ,它会使用一个 == 判断,并且发现两个 ListView 是相同的。没有什么东西是变了的,因此更新不是必须的。...“ListView” 不同,创建一个 ListView.builder 接受两个主要参数:列表的初始长度,和一个 ItemBuilder 方法。

2K20

【Flutter 专题】13 通过丑丑的【签到】页面学习以下【权重比例】的重要性

和尚今天搭建了一个很丑的【签到】小页面,页面很简单,只有寥寥几个控件,但和尚想通过这个简单的小页面学习一下权重/比例的使用方式,顺便也学习了一下如何绘制圆形效果。 ?...和尚测试用到了如下两种: ClipOval ClipOval 是一个很强大的裁剪子控件为椭圆或圆角的控件;子控件没有特殊限制。...和尚以为 CircleAvatar 是绘制正圆最方便的方式,Flutter 直接提供的绘制圆形的控件,可添加背景色及背景图;且加载网络图片时,网络状态不佳或图片有问题只显示背景色,更人性化...权重/比例 和尚在 Android 开发过程为了适配不同机型,常用到权重 android:weight,这样均分布局起到重要作用;和尚在 Flutter 没有直接发现 weight...Flexible Flexible 默认也是让子控件占满填充整个父类布局,Flexible 的 flex 属性可以调整,若两个 Flexible 控件 A/B,A flex 设为 2,B flex

1.1K51

Flutter构建布局 顶

在这个例子,四个元素排列成一一个图像,两行和一个文本块。 ? ? ? ? 接下来,绘制每一行。 第一行称为标题部分,有三个孩子:一文字,一个星形图标和一个数字。...的第二个子项(也是文本)显示为灰色。 标题行的最后两项是一个红色的星形图标和文字“41”。 将整行放在容器,并沿着每个边缘填充32像素。 这是实现标题行的代码。...此行均匀分布,文本和图标用主颜色绘制,应用程序的build()方法中将其设置为蓝色: class MyApp extends StatelessWidget { @override Widget...第6步:把它放在一起 最后一步,你将这些碎片组装在一起。 这些小部件安排在ListView,而不是,因为小设备上运行应用程序时,ListView会自动滚动。...设计用户界面,您可以专门使用标准小部件库的小部件,也可以使用材质部件的小部件。 您可以混合使用两个的小部件,您可以自定义现有的小部件,也可以构建自己的一组定制小部件。

43K10

neo4j:使用batch-import工具导入海量数据

,indexName是neo4j数据库中将要导入的索引名称,我自己的文件格式如下:     然后,后面的就是节点的property了,没什么特别的要求         2、关系csv文件            ...他github上的说明没有说出一些注意点,这里要特别标明:     第一的起始节点的头,也就是id:string:buyerId这个东西,这个玩意一定要和节点csv文件(上图)定义的一模一样,第二也是如此...3、修改batch.properties文件         主要修改两个地方,1、如果是现有的neo4j数据库中进行导入,请设置:         batch_import.keep_db=true...,可以绝对路径指定到任意位置,第二个参数是节点csv文件,多个csv文件用逗号分隔,如果是压缩包,一定要注意,这里有个坑,不能把所有类型的node都放到一个压缩包,一定要每个类型的node分开压缩,不然它只会导入第一个类型的...    温馨提示:如果节点文件中有中文的话,win环境csv文件很有可能出现乱码,然后就导致换行出现问题,导入程序就会出现假死的状态,表现为程序一直吃内存,可是一直导不进去数据,这时候可以用本人改动过的版本去导入

1.9K31

Human Interface Guidelines — Sharing and Actions

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS的组件(顺便学学英语),以便今后使用的时候完全不虚...例如,在编辑视频,您不会看到文本操作。  activity view ,share extensions  action extensions 上方。 ?...对于action extensions,请包括 app 名称,或者设计一个可识别的界面,并且感觉像是 app 的自然 extension。...必要仅提供一张界面。 ·避免将 modal views 放在 extension 之上 Extensions 默认显示 modal view 。...不要为此使用通知,虽然如果出现问题可以通知用户,但人们不希望每次任务完成都看到通知。 ·使用模板图像作为action extension图标 模板图像使用蒙版来创建图标。

53530
领券