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

【Flutter实战】六大布局组件

明白了 主轴 和 交叉轴 概念,我们来看下 mainAxisAlignment 属性,此属性表示主轴方向对齐方式,默认值为 start,表示从组件开始处布局,此处开始位置和 textDirection...主轴对齐方式有6种,效果如下图: spaceAround 和 spaceEvenly 区别是: spaceAround :第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距一半。...start 底部,end 顶部。...,crossAxisAlignment 属性控制交叉轴对齐方式,对齐方式只对有剩余空间行或者列起作用,例如水平方向上正好填充完整,则不管设置主轴对齐方式为什么,看上去效果都是铺满。...自定义布局组件 大部分情况,不会使用到 Flow ,但 Flow 可以调整子组件位置和大小,结合Matrix4绘制出各种酷炫效果。

1.7K20

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

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

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

你知道吗,Flutter内置了10多种Button控件

禁用状态背景颜色 highlightColor 高亮颜色,按颜色 splashColor 水波纹颜色,按松开会有水波纹效果 以textColor为例,用法如下: RaisedButton(...Colors.red, ... ) 默认情况,PopupMenuButton显示3个小圆点,我们也可以对齐进行设置,设置文字如下: PopupMenuButton( child...IconButton IconButton是一个图标按钮,用法如下: IconButton( icon: Icon(Icons.person), iconSize: 30, color: Colors.red...ButtonBar ButtonBar并不是一个单独按钮控件,而是末端对齐容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行。...设置主轴对齐方式及主轴尺寸: ButtonBar( alignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max,

1.9K30

你知道吗,Flutter内置了10多种Button控件

highlightColor 高亮颜色,按颜色 splashColor 水波纹颜色,按松开会有水波纹效果 以textColor为例,用法如下: RaisedButton...ThemeData.brightness accent:字体颜色依赖于ThemeData.accentColor primary :字体颜色依赖于ThemeData.primaryColor 这3个值MaterialApp...风格关闭按钮,本身是一个IconButton,点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。...用法如下: CloseButton() 效果如下: [1240] ButtonBar ButtonBar并不是一个单独按钮控件,而是末端对齐容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列...RaisedButton(), RaisedButton(), RaisedButton(), RaisedButton(), ], ) 效果如下: [1240] 设置主轴对齐方式及主轴尺寸

2.3K00

Flutter:创建透明半透明应用栏

Flutter 中,您可以通过执行以下操作来创建透明或半透明应用栏: 将AppBar小部件****backgroundColor属性设置为完全透明 (Colors.transparent) 或半透明...(不透明度小于 1 颜色) 将AppBar小部件elevation属性设置为零以移除阴影(默认情况,Flutter 中材质应用栏有阴影) 如果您希望 body 高度扩展到包含应用栏高度并且...body 顶部与应用栏顶部对齐,则必须将Scaffold小部件extendBodyBehindAppBar属性设置为true(默认值为false )。...单纯解释可能很无聊和令人困惑。以下是三个示例,涵盖了最常见实际用例。..., height: double.infinity, fit: BoxFit.cover, )); } } 结论 我们已经浏览了几个关于

3K20

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

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

12.4K30

第126期:如何学习flutter组件

,当我们需要进行某些特殊布局时候,pc端开发中,我们可以使用css样式进行布局,比如定位层级关系z-index。...但是flutter中,它对这些内容也做了一些封装,使得我们可以用组件形式去实现这些特殊布局,比如:stack。...在对事件处理上,pc端,我们可以显示给dom绑定click等事件,flutter中,事件处理更像是组件实例上一个属性,比如: IconButton(...如何学习flutter组件 我个人对前端各种技术非常感兴趣,对于一些新技术,尽管非常乐于去尝试,但是公司项目中并不一定有实践机会,所以我原则是:新技术我可以不用,但是不能不会。...既然是布局,那么我们接下来就会想到容器内block对齐方式,是主轴对齐?还是交叉轴对齐?然后就会想到这两个单词:mainAxisAlignment,crossAxisAlignment。

36350

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() => ''; } 如果 heroTag 非空,会在构建逻辑中套上 Hero 组件: 这就有一个问题:界面跳转时同一界面中不能有两个相同

