首页
学习
活动
专区
圈层
工具
发布

【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )

文章目录 前言 一、移除顶部状态栏空白 二、帧布局组件 三、透明度组件 四、监听滚动事件 五、完整代码示例 六、相关资源 前言 在上一篇博客 【Flutter】Banner 轮播组件 ( flutter_swiper...插件 | Swiper 组件 ) 基础上进行开发 ; 一、移除顶部状态栏空白 ---- 在 Flutter 界面上方 , 默认有个状态栏 , 显示时间 , 电量 , 网络 , 信号强度等信息 , 这个状态栏是半透明的...; 可以使用 MediaQuery 组件移除顶部状态栏空白部分 ; 调用 MediaQuery.removePadding 方法 , 第一个参数 context 设置成 BuildContext context...ListView 元素滚动时 , 才触发滚动 ; 调用 scrollNotification.metrics.pixels 获取滚动的距离 ; 滚动距离在 0 ~ 100 之间时 , 透明度组件透明度从...ScrollUpdateNotification && scrollNotification.depth == 0) { // 从

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

    IDEA紧急发布 2025.3.1!

    在IDEA2025.3的Maven工具栏里,“Resumebuildfromspecifiedmodule”(俗称“从指定模块继续构建”)按钮突然消失在IDEA2025.3的Maven工具栏里,“Resumebuildfromspecifiedmodule...本想点击“Resume”让Maven从失败模块继续,却发现顶部工具栏只剩Re-run按钮,无Resume按钮。使用快捷键或右键菜单同样找不到对应动作。...根本原因:2025.3前端UI重构时,把MavenResumeFromAction的icon与presenter意外移除,后端resolver逻辑仍在,但前端无入口。...等待系统弹出可用插件推荐通知(您可能需要等待20-30秒,直到右下角出现「建议的插件」​通知)移除筛选条件后,插件即可正常显示。...8.总结这次2025.3.1属于“不装就亏”的急救包:复制粘贴、Spring提示、Git日志、Kotlin彩虹、启动卡顿——五大痛点一次打包带走。

    1.1K20

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

    2)title:导航栏标题。 3)actions:右边的动作区域中可放置多个组件,可以是图标或者文字。 4)flexibleSpace:位于标题下面的空白空间。...5)bottom:位于导航栏底部的自定义组件。 6)elevation:控制下方阴影栏的坐标。...3)销毁阶段 deactivate():当组件的可见状态发生变化时,deactivate()会被调用,此时状态组件会被暂时从视图树中移除。...dispose():当状态组件需要被永久地从视图树中移除时,调用dispose()。调用dispose()后,组件会被销毁,在调用dispose()之前可以执行资源释放、移除监听、清理环境等工作。...4.3.2 按钮组件 Materail组件库中常见的按钮组件: RaisedButton:默认是带有阴影和灰色背景的按钮,按下后阴影会变大; FlatButton:默认是背景透明并不带阴影的按钮,按下后会有背景色

    14.4K30

    双管齐下:同时设计 iOS 和 Anroid

    总体的样式 从 iOS7 以后,Apple 就一直在采用扁平化的设计模式,去除了所有不必要的纹理和阴影等效果——和早些年间的版本完全不同。...按钮样式 这里是 MD 下定义的几个按钮类型: 浮动动作按钮(Floating action buttons):最传统的有边框的按钮,阴影厚重明显,将它们从页面上分离出来。...首先,动作表单都是出现在屏幕的地步,然后在主要内容上罩上一层阴影。然而,它们在创造不同的深度和其他细节方面有着一些不同。 Android 在动作表单上加了一层厚重的阴影,表明它是脱离于原先的内容的。...iOS 的动作表单没有阴影,仅仅是在原先的背景上防止了一个有一定透明度的灰色图案。 ? 下拉按钮 只存在于 Android 上,它允许用户快速选择功能。然而,记住,这并不是 iOS 原生的控件之一。...你可以从库中抽取出你要的部分并将它们用于你的 iOS 或 Android 设计稿中。

    1.7K50

    一个Android沉浸式状态栏上的黑科技

    一种是从设计层面解决,一种是从技术层面解决。 从设计层面解决相对会比较容易一些,同时应该也是大部分App会采用的方案,那就是在背景图的上方再盖一层阴影。...有了这层阴影之后,我们可以让状态栏上的图标始终都是浅色的。即使出现浅色的背景图,由于阴影层的存在,状态栏上的图标依然是可以看得清的。 但如果只是用这个方案解决的话,那么我就不会写本篇文章了。...因为这里我们会采用第二种方案,从技术层面解决。 首先从技术层面进行分析,要解决这个问题,无非就是需要将背景图颜色和状态栏图标的颜色区分开。...当亮度低于0.5时,我就认为这是一个深色的颜色值,那么此时将状态栏设置成深色模式,状态栏图标就会自动变成白色。反之就将状态栏设置成浅色模式,此时状态栏图标就会自动变成黑色。...如果想要学习Kotlin和最新的Android知识,可以参考我的新书 《第一行代码 第3版》,点击此处查看详情。

    2.1K10

    google 分屏 横屏模式 按home键界面错乱故障分析(一)

    进入分屏,按home回主界面 3.点击MMs进入短信,转到横屏模式 4按home键,故障发生 环境描述 android7.0.1 屏幕分辨率 720*1280 手机:eng版本 故障效果(看状态栏,...(它就是想在你分屏隐藏的时候,在状态栏上做个阴影,让你知道你处在分屏模式下而已) 我们看下除了DOCKED_TOP ,此枚举都有哪几个值: 看这个的目的,我们可以看出上面的代码,是否忽略掉了一些状态,...于是,我们看完了代码,从逻辑上分析出来是这个原因,那么事实觉得这个情况会发生吗? 我们补充log,查看下这里的错误时候的值,发现,此处为-1( DOCKED_INVALID),于是得出结论了。...(等会细看) update 这个主要更新我们的参数,主要为移除Divider,然后添加(依据当前屏幕的横竖屏处理),判断是否为最小化,是的话就要想办法隐藏了。...高亮一个信息TYPE_DOCK_DIVIDER(专门给它量身定做的类型,是不是很开心,我们又找到了关键字) remove,移除这个View。

    2K80

    Material Design Lite,简洁惊艳的前端工具箱

    最多用两个调色板 在一个界面中最多使用两个调色板,从主调色板选择最多三个色调,从辅调色板选择 一个强调色。...下面的示例选择indigo调色板中的三个色调(100、500和700),从pink 调色板中选择色调A200作为强调色: 2....工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择 调色板中比基准色略深的色调为700的颜色。...在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色: 4....使用强调色 在大色块上绝对不要使用强调色,对动作按钮、开关或滑动条之类的组件应当使用强调色: 五、图标/Icon Google提供了适用于Material Design的图标字体,我们可以直接在前端样式表中使用

    1.3K10

    iOS点击查看大图的动画效果

    在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了这些事情: 打开时先显示一个半透明的阴影背景; 然后显示一个逐渐变大的图片...// 收起大图 - (void)dismissBigImage { [self.bgView removeFromSuperview];// 移除阴影 // 将大图动画回小图的位置和大小...bself.bigImageView removeFromSuperview]; bself.bigImageView = nil; bself.bgView = nil; }); } 我们先移除阴影背景...这个例子中图片是中规中矩地放在居中位置,你也可以试一下将小图放在其他位置,其实真实的app中很少有居中放置的,从别的地方伸缩放大缩小效果会更加有趣的。...当然了,如果小图的位置不好获取,那就直接设为从屏幕的中点开始缩放,效果也不错。另外,你可能会疑惑为什么我要另行添加一个大图的对象,而不直接对小图的尺寸进行动画呢?

    2.3K20

    更多Kotlin支持Java或退出安卓舞台

    新智元报道 编辑:鹏飞、白峰 【新智元导读】Google今天发布了首个具有最终SDK以及几十个新功能的Android 11 Beta版,重点更新了通知栏和一个电源菜单,新增了Kotlin协程支持,一起来尝鲜吧...这其实也说明一个问题,那就是Android发展至今,整个系统的生态已经非常成熟了,小步快跑就可以了,不需要有太激进的动作。 不过有一点非常值得品味。...新增会话模式,通知消息可设置优先级,Google把通知栏玩到飞起 Bohn认为,Android每次版本更新都会对通知方式做点改动。...而且不得不说,在我用过的所有手机系统中(包括塞班、黑莓、Windows Phone、iOS等),Android通知栏的用户体验一直遥遥领先。...Google越来越多地支持Kotlin一点也不令人意外,Kotlin是开源的,而且跟Java完全互通,很多特性还优于Java。

    1.2K20

    Material Design Lite ,简洁惊艳的前端工具箱

    最多用两个调色板 在一个界面中最多使用两个调色板,从主调色板选择最多三个色调,从辅调色板选择 一个强调色。...下面的示例选择indigo调色板中的三个色调(100、500和700),从pink 调色板中选择色调A200作为强调色: ? 2....工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择 调色板中比基准色略深的色调为700的颜色。...在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色: ? 4....使用强调色 在大色块上绝对不要使用强调色,对动作按钮、开关或滑动条之类的组件应当使用强调色: ?

    1.6K30

    给 Java 开发者的 Kotlin 快速上手教程(Kotlin for Java Developers)v0.1

    给 Java 开发者的 Kotlin 快速上手教程(Kotlin for Java Developers)v0.1 Kotlin 概述: 开启 Kotlin 之旅 Google在2017年的IO大会上宣布...Java的辉煌与阴影 1995年,当年如日中天的Sun公司发布了Java语言,引起了巨大的轰动,与当时主流的C语言和Basic语言比起来,Java语言简单、面向对象、稳定、与平台无关、解释型、多线程、动态等特点...而且,Android还存在Java版权危机的问题,收购了Sun公司的Oracle曾向Google索要巨额的Java版权费,这可能也加快了Google寻找Android开发替代语言的动作。...安全:移除了你可能会犯错误的功能。 通用:基于 JVM 和 Javascript,你可以在很多地方运行。 互操作性:这就意味着 Kotlin 和 Java 可以相互调用,目标是 100% 兼容。...开发 Kotlin 多平台开发 Kotlin Native Kotlin 协程 Kotlin 响应式编程 ?

    1.4K30

    给 Java 开发者的 Kotlin 快速上手教程(Kotlin for Java Developers)v0.1

    Kotlin 概述: 开启 Kotlin 之旅 Google在2017年的IO大会上宣布,将Android开发的官方语言更换为Kotlin。...Java的辉煌与阴影 1995年,当年如日中天的Sun公司发布了Java语言,引起了巨大的轰动,与当时主流的C语言和Basic语言比起来,Java语言简单、面向对象、稳定、与平台无关、解释型、多线程、动态等特点...而且,Android还存在Java版权危机的问题,收购了Sun公司的Oracle曾向Google索要巨额的Java版权费,这可能也加快了Google寻找Android开发替代语言的动作。...安全:移除了你可能会犯错误的功能。 通用:基于 JVM 和 Javascript,你可以在很多地方运行。 互操作性:这就意味着 Kotlin 和 Java 可以相互调用,目标是 100% 兼容。...开发 Kotlin 多平台开发 Kotlin Native Kotlin 协程 Kotlin 响应式编程 ---- Kotlin 开发者社区 国内第一Kotlin 开发者社区公众号,主要分享、交流 Kotlin

    2.1K30

    AndroidStudio 开发基础知识【翻译完成】

    导航架构组件概述 四十一、安卓 Jetpack 导航组件教程 四十二、在安卓系统上创建和管理溢出菜单 四十三、运动布局介绍 四十四、安卓运动布局编辑器教程 四十五、运动布局的关键周期教程 四十六、使用浮动动作按钮和...Snackbar 四十七、使用表格布局组件创建选项卡式界面 四十八、使用回收视图和卡片视图小部件 四十九、安卓回收视图和卡片视图教程 五十、布局编辑器的示例数据教程 五十一、使用应用栏和折叠工具栏布局...简介 十二、Kotlin 数据类型、变量和可空性 十三、Kotlin 算子和表达式 十四、Kotlin 流量控制 十五、Kotlin 函数和 Lambdas 概述 十六、Kotlin 的面向对象编程基础...Jetpack 生命周期感知教程 四十七、导航架构组件概述 四十八、安卓 Jetpack 导航组件教程 四十九、运动布局介绍 五十、安卓运动布局编辑器教程 五十一、运动布局关键周期教程 五十二、使用浮动动作按钮和...Snackbar 五十三、使用表格布局组件创建选项卡式界面 五十四、使用回收视图和卡片视图小部件 五十五、安卓回收视图和卡片视图教程 五十六、布局编辑器示例数据教程 五十七、使用应用栏和折叠工具栏布局

    4.3K30
    领券