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

如何使半透明的appbar颤动

半透明的AppBar颤动效果可以通过以下步骤实现:

  1. 首先,确保你已经在项目中引入了所需的依赖包。对于Flutter项目,你需要在pubspec.yaml文件中添加flutter_blocflutter_hooks依赖。
  2. 创建一个新的Flutter页面或在现有页面中添加一个AppBar组件。
  3. 在AppBar组件中,使用AnimatedBuilder小部件来创建一个动画效果。AnimatedBuilder是一个用于构建动画的小部件,它可以根据动画的当前值来更新UI。
  4. AnimatedBuilderbuilder回调函数中,创建一个Transform小部件,并将AppBar包装在其中。Transform小部件可以对其子组件进行变换,例如旋转、缩放和平移。
  5. Transform小部件中,使用Matrix4.rotationZ方法来创建一个旋转矩阵。通过改变旋转矩阵的值,可以实现AppBar的颤动效果。
  6. 使用AnimationControllerCurvedAnimation来控制动画的播放。AnimationController用于控制动画的时间和状态,而CurvedAnimation则用于定义动画的曲线。
  7. 在AppBar组件的initState方法中,创建一个AnimationController实例,并设置动画的持续时间和曲线。
  8. 在AppBar组件的dispose方法中,释放动画控制器。
  9. 在AppBar组件的build方法中,创建一个CurvedAnimation实例,并将其与动画控制器关联起来。
  10. AnimatedBuilderbuilder回调函数中,使用CurvedAnimationvalue属性来获取动画的当前值,并将其应用于Transform小部件的旋转矩阵。
  11. 运行应用程序,你将看到半透明的AppBar颤动效果。

以下是一个示例代码,演示了如何实现半透明的AppBar颤动效果:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ShakingAppBar extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final animationController = useAnimationController(
      duration: Duration(seconds: 1),
    );
    final curvedAnimation = CurvedAnimation(
      parent: animationController,
      curve: Curves.easeInOut,
    );

    animationController.repeat(reverse: true);

    return AnimatedBuilder(
      animation: curvedAnimation,
      builder: (context, child) {
        return Transform(
          transform: Matrix4.rotationZ(curvedAnimation.value * 0.05),
          child: AppBar(
            title: Text('Shaking AppBar'),
            backgroundColor: Colors.transparent,
            elevation: 0.0,
          ),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: ShakingAppBar(),
      body: Center(
        child: Text('Hello World'),
      ),
    ),
  ));
}

在这个示例中,我们使用了flutter_hooks库来简化状态管理。useAnimationController是一个自定义的钩子,用于创建动画控制器。Curves.easeInOut是一个内置的曲线,用于定义动画的加速和减速效果。

请注意,这只是一个基本的示例,你可以根据自己的需求进行修改和扩展。对于更复杂的动画效果,你可能需要使用其他动画库或自定义动画。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

Flutter:创建透明/半透明应用栏 作者:坚果 华为云享专家,InfoQ签约作者,OpenHarmony布道师,,华为云享专家,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术分享...在 Flutter 中,您可以通过执行以下操作来创建透明或半透明应用栏: 将AppBar小部件****backgroundColor属性设置为完全透明 (Colors.transparent) 或半透明...(不透明度小于 1 颜色) 将AppBar小部件elevation属性设置为零以移除阴影(默认情况下,Flutter 中材质应用栏有阴影) 如果您希望 body 高度扩展到包含应用栏高度并且...double.infinity, height: double.infinity, fit: BoxFit.cover, )); } } 带有颜色渐变半透明应用栏...,不知道你觉得如何

3.3K20

如何使Ubuntu语言变成中文??

如何让我们Ubuntu学会说中文? 当我们打开Ubuntu系统后,一些英语稍差一点同学是不是用这个系统用起来感觉有点吃力呢?要是Ubuntu系统会讲中文就好了。...那如何让Ubuntu这个系统学会中文呢?接下来就有我来带你们一步步让自己Ubuntu系统学会中文吧!! ## (注意:可能有些步骤需要输入你登录密码!!!)...可能你下载速度会及其慢,请参考我另一篇文章,应该会解决你问题 ##如何让Ubuntu下载更快## ? ? ? ?...6、最后一步,离我们Ubuntu系统会说中文只差一步了,点击Language选项,然后往下翻动语言菜单,你会发现中文是灰色,这是怎么点击也无效,这个地方需要拖拽,只需左键点击汉语然后把它移动到第一位...7、最后一步,离我们Ubuntu系统会说中文只差一步了,点击Apply System-Wide(应用到整个系统)选项,然后重启系统,你就会发现这个系统及其友好啦 ? ?

