学习
实践
活动
工具
TVP
写文章

【Flutter实战】六大布局组件

明白了 主轴 和 交叉轴 概念,我们来看下 mainAxisAlignment 属性,此属性表示主轴方向对齐方式,默认值为 start,表示从组件开始处布局,此处开始位置和 textDirection 黑色边框是Row控件范围,默认情况Row铺满父组件。 主轴对齐方式有6种,效果如下图: ? verticalDirection 表示子组件交叉轴布局方向: up :从底部开始,并垂直堆叠到顶部,对齐方式 start 底部,end 顶部。 down:与 up 相反。 alignment 属性控制主轴对齐方式,crossAxisAlignment 属性控制交叉轴对齐方式,对齐方式只对有剩余空间行或者列起作用,例如水平方向上正好填充完整,则不管设置主轴对齐方式为什么, 注意:文字为0组件是在下面的。 自定义布局组件 大部分情况,不会使用到 Flow ,但 Flow 可以调整子组件位置和大小,结合Matrix4绘制出各种酷炫效果。

22820

Flutter 按钮,看这篇文章就够了

之前文章文本、图片和按钮Flutter中怎么用中,简单介绍过按钮组件,本篇文章来详细聊聊Flutter中各种按钮组件各种应用场景。 Flutter中,有很多按钮组件,常见有:FlatButton、RaisedButton、OutlineButton、IconButton、ButtonBar、FloatingActionButton 接下来我就来比较一这三者展示效果。 实际上,RaisedButton是立体效果,而FlatButton是扁平化平面效果;OutlineButton是边框按钮,对齐设置背景颜色是不起效果。 有些时候悬浮按钮不能将底部Tabbar上处于中间位置item图标完全覆盖,此时我们就通过设置外边距来调整悬浮按钮位置(主要是上下调整)。

