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

appbar中的标题字体在颤动中不变

问题:appbar中的标题字体在颤动中不变

回答:在Flutter中,AppBar是一个顶部导航栏的widget,它通常包含了标题、操作按钮和其他相关的内容。如果你想在AppBar中的标题字体在颤动中不变,可以使用Flutter提供的动画和效果相关的库来实现。

一种常见的做法是使用Flutter的动画库-AnimatedBuilder和AnimationController。下面是一个示例代码,演示了如何实现AppBar中标题字体在颤动中不变的效果:

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

class ShakingAppBar extends StatefulWidget implements PreferredSizeWidget {
  final String title;

  ShakingAppBar({Key key, this.title}) : super(key: key);

  @override
  _ShakingAppBarState createState() => _ShakingAppBarState();

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

class _ShakingAppBarState extends State<ShakingAppBar>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    )..repeat(reverse: true);
    _animation = Tween<double>(begin: -2.0, end: 2.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (BuildContext context, Widget child) {
        return AppBar(
          title: Transform.translate(
            offset: Offset(_animation.value, 0),
            child: Text(widget.title),
          ),
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        );
      },
    );
  }
}

这里我们自定义了一个ShakingAppBar,它继承自StatefulWidget并实现了PreferredSizeWidget,用于设定AppBar的高度。在_ShakingAppBarState中,我们创建了一个AnimationController和一个Tween来实现标题字体的颤动效果。然后,在build方法中,我们使用AnimatedBuilder包装AppBar,并通过Transform.translate将标题文字进行位移,以达到颤动的效果。

在你的Flutter应用中,你可以使用ShakingAppBar来替代普通的AppBar,并传入相应的标题,即可实现标题字体在颤动中不变的效果。