4.2K40
  • 如何使开源项目成功

    我创建了一个开源库 vocajs.com,经过努力,这个库成为了 GitHub 上最受欢迎项目之一。在这个过程中,我学到了一些重要原则,这些原则涉及如何制作高质量开源项目。...每个人期望是了解你工具可以解决什么问题以及如何使用它。就这样。 告诉你一个对我有效真理: 花 50% 时间编写引人注目的 README.md 和简单明了文档。 是的,你没有看错。...花一半时间解释项目的用途以及如何使用它。 4.1 README.md 用户在访问项目存储库时最先看到是 README.md 文件。你只有20-30秒时间吸引注意力去兜售你东西。...例如这就是我用来描述内容: “Voca 库提供了有用功能,使字符串操作变得舒适:更改大小写,修饰,填充,段化,拉丁化,sprintfy,截断,转义等。...你知道哪些使开源项目成功其他策略?请在下面的评论中告诉我。

    1.1K30

    Flutter中AppBar、TabBar和TabController——顶部切换栏是如何实现

    顶部TabBar切换栏实现第一种方式 在Flutter中,AppBar用于定义顶部导航栏: Scaffold( appBar: AppBar( title: Text("AppBarPageDemo...我们上面讲都是页面中只有一个AppBar情况,这个时候如果想要加一个顶部TabBar,那么只需要配置APPBarbottom属性即可。...以上是两个ScaffoldappBar都配置了title,但没有配置bottom。 好,我们现在来考虑一下,在有两个Scaffold场景下,如何实现顶部TabBar效果。...为了使页面更好看,我们可以将这个顶层TabBar赋值给内层ScaffoldappBartitle属性,前面也说了,title对应也是一个组件。这样就能完美解决留空问题了。...好,现在我们已经知道该如何利用AppBar和TabBar来实现顶部Tabbar视觉效果了。在本文最后,我们来了解一下如何个性化设置顶部TabBar导航条。

    10.3K20

    如何使特定数据高亮显示?

    如上图所示,我们需要把薪水超过20000行,通过填充颜色突出显示出来。如何实现呢?还是要用到excel里“条件格式”哦。...如下图,在选中了薪水列数据之后,点击进行“大于”规则设置: 最终结果如下: 薪水大于20000单元格虽然高亮显示了,但这并不满足我们需求,我们要是,对应数据行,整行都高亮显示。...其它excel内置条件规则,也一样有这样限制。 那么,要实现整行条件规则设置,应该如何操作?既然excel内置条件规则已经不够用了,下面就自己动手DIY新规则吧。...2.如何使特定数据行高亮显示? 首先,选定要进行规则设置数据范围:选定第一行数据行后,同时按住Ctrl+Shift+向下方向键,可快速选定所有数据行。...3.总结: Excel里条件格式设置,除了内置规则,我们还可以自定义规则,使得符合需求数据行突出显示。 当然,关键是对excel里绝对引用/相对引用熟练掌握,然后再借助公式来实现。

    5.6K00

    如何使 WordPress BLOG 吸引订阅!

    在这篇文章中我要和大家分享一下,如何能够使WordPress BLOG 吸引更多订阅者。 不论我们是否出于自愿,我们几乎都是各种社会团体、组织或者集团一分子。...可以说我们都比较倾向于和我们同僚们保持一致。有时候组织决定使我们几乎无法抗拒选择了和大多数人一样行为方法,即使这背离我们初衷。...你 WordPress BLOG 能够从不断增加订阅量中获益,也给了你更多机会去陈述你观点,分享你经验甚至为你努力定价。...FeedBurner 所提供叫做“Readers Count”小东西能够显示当前那些被你 BLOG 所吸引并认为有价值订阅者数量。它所扮演就是一个民意脚色。...既不惹人讨厌,也很少让人厌烦,当数字不断变大时候就说明更多的人点击了“订阅”。 那么,如何充分利用这些好处呢? 解释订阅好处:RSS 其实是一个很新概念,并不是所有人都对它非常了解。

    43220

    【推荐】如何使你手里数据变成现金?

    数据变现前提准备 数据变现首先得有清洗、整理、及时、准确数据,以及科学数据分析方法和手段;然后得有业务熟悉程度,包括业务流程、业务运作方法和运营难点、业务解决方案等等。...有了前提,再说如何把数据变现为价值。 数据准备、分析方法自不用多说,大家已经讨论N多遍了。这里主要讨论对业务熟悉程度,我们常常提到业务熟悉,往往只是停留在业务流程、业务数据流熟悉。...我曾经做过大促分析,经过当天每小时流量、订单、库存,结合商品分布、用户分布,准确诊断大促不足地方、大促高价值地方,然后再一次促销中,将数据洞察转换为行动方案。...这是因为我熟知业务部门要行动,他们需要了解到底哪些地方要如何改进,改进多少?例如商品部门,你说准备库存结构不合理,那你告诉我到底各SKU准备多少,为什么这样准备?...客户部门,你说老客户活跃度激活不够,你告诉我如何更好,凭什么说这样才能更好?这些大家觉得仅仅熟悉流程,能给答案推动数据变现么?

    71840

    如何使VLAN走不同路由器?

    我们日常工作就是解决客户在IT方面的各种需求,客户们要求各不相同,设备品牌也见得很多很杂,这不,今天又来一个有点小特别的要求,设备品牌倒是我们忠爱华为。...需要说明是,活儿是小伙子去干完了,我拿模拟器写个文章,所以配置过程会略有不同,各位看官别见怪。...,而光猫是不支持OSPF协议,所以AR3上面不能用OSPF协议,并非没有想到。).../0/0.1 *创建子接口 dot1q termination vid 11 *子接口配置dot1q目的是为了带vlan数据帧进入时候比较pvid,如果相同则收,不同则丢弃 ip address...AR3配置:实际上是没有AR3 ,只是模拟器实验环境下,必须配置回程路由才能有完整实验结果 interface GigabitEthernet0/0/0 ip address 192.168.31.3

    1.2K30

    区块链技术如何使移民生活更轻松?

    关于区块链细节,你会发现无数文章,但是通过描述计算机如何互相交流,我不会用互联网来描述互联网好处,在区块链中,退一步抽象层次是非常重要。了解它所起作用。...区块链如何实现社交效益? 它通过消除中间商来消除系统成本。 如果没有区块链,每个行业都有中间人必须确认资产正确所有者。你想买房子?你需要一个律师来做标题搜索。你想给你健康记录提供一个新医生?...我最兴奋事情之一是区块链对移民好处。 移民可以安全地收到证明其居留正式文件,使他们能安全,自信地获得身份证件。...然而,区块链作为企业和消费者工具效用将在加密货币价格波动中存在。 它提供成本降低和安全级别可以帮助保护私人信息,使人们能够自信地传输和记录数据。...随着数百万人和企业成为数据窃取受害者,数据安全已成为越来越普遍问题。 如果区块链可以从系统中移除成本并减少未来数据泄露,那么怀疑者如何才能将其作为一种流行时尚?

    1K40

    如何使 DevOps 摆脱闭门造车窘境?

    在企业IT部门与独立业务经营部门之间,往往存在着各式各样互不理解问题。IT部门往往就像一个虚拟神职人员一样,只按照自己部门既定计划和规则进行相应IT操作和运维。...而灵活敏捷IT开发运维方法往往需要通过鼓励部门间更多合作,通过长时期沟通磨合,进而实现企业内部运维集成化和自动化,才能弥合这其中差距。当然,这显然是说起来容易,做起来难。 ?...其他普遍受到受访者关注问题包括: 39%缺乏优化云部署成本和性能能力 34%缺乏持续进行云管理能力 39%在实施传统IT、云计算与DevOps整合方面存在困难 企业缺乏专业知识是妨碍其全面采用云模型...一种真正云和DevOps解决方案,及其所带来积极业务成果 这种混合模式最佳结合了跨业务部门之间自由分散部署同时,也通过一个基础设施“单一面板”视角和命令,保留了IT部门监督和专业知识掌控...对于那些拥有大量交易电子商务企业或由其业务是由移动大数据所推动、以及具有显著互动性要求和面临网络、客户或最终用户需求企业而言,这是一种相当有吸引力且相当关键解决方案。

    73250

    给Android开发者Flutter上手指南

    如何使用widget定义布局属性? 如何分层布局? 如何设置布局样式? ScrollView在Flutter中等价于什么? 谁是Flutter列表组件? 如何知道点击了列表中哪个item?...RelativeLayout用于使widget相对于彼此位置排列。...您可以为widget构造函数指定相对于父组件布局规则。 推荐参考在StackOverflow上一个在Flutter中构建RelativeLayout例子。 如何使用widget定义布局属性?...Colors.black45, ), child: Text('Flutter'), ), ], ) 上一个示例使用 Stack 覆盖容器 (显示其“Text”在半透明黑色背景上...在Android中,ScrollView允许您包含一个子控件,以便在用户设备屏幕比控件内容小情况下,使它们可以滚动。在Flutter中,最简单方法是使用ListView。

    2K20

    如何用BBED使Offline数据文件Online

    在添加磁盘过程中导致数据文件offline,但可悲是,数据库没有备份,在发现问题时候归档也已经被清除,此时此刻,作为DBA你,会选择什么办法处理?...由于数据库比较大,数据库没有备份,可怜是,归档日志是定期清除,当发现这个问题时,所需归档日志已被清除,想通过常规手段使文件online已不可能,幸运时,通过BBED最终使文件online成功,虽然后续还要一些问题...F.用bbed查看正常文件头部在偏移量484到512数值 G.用bbed修改2个offline文件头部在偏移量484到512数值,确保Offline文件和正常文件头部数值是一致 H.用sqlplus...为了方便查看,后面部分省略 从上面我们可以看到,文件1,2头部是一样,这2个文件是正常,后面2个文件是Offline文件,我们需要做就是修改checkpoint信息以及RBA信息 BBED...如何修改RBA值是关键,需要停库,参考正常数据文件RBA信息,然后去修改Offline文件RBA信息,确保他们都是一致。 使用BBED时一定要注意大端小端问题,本文仅供参考

    1.2K60

    如何使公司为机器学习做准备

    近年来,人们对智能系统关注在各个领域都出现惊人增长,从客户支持到治疗癌症。 只要简单地将“AI”一词放到创新企业宣传介绍里似乎就能增加获得资金可能性。...媒体不断地报道“人工智能会偷走我们工作”,美国政府似乎担心有关超级智能机器人杀手可能, 相较而言,关于什么是人工智能以及我们应该期望它如何影响商业讨论声比较小。...总之,AI可能是一种方法,但机器学习已经提供了巨大潜力。 那么管理者如何将其纳入日常决策和长期规划? 一个公司怎样才能成为ML-ready ?...01 编写您业务流程 寻找需要经常做决定流程,比如批准或拒绝贷款申请。 确保您收集尽可能多数据关于如何做出决定以及决定本身。...02 关注简单问题 当问题被明确定义和易于理解情况下,并且获得数据可以为决定所需要信息做示范时候,自动化和机器学习是可以工作很好。 机器学习一个好问题是识别欺诈交易。

    753130

    Flutter沉浸式状态栏AppBar导航栏仿咸鱼底部凸起导航栏效果

    如下图:状态栏是指android手机顶部显示手机状态信息位置。 android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感。...如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述。 ? ?...,被称之为 Android 世界Swift,由 JetBrains 设计开发并开源。...Kotlin 可以编译成Java字节码,也可以编译成 JavaScript,方便在没有 JVM 设备上运行。...到此这篇关于Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果文章就介绍到这了,更多相关Flutter沉浸式状态栏导航栏 仿咸鱼底部凸起导航内容请搜索ZaLou.Cn以前文章或继续浏览下面的相关文章希望大家以后多多支持

    5.2K41

    如何使容器成为架构师最好朋友

    与虚拟机(VM)一样,它们提供了一个整洁、自包含包,开发者可以在其中运行他们应用程序、库和其他依赖项。通过这样做,容器提供了与其他应用程序隔离一致、可预测环境。...从梦想到噩梦 然而,容器迅速采用清楚地表明,IT体系结构中存在着越来越大裂痕:在容器环境上运行无状态应用程序工作负载和在更传统基础设施上运行有状态应用程序工作负载之间。...新轻量级方法容器,与传统遗留数据库和基础设施单体方法是不一致。与此同时,简单地用更现代替代方案替换遗留数据库并不是一个简单答案。...该数据库无疑将支持对业务绝对重要应用程序,然而不能保证更现代NoSQL数据库将自动支持容器。 编排DevOps成功 好消息是,隧道尽头是光明。...现代数据库被设计成与Kubernetes等新容器编制工具无缝操作,这使得架构师可以更轻松地管理容器如何与云中中央数据库连接。

    69240
    领券