7.2K30
  • 广告
    关闭

    2022腾讯全球数字生态大会

    11月30-12月1日,邀您一起“数实创新,产业共进”!

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

    《Flutter》-- 4.Flutter组件基础

    大多数场景,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。 :文字开始相反方向对齐; TextAlign.justify:两端对齐。 ; OutlineButton:默认是一个带有边框、不带阴影且背景透明按钮,按后边框颜色会变亮,同时会出现背景和阴影效果; IconButton:一个可点击图标按钮,不支持文字,默认没有背景,点击后会出现背景 ; BoxFit.cover:默认填充规则,保证长宽比不变情况缩放以适应当前显示空间,图片不会变形; BoxFit.fitWidth:从宽度上充满空间,高度会按比例缩放,图片不会变形,超出显示空间部分会被剪裁 textAlign:输入框内文本水平方向对齐方式。 textDirection:输入框内文本方向。 keyboardType:用于设置该输入框默认键盘输入类型。

    19530

    compose--初入compose、资源获取、标准控件与布局

    重组 1.1 安卓传统UI 先来说安卓传统UI,大致流程就是xml中我们定义了一系列布局(组件)和控件后,由ActivityonCreate()触发xml解析,生成View树:DecorView 当然了,我们只需要关注onCreate()中设置xml即可,由于布局是一次性加载,即生成View树过程是同步进行 1.2 compose UI 对与compose而言,每个可组合函数(组件) append("你好\n") } }, selection = TextRange(2)// 光标默认显示第二个字符位置 = ButtonDefaults.buttonElevation(),//阴影,默认、按、不可用等状态阴影 border: BorderStroke? IconButtoncontent需要传入一个Icon组件,其他用法和Button相同: @Composable fun MyIconButton() { IconButton(

    1820

    Flutter 组件集录 | 从图标按钮看组件封装

    Widget build(BuildContext context) => Icon(_getIconData(Theme.of(context).platform)); } 可能有人会疑惑 : 为什么这么简单逻辑 这不得不让图标按钮占位区域扩大,当多个 IconButton 排列时,如下所示,默认情况,水波纹区域太大,又会显得拥挤: 不过可以通过 splashRadius 来控制水波纹扩散半径。 ---- 最后说一 useMaterial3 处理, IconButton#build 方法中,通过 Theme 数据 useMaterial3 属性校验是否启用 Material3 : 通过启用 extended-fab 中查看详情,也可以该网站中看一其他 material3 风格: ---- 它继承自 StatelessWidget ,表明它是基于已有组件封装构建逻辑,从而形成新组件 String toString() => '<default FloatingActionButton tag>'; } 如果 heroTag 非空,会在构建逻辑中套上 Hero 组件: 这就有一个问题:界面跳转时同一界面中不能有两个相同

    6410

    Android Compose 新闻App(五)Room复杂数据、AlertDialog弹窗、页面导航

    val deadCount: Int = 0, val deadIncr: Int = 0, val suspectedCount: Int = 0 ) 注意看这个转换器添加位置 ,将变量赋值为false,然后就是弹窗一些基本参数,注意添加代码位置,如下图所示: 下面运行一: 效果还是不错,下面要显示数据了。 四、页面导航   你可能听过Compose页面导航,也见过很多人写导航,但很少有像我这样,现在才来弄导航为什么这么说呢? 因为导航最好是项目搭建初期就构建好,而不是现在再来弄,这很耗时间,但是又不能不做,因为要符合Compose使用,先来说一现在是什么业务场景,我们一个页面中显示了列表,当要查看详情时,进入另一个页面 那么我们EpidemicNewsListPage可组合函数中增加一些内容,然后运行一,如下图所示: 同样我们RiskZoneDetailsPage中也增加一个Text, 然后

    28410

    Flutter 入门指北之基础部件

    当然,不是说 StatelessWidget 不能实现修改界面数据功能,这就需要涉及到 状态管理 概念了,后面有机会再讲,这边先埋坑【坑1】 Flutter Scaffold 进入 App 后就需要构建界面了 Scaffold 是否需要被展示屏幕最上层 }) 来张图吧,简洁明了 ? 间距等等属性,这边就不继续展示 TextStyle 构造函数了,不然我怕大家都不想继续看了,稍后通过例子来说明 this.textAlign, // 文字对齐方式,包括左对齐,右对齐,居中等, Button Flutter 提供了各种类型 Button 几乎是大同小异,这边就抽取一些比较常用展示效果,常用主要有 RaisedButton 、FlatButton、IconButton、 如果该参数传入值为 null 那么这个按钮就不可点击状态,无点击效果,等会可以例子中查看。还有就是 child 参数,这里就是传入你需要展示内容,比如 Text、Icon 等等。

    16630

    前端成神之路-CSS高级技巧

    5.2 精灵技术讲解 CSS 精灵其实是将网页中一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置某个小图,要想精确定位到精灵图中某个小图。 ? 属性精确地定位。 5.3 精灵技术使用核心总结 首先我们知道,css精灵技术主要针对于背景图片,插入图片img 是不需要这个技术精确测量,每个小背景图片大小和 位置。 5.4 制作精灵图(了解) CSS 精灵其实是将网页中一些背景图像整合到一张大图中(精灵图),那我们要做,就是把小图拼合成一张大图。 大部分情况,精灵图都是网页美工做。 我们精灵图上放都是小装饰性质背景图片。 插入图片不能往上放。 我们可以横向摆放也可以纵向摆放,但是每个图片之间留有适当空隙 我们精灵图最低端,留一片空隙,方便我们以后添加其他精灵图。

    44230

    字符串str.format()方法个人

    索引可以重复引用,输出 索引数值就是后面位置参数放入一个元组来取值过程,所以索引数值不能大于元组里面位置参数最大索引值,否则报错 print('我身高{0},年龄正好{1},{2}长。'. # 菩提老祖变成了葡萄,藏进了至尊宝裤裆里,为什么不变苹果而是葡萄呢? 如果指定填充字符,则必须要同时指定对齐方式 对齐方式: <    左对齐 >    右对齐 ^    居中对齐 =    正负号和数字之间填充(仅对数字类型有效)可以输出类似:+00000012 指小数点后面展示小数位数 对于非数字类型,指最大字段宽度 整数类型不能指定精度,会报错 下面看示例吧: #传入参数后面用冒号:写入规定格式:.4f(取4位小数) 结果为:3.1416 # ,特别是处理更复杂格式化输出过程时候,可以更精确进行达到输出目的,它集成方法可以说比较繁杂,很多方法个人认为用处不大,仅仅是锦上添花作用,个人认为只要掌握前面几个简单位置参数、关键字参数、元组

    20020

    Flutter TextField详解

    先看一源码,重要或常用属性会有注释。 TextCapitalization.none,//大小写 this.style,//样式 this.strutStyle, this.textAlign = TextAlign.start,//对齐方式 IconButton,因为带有点击事件,我们可以点击时候清除TextField中内容。 以上就是图标的介绍,其实除了图标之外,对应位置也可以显示文字或者自定义显示其他widget 比如出了prefixIcon之外还有其他3个属性,用法跟上面介绍到自定义计数器是一样。 关闭软键盘 往往我们事件中提交时候,是需要关闭软键盘 这里我们就用到了focusNode 初始化: FocusNode userFocusNode = FocusNode(); 配置:

    45440

    CSS——06扩展:高级

    为什么需要使用精灵图技术: 为了有效地减少服务器接受和发送请求次数,提高页面的加载速度。 5.2 精灵技术讲解 CSS 精灵其实是将网页中一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置某个小图,要想精确定位到精灵图中某个小图。 属性精确地定位。 5.3 精灵技术使用核心总结 首先我们知道,css精灵技术主要针对于背景图片,插入图片img 是不需要这个技术精确测量,每个小背景图片大小和 位置。 , 做法如下: 我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写, 只保留需要边框颜色,其余不能省略,都改为 transparent 透明就好了 为了照顾兼容性 低版本浏览器

    10140

    关于Shape 两个问题

    昨天教程实际操作过程中有几个地方不太明确,所以今天特地整理一。 用户可以选择4种不同方式来定义一个形状参考框和边框方向(纯简单形状和高度字段形状不能重定向): Align with reference frame of world(与世界参考系对齐):[Menu 当这个项目被点击(一个形状必须预先选择),一个精确参考框架将计算一个圆柱体形状,其z轴与圆柱体旋转轴重合。这比上面的项目更精确(与随机形状主轴对齐),但需要精确定义圆柱体形状。 当单击此项目时(必须预先选择一个形状),将在一个长方体形状上计算一个精确参考系,并与cubid对齐。这比上面的条目更精确(与随机形状主轴对齐),但是需要精确定义长方体形状。 如果形状看起来离常规精确长方体太远,操作可能会失败。 ? 另外,与形状相关包围框方向也可以几何对话框中或通过API修改。 02 Shape properties ?

    26510

    Flink 实践之 Savepoint

    一、背景 什么是 savepoint,为什么要使用 savepoint ? 未对齐 checkpoint 确保障碍物尽快到达接收器。 适用于至少有一条缓慢移动数据路径应用程序,避免对齐时间过长。 增加并发能力方式进行处理; Checkpoint & Savepoint Checkpoint 使 Flink 状态具有良好容错性,通过 checkpoint 机制,Flink 可以对作业状态和计算位置进行恢复 你可以给出 Savepoint 目录或 _metadata 文件路径。跳过无法映射状态恢复 #默认情况,resume 操作将尝试将 Savepoint 所有状态映射回你要还原程序。 相反,这意味着 每一个事件都会影响 Flink 管理状态精确一次。 Barrier 只有需要提供精确一次语义保证时需要进行对齐(Barrier alignment)。

    46040

    Flutter 3.3更新详解

    本次更新包括了IconButton 中等和扩大样式。 想要跟踪 Material Design 3 整合进度,你可以 GitHub 上查看 将 Material 3 带到 Flutter。 应用可以增加最大虚拟内存分配量,但这项操作仅在较新 iOS 版本上可用,并不适用于其他 Flutter 支持 iOS 设备版本。当我们能够在所有位置使用这项优化时,我们会重新进行评估。 布局小数处理 在先前版本中,Flutter 引擎会将合成层精准地对齐像素,用于提升 Flutter 旧款 iPhone (32 位) 上渲染性能。 此外我们还发现,将这些像素对齐移除后,先前黄金镜像测试 (golden image test) 时候出现细微渲染差异也变得更稳定了。 因此 Flutter 将会在未来稳定发行版中移除对 bitcode 支持。我们不希望影响到很多开发者,因此默认情况,Flutter 将不会开启 bitcode。

    12620

    Flutter lesson 7: Flutter组件之基础组件(三)

    web前端中我们使用图标可以自己定义字体与SVG,使用阿里图标上面的图标。Flutter中,google则为我们集成了一些常用图标。 为什么这样说呢? 其余可以使用默认属性,或者你修改一背景色等等。 > {}, ), floatingActionButtonLocation 前面讲的是设置一个浮动按钮,这个浮动按钮位置默认是右下角。 SizedBox(), //中间位置空出 IconButton(icon: Icon(Icons.business), onPressed: () => {}), ], mainAxisAlignment

    50250

    Flutte部件目录-基本部件(二) 顶

    属性 alignment → AlignmentGeometry 如何在边界内对齐图像. [...] read-only, inherited 方法 createState() → _ImageState 树中给定位置为此小部件创建可变状态. [...] 使用IconData中描述字体字形绘制图形图标部件,例如Icons中材质预定义IconDatas。 图标不是互动。 对于交互式图标,请考虑材质IconButton。 一个凸起按钮由一个矩形材料悬停在界面上。 ? 一个凸起按钮是基于Material.elevation在按按钮时提高Material部件。 如果onPressed回调为空,那么该按钮将被禁用,并且默认情况将类似于disabledColor中平面按钮。

    35820

    Flutter 组件集录 | 新一代 Button 按钮参上

    : 返回按钮 IconButton : 图标按钮 CloseButton : 关闭按钮 FloatingActionButton : 浮动按钮 还有一些 多按钮 集成组件,将在后续文章中详细介绍: 按钮样式更改 如果稍微翻一源码就可以看到,这三个按钮本质上是一样,都是 ButtonStyleButton 衍生类。 ,紧约束,按钮尺寸会被锁死。 即使它本身最小尺寸是 Size(64, 36),也不能违背父级约束: 所以,想要修改按钮尺寸,有两种方式: 从 子组件尺寸 边距 入手,调整按钮尺寸。 为按钮施加 紧约束 ,锁死按钮尺寸。 处理对齐方式。

    12510

    用户不填表?那是因为你没用好这7个设计准则

    无线端用户使用移动应用程序或网站都有一个特定目标。通常情况,站在用户和他目标之间都会有一个交互形式 – 。实际情况中,表单被认为是用户使用链路中达到目标的最后一步,这就是为什么它是如此重要。 另一件事是,当用户看到一个文本框里面写,他们可能会认为它已经预先填写并可能因此忽略它。 为什么要左对齐字段标签对无线端表单设计是不好对齐字段标签主要问题涉及手机显示屏尺寸和宽高比。 标签上方字段或浮动标签 表单标签应高于表单域,使用户可以很容易地看到他们为什么都尽显。 占位符文本默认情况显示,但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐标签动画。 原则 7:使用格式宽恕 有些任务实在是要求用户键入非常精确信息,但迫使人们提供特定格式信息,可以具有很好实用性原则相抵触。

    46660

    iOS界面布局之二——初识autolayout布局模型

    随着iphone型号越来越多,屏幕标准也更加多样化,通过autoresizing已经不能满足开发需求,而进行两套布局或者动态代码控制又大大增加了开发者工作量,autolayout出现拯救个这一切 ,所有视图位置都将被相对固定,下面我们只需要按照顺序一一添加即可。 我们会看到如下效果: ? 几点注意: *线是橙色代表警告,我们没有添加足够约束来确定位置或者约束有矛盾。 *如果线中间显示不是等号,而是数字,则是因为视图1和2尺寸设置不等,约束有矛盾。 Left Edges:控件左对齐 Right Edges:控件右对齐 Top Edges:控件上对齐 Bottom Edges:控件对齐 Horizontal Centers:控件水平中心对齐 Vertical 1、autolayout精髓在于足够多约束,autolayout之所以比autoresizing强大,就在于其布局精确性,而精确性正是由约束来提供

    29130

    扫码关注腾讯云开发者

    领取腾讯云代金券