腾讯云相关产品推荐:如果你希望在Flutter应用中使用云计算相关的功能,可以考虑使用腾讯云提供的服务。例如,你可以使用腾讯云的移动推送服务(https://cloud.tencent.com/product/tpns)来实现消息推送功能,或者使用腾讯云的云存储服务(https://cloud.tencent.com/product/cos)来存储和管理应用中的文件。腾讯云还提供了丰富的云计算产品,涵盖了服务器、数据库、人工智能等领域,可以根据具体需求选择适合的产品来支持你的应用开发。

希望这个回答能对你有所帮助!

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

相关·内容

css设计不变与可变

,这里就不展开细说了,这个不变因子是宽高比,可变因子是宽度。...全屏图片滚动 全屏这个东西,vw还不能使用情况下,那非100%莫属了(这里全屏是指宽度铺满整个屏幕,不包括高度)。...所以这里一般设计是图片固定大小不变,右边文字可变,占满其余空间。...实现跟上面的图文混排一样,当然技术上可以使用很多方法如flex,absolute,float等 单行列表 同样单行列表,标题因为长度不一属于可变因子,不宜直接控制其宽度。...,总之,移动端可变因子比pc上更多,更多对宽度或高度不确定,就需要各种方法去避免直接设置死宽度或高度,当然庆幸是,css3支持让这些不确定因素控制变得趋向简单。

71910
  • css设计不变与可变

    ,这里就不展开细说了,这个不变因子是宽高比,可变因子是宽度。...全屏图片滚动 全屏这个东西,vw还不能使用情况下,那非100%莫属了(这里全屏是指宽度铺满整个屏幕,不包括高度)。...所以这里一般设计是图片固定大小不变,右边文字可变,占满其余空间。...实现跟上面的图文混排一样,当然技术上可以使用很多方法如flex,absolute,float等 单行列表 同样单行列表,标题因为长度不一属于可变因子,不宜直接控制其宽度。...,总之,移动端可变因子比pc上更多,更多对宽度或高度不确定,就需要各种方法去避免直接设置死宽度或高度,当然庆幸是,css3支持让这些不确定因素控制变得趋向简单。

    1.2K60

    JavaScript 不变性(Immutability)

    在这篇文章,我将展示什么是完全不变,如何在JavaScript中使用这个概念,以及为什么它是有用。 什么是不变性? 可变性文本定义是可能会被改变。...字符串不是JavaScript内置唯一不变值。 数字也是不变。 你甚至可以想象一个评估表达式“2 + 3”_改变数字“2”含义环境? 这听起来很荒唐,但是我们一直使用对象和数组。...In JavaScript, Mutability Abounds JavaScript,字符串和数字是不可改变设计。...JavaScript不变实践 JavaScript还没有不可变列表和地图,所以我们现在需要一个第三方库。有两个很好可用。...与内置数组和对象相比,仍然会有一个开销,但它将是不变,通常可以通过不变性启用其他好处来缩小。在实践,使用不可变数据许多情况下会增加应用程序整体性能,即使孤立某些操作变得更加昂贵。

    1K20

    哲思片段 | 设计变与不变

    无论它在内存存储状态如何变化,该实例对象标识依旧是保持不变。显然,变与不变是相对。 切换到DDD命题中,所谓“实体”就是那种具有唯一可识别可跟踪ID对象。...例如Java和C#String类型,皆为Immutable模式实现。 可若放在函数式编程,这种模式就显得有些可笑了。尤其纯函数式编程世界里,任何东西都应该是不变。...物质是否永恒不变哲学中一直是引人深思命题或假设;但在函数式编程,它几乎被证明了。...例如,Haskell,对List任何操作,即使调用++对List进行合并,返回都是全新List对象,原有对象不会有任何变化。...罗素《西方哲学简史》写道: 有的神秘主义者认为永恒并不是指时间上永久,它是独立于时间之外,无前无后、无因无果,也没有逻辑可循。 我觉得函数式编程追求不变性,可以划入这个范畴。

    1.3K70

    iOS应用添加自定义字体

    iOS应用添加自定义字体 一、应用添加自定义字体步骤 1、网上提供字体库有很多,下载完成后,将其导入工程,一般为ttf格式。...2、注意Build PhasesCopy Bundle Resources是否导入了文件: ? 3、项目的info.plist文件添加字体键值如下: ?...这个数组可以添加多个元素,多个字体库。...4、这时实际上我们已经将字体添加进了工程,但是在在使用这个字体时,字体名字有时和文件名是不一样,我们需要知道真实字体名称,通常情况下,我们会讲所有字体名称打印出来:     for (NSString...为了以后使用自定义字体时候不必一次一次经历这样痛苦,Xcode6.3环境下,我将所有的系统字体获取后写入了plist文件,将这个plist文件导入项目中,通过如下方法,可以只打印出新增加字体

    1.8K20

    循环不变式:算法基础概念明晰

    循环不变式 循环不变式主要用来辅助我们理解算法正确性,对于循环不变式,必须证明它三个性质 初始化:它在循环第一轮迭代开始之前,应该是正确。...结束:当循环结束时,不变式给了我们一个有用性质,它有助于表明算法是正确(这一步是和数学归纳法不同一点,用循环不变式则更进一步,数学归纳法到这里就得出了一个关系式就结束,而用循环不变式,不但要先确保一个正确关系式...编写循环时,让每次循环都成立逻辑表达式称为循环不变式(loop invariant)。 注意:每个循环都可以找到一个循环不变式,我们可以通过这个循环不变式证明循环迭代正确性。...保持:假设i=k时候循环不变式成立,此时还未执行循环语句,循环不变式成立,即a^(k-2)=1,则在循环中执行pow=pow*a,那么pow=a^(k-1)。...即在迭代过程,循环不变式保持成立。 终止:当k=n+1时,循环终止,此时pow=a^n。所以算法终止时,得到是一个正确结果,返回了an次幂。 、

    1.4K20

    python image 实现安装中文字体

    如果一些应用需要到中文字体(如果pygraphviz,不安装中文字体,中文会显示乱码),就要在image 安装中文字体。...默认 python image 是不包含中文字体: mac-temp:relation_graph test$ docker run –rm -it python bash root@36d738e2084c...fonts/wqy-microhei.ttc: WenQuanYi Micro Hei Mono,文泉驛等寬微米黑,文泉驿等宽微米黑:style=Regular 其中 wqy-microhei.ttc 字体文件是在其他其他桌面系统上拷贝过来...有些代码中文字体自己环境不一定适用 可以通过如下代码打印出自己电脑已经安装字体 找到其中中文字体名称放在 = 后即可,例如SimHei(黑体)等。...以上这篇python image 实现安装中文字体就是小编分享给大家全部内容了,希望能给大家一个参考。

    1.7K20

    字体设计|从历史汲取字体设计方法

    字体负空间减小,视觉面积加重,产生一种压迫感,常用于需要聚焦视觉重心标题字设计: 图片来源于网络 字体笔画借鉴则可以通过给字体增加笔触来增加设计美感。...设计师通过灵活地调整结构可以快速地改变字体气质。 其中关于结构借鉴,亦可以细分出两种方向。第一种是字体结构比例借鉴: 如瘦高小篆,因宫内缩,字面修长,给人一种文艺轻灵感觉。...新手也可以通过参考系统自带黑体,来调整字体内部笔画关系: 字体效果: 现代黑体基础上,融入小篆结构特点,使字形曲直有度,温润自然,适用于女性、新中式视觉风格。...宫外扩,形成了礼博大气象 2.2 案例演示:笔触几何化 ① 隶书笔画几何化提炼,以横笔为例:使用干净利落几何线条来模拟隶书横笔弯曲走势,保留笔法特征同时,使其更复合现代审美。...③ 根据书写连贯性和笔画走向,基础字体上增加不同程度书写细节,并在尝试过程不断地平衡可视性和书写感: ④ 字型应用: 结语 作为传承五千多年古老文化,中华文字独有的构成形态和字体细节让我们字体历史蕴含着无穷设计灵感

    1.4K30

    矩阵特征值-变化不变东西

    上文说了可逆这个话题,理解起来很简单,就是不变东西 有一张纸,上面画了一个箭头。对这张纸进行了一些拉伸、旋转等操作(线性变换)。 有些箭头在这些操作后,方向保持不变,只是长度可能变长或变短。...振动方向:这些波纹振动方向就是特征向量。 特征值:表示一个线性变换下,某个向量被拉伸或压缩倍数。 特征向量:表示一个线性变换下,方向保持不变向量。...关注是特征值方程出现次数,是一个代数概念。代数重数反映了特征值重要性,重数越大,特征值对矩阵影响就越大。代数重数就像一个人年龄,它是一个固定数值,表示一个人存在时间长度。...几何重数指的是对应于该特征值线性无关特征向量个数。它反映了特征值几何上重要性,即特征空间维度。特征向量空间中分布情况,是一个几何概念。...几何重数反映了特征空间维度,即对应于该特征值特征向量张成空间维度。就像一个人在社交圈影响力,它反映了这个人有多少个“铁杆粉丝”。一个人年龄可能会很大,但他影响力不一定很大。

    6510

    字体设计“连字”ligature

    作者:苏子岳 或者叫“为什么PDF里拷出来有些字会消失”, “为什么有些字体里“fi”可以连在一起”, “Fira Code是怎么做到连体符号” ligature ligature,维基百科中文页叫...正如字面意义上,连字就是连在一起字,比如中文连字是这样: 俗话说,见字如见人。 有的专家根据特总签名, 分析说他狂放就如同他那一横一样不羁…… 在拉丁语系,很多时候会用到连字这一特性。 ...比如说德语字母 ß 最开始其实是 ss, ="en.wikipedia.org/wiki/T">拉丁字母 W 最开始时候是 VV, 两个 V…, 非常神奇。...而我们熟悉音标里 æ 这个字母, 看起来很像连字,但其实不是连字, æ 是古英语等一系列语系里真实用到字母。 fi与印刷体 活字印刷盛行时候, 人们都是用字模来印文章。...电脑字体 ligature 虽然说电脑字体不会有印刷字体所有的物理限制, 但有些字体 fi 还依然保留了 ligature 这一特性。

    1.8K20

    CSS字体相关小技巧

    让我们仔细看看规范: 开发者使用字体名如果与用户使用环境已有的某个字体名字相同,使用样式表文档中会有效覆盖底层字体。...这使得网页开发者可以自由选择字体名称,而毋庸担心与给定用户环境存在字体名产生冲突。 规范如此定义是因为选择出与每个用户环境不产生冲突名字这件事想想就十分可怕!...我们再次参考下规范: local中放入是一串特定格式字符串,这串字符串用于唯一标识庞大字体一套字体。...菜单栏,选择 View➡ShowFontInfo后,右侧面板中会显示该字体PostScript名称及完整名称。 ?...因此如果你看到了 fantasy字体,说明重命名没有生效。苹果产品(San Francisco应当是可用)fantasy 会被渲染为Papyrus。

    1.3K40

    FlutterAppBar、TabBar和TabController——顶部切换栏是如何实现

    顶部TabBar切换栏实现第一种方式 FlutterAppBar用于定义顶部导航栏: Scaffold( appBar: AppBar( title: Text("AppBarPageDemo...leading,导航栏最左侧(标题前面)显示组件,首页通常显示应用logo,在其他页面通常显示为返回按钮 actions,导航栏右侧(标题后面)显示组件组,通常使用IconButton来表示...2,TabBartabsTab元素,以及TabBarViewchildren页面元素是一一对应,对应好了之后就可以页面对应展示了。...我们上面讲都是页面只有一个AppBar情况,这个时候如果想要加一个顶部TabBar,那么只需要配置APPBarbottom属性即可。...但是有些时候,我们会遇到不可自定义原始AppBar场景,而我们又想实现顶部TabBar效果,此时我们就可以页面再加一个Scaffold组件,然后这样就有两个AppBar了。

    10.3K20

    「网站优化」网站优化宝典标题优化

    网站页面如何优化,大脸猫今天就给大家讲讲网站优化如何优化网站标题以及注意事项 一个搜索引擎判断某个网站加权时,这个页面的标题则成为其中一个关键性,所以写好每个页面的标题。...当然其次就是每个页面的描述,这样更有利于用户阅读,还有利于搜索引擎对这个页面的索引以及加权,使得页面优先排名,当然写标题时有一些需要注意事项 文章标题优化注意事项: 1、写标题时必须与页面内容相关,...不得出现标题情况 2、写标题标题需要独一无二,当然如果有的情况会出现标题相同可以使用文章章节进行区分开 3、标题长度应该进行控制,毕竟太长了也显示不全;我们可以把关键内容写在文章描述;这样我们可以更容易使得用户查询到我们文章...4、标题权重一般会是页面的权重集合,所以我们需要总结文章内容到文章标题今天大脸猫就讲到这里。

    1.3K31

    容器应用字体样式怎么查看?

    如何查看k8spod所用字体样式? 作为一位k8s操作手,这个过程需要我们深入Pod内部环境,利用Linux系统工具进行探查。...使用kubectl exec命令,这相当于我们远程通过SSH进入一个服务器: kubectl exec -it -- /bin/sh 替换为实际Pod名称...第三步:列出Pod字体 现在已经处于Pod内部,可以使用fc-list命令来列出所有安装字体。...DejaVu系列字体是开源字体,常用于Linux和其他操作系统。它们是DejaVu字体家族一部分,提供了一系列字体风格和变体,包括正常、粗体、斜体等。...第四步:完成检查和退出 完成字体检查后,就像离开服务器前注销用户一样,我们通过输入exit命令安全退出Pod: exit 要注意是,这些操作需要Pod具有足够权限,而且你容器镜像需要包含相关工具

    37510
    领券