1.1K10

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(

5.5K30

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

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

1.5K10

Flutter 入门指北之基础部件

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

1.2K30

【Flutter 专题】61 图解基本 Button 按钮小结 (一)

Button 日常中是必不可少,和尚尝试过不同类型 Button,也根据需求自定义过,今天和尚系统学习一最基本 Button; Flutter 中没有 Button Widget,但提供了很多不同类型...this.padding = const EdgeInsets.all(8.0), // 图标周围间距 this.alignment = Alignment.center, // 图标位置...其余属性根据需求而适当调整; 案例尝试 和尚首先尝试最基本 IconButton;长按会由 tooltip 提醒,点击为默认主题色; IconButton(icon: Icon(Icons.android...,可根据 padding 或外层依赖 Container 适当调整位置和大小;默认最小尺寸为 88px * 36px; 案例尝试 和尚定义了一个基本按钮,并监听其高亮改变时状态,与我们常见按钮基本一致...FloatingActionButton FloatingActionButton 是 RawMaterialButton 封装,主要用于浮动屏幕内容之上,一般是位于底部左右角或中间;一般一个页面只有一个

1.4K21

『Flutter』常用组件 按钮、图片

1.前言 经过上一篇文章学习,我们大家可以了解到布局相关组件,但是实际开发中,我们还需要使用到其他组件,比如按钮、图片、文本、输入框等等,这些组件都是我们开发中经常使用,所以本篇文章我们就来学习一这些常用组件...2.常用组件 Flutter中,有多种按钮组件可以用于创建交互式界面。主要按钮组件包括: ElevatedButton:这是一个凸起按钮,常用于主要操作。...它有默认阴影和灰度效果,当按时会有视觉反馈。 FlatButton(现在称为TextButton):这是一个无阴影平面按钮,通常用于不太重要操作。它在按时不会改变外观,提供简洁视觉效果。...当按时,边框和文字颜色会变化,适用于需要强调边框而非背景色场景。 IconButton:这是一个图标按钮,常用于工具栏和对话框中。它可以包含图标而不是文本,适用于空间有限或需要图形化表示地方。...fit (BoxFit): 如何处理图片缩放和对齐。常用值有 BoxFit.fill, BoxFit.contain, BoxFit.cover 等。

24031

flutter系列之:flutter中使用流式布局

简介 我们开发web应用时候,有时候为了适应浏览器大小调整,需要动态对页面的组件进行位置调整。这时候就会用到flow layout,也就是流式布局。...事实上,flutter中,Flow通常是和FlowDelegate一起使用,FlowDelegate用来设置Flow子组件大小和位置,通过使用FlowDelegate.paintChildre可以更加高效进行子...最后一个非常重要属性就是FlowDelegate,FlowDelegate主要用来控制Flow中子widget位置变换。...IconButton,为了不同IconButton之间留一些空间,我们将IconButton封装在Padding中。...运行之后效果如下: 初始状态,所有的组件都是在一起。 当我们点击上面的图标的时候,我们可以得到下面的界面: 图标动画中展开了。

50710

flutter系列之:flutter中使用流式布局

简介我们开发web应用时候,有时候为了适应浏览器大小调整,需要动态对页面的组件进行位置调整。这时候就会用到flow layout,也就是流式布局。...事实上,flutter中,Flow通常是和FlowDelegate一起使用,FlowDelegate用来设置Flow子组件大小和位置,通过使用FlowDelegate.paintChildre可以更加高效进行子...最后一个非常重要属性就是FlowDelegate,FlowDelegate主要用来控制Flow中子widget位置变换。...IconButton,为了不同IconButton之间留一些空间,我们将IconButton封装在Padding中。...运行之后效果如下:初始状态,所有的组件都是在一起。当我们点击上面的图标的时候,我们可以得到下面的界面:图标动画中展开了。

36710

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

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

6.7K30

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

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

45020

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。

2.8K20

CSS——06扩展:高级

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

4.7K40
领券