首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Flutter之SliverAppBar

    SliverAppBar控件可以实现页面头部区域展开、折叠的效果,类似于Android中的CollapsingToolbarLayout。 先看下SliverAppBar实现的效果,效果图如下: ?...SliverAppBar控件需要和CustomScrollView搭配使用,SliverAppBar要通常放在slivers的第一位,后面接其他sliver控件。...控件 ], ) SliverAppBar和其他slivers控件的结构如下: ?..."返回"图标 title 标题,通常为Text控件 actions 右侧控件 flexibleSpace 展开和折叠区域 bottom 底部控件 elevation‍ 阴影 expandedHeight...内容滑出屏幕时,将始终渲染一个固定在顶部的收起状态 snap 设置为true时,当手指放开时,SliverAppBar会根据当前的位置进行调整,始终保持展开或收起的状态,此效果在floating=true

    1.4K30

    初识顶部导航栏【flutter20个实例之一】

    高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget 对象,通常是 TabBar。...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当...SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值 this.backgroundColor...,如果要去掉 elevation:0; 4.如果想要下方出现一点角度的话 vertical支持顶部和底部 horizontal支持左边和右边 shape: RoundedRectangleBorder(...borderRadius: BorderRadius.vertical(bottom: Radius.circular(10))), 5.底部tab需要用到bottom属性 bottom: TabBar

    1.4K20

    初识顶部导航栏【flutter20个实例之一】

    一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当...SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值 this.backgroundColor...,如果要去掉 elevation:0; 4.如果想要下方出现一点角度的话 vertical支持顶部和底部 horizontal支持左边和右边 shape: RoundedRectangleBorder(...borderRadius: BorderRadius.vertical(bottom: Radius.circular(10))), 5.底部tab需要用到bottom属性 bottom: TabBar

    91710

    【Flutter 专题】52 图解可折叠状态栏

    顶部状态栏在日常中是必不可少的,今天和尚尝试一下可折叠状态栏的使用; 和尚以前在学习滑动冲突时曾用过 Sliver 系列的 Widget,和尚这次尝试用 SliverAppBar...来处理; SliverAppBar 源码分析 const SliverAppBar({ Key key, this.leading, this.automaticallyImplyLeading...滑动过程中标题栏与列表交界处; forceElevated:与 elevation 共同使用,false 时不展示,true 时根据 elevation 设置效果展示; 如图: backgroundColor:背景色...bottom:添加状态栏底部小部件,需要是 PreferredSizeWidget 类型 Widget; bottom: TabBar(tabs: [ Tab(icon: Icon(Icons.border_left...BuildContext context) { return Scaffold( body: CustomScrollView(slivers: [ SliverAppBar

    1.4K51

    Flutter实战 | 从 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)

    1.SliverAppBar2.SliverAppBar 的 bottom3.SliverList 整个页面就是用 CustomScrollView 来做的,但是有一点不同: 平时我们在使用 SliverAppBar...1.标题,不用多说,是一样的2.SliverAppBar 展开状态时的内容,是不是可以由外部传入3.播放全部,也是一样的,后面有个「共多少首」,也可以由调用者传入4.最下面的歌单,是不是也可以封装出一个组件来...5.忘记标了,还有一个是SliverAppBar展开时的模糊背景,也可以由调用者传入 so,我们从上往下来封装。...先封装SliverAppBar 的 bottom 确定一下需求,看看需要传入哪些参数: 1. count:共多少首歌 2. tail:尾部控件 3. onTap:点击播放全部时的回调 bottom 需要的是一个...还是先确定一下需求,看看需要传入什么: 1.要传入一个背景还模糊2.传入title3.传入展开时的高度4.播放次数5.播放全部的点击回调 确定好就之后,代码如下: class PlayListAppBarWidget

    1.5K20

    Linux的背景介绍

    它运行在小型机上,满足了系统对科研环境的要求。从产生开始,UNIX就是一个有价值的、高效的、多用户和多任务的操作系统。...1975年伯克莱由下属部门BSD发行了自己的UNIX版本。UNIX的BSD版本成为AT&T贝尔实验室版本的主要竞争者,而其它的独立开发出的UNIX版本也开始萌生。...在今天的书店里你能发现分别适用于这两个版本的不同的UNIX的书,一些是System V,另一些集中在BSD UNIX。...(年轻时的林纳斯是真的帅) 2.2 Linux的开源 在当时的时代,常用的Unix和苹果的Macos系统都是要收费的,而林纳斯在编写了Linux后做出了一个大胆的决定——讲Linux的源码进行开源!...它的出现推动了软件行业的发展,也促进了计算机科学的发展。如今,Linux 已经成为了许多人日常工作和生活中不可缺少的一部分。 好了,今天的分享到这里就结束了,感谢大家的支持!

    13710

    flutter中的底部导航栏切换

    “本文主要介绍flutter中的底部导航栏切换 做android原生开发时,底部导航栏是通过自定义布局,图片自己上网找,点击之后还要变色,在切换的时候使用fragment,切换下一个的同时上一个隐藏……...tabs.dart bottomNavigationBar组件,可以直接显示底部按钮,onTap方法进行交互, setState方法可以实时渲染修改界面,currentIndex表示当前按下的位置 import...'), ), /** * 切换底部导航栏的时候动态修改body内容 */ body:this...._currentIndex, //实现底部导航栏点击选***能 onTap: (int index){ // this....但是最好应该使用键值对的形式,可能flutter有类似的方法我还没学到吧,不过,以上从理解的简单程度和实现的简单程度都是碾压原生开发的!

    3.6K20

    Zynq 7000的背景

    改善性能 缩短了IC器件之间的连线长度,因此大大减少了CPU和外设之间的信号传输延迟。 在SOC内,由于异构计算功能部件具有更低的阻抗,因此也降低了逻辑门的翻转延迟。 1.2....降低功耗 SOC的供电电压降低到2V以下。 降低了电容值,因此在相同的CPU工作频率下,显著降低了系统的整体功耗。 1.3....减少体积/可靠性提高 较少外部IC器件的数量,外设连接需要的接口数量减少,所以提高了系统的可靠性。 1.4. 减低总成本 PCB板缩小,IC器件减少,所以构成系统的总成本减少。 2....与传统的SOC相比,Xilinx的可编程SOC充分利用了现场可编程门阵列内部结构的灵活性,克服了传统的SOC器件灵活性差、专用性强及设计复杂等缺点,同时兼备所有的SOC优势。 3....这样,可以将配置PL的过程设置成启动过程的一部分或者在将来的某个时间在单独地配置PL。此外,可以实现PL的完全重配置或者使用部分可重配置。

    67652

    花里胡哨的背景渐变

    背景 设计师的原稿是这样的渐变: 导出的视觉稿是这样的:(导出工具没有识别到渐变) 于是决定去找设计师沟通这个渐变”长什么样“。...渐变背景 CSS 背景渐变使用 background-image 属性来实现。实现渐变的常见方式有线性渐变和径向渐变两种。... ) 第一个参数代表方向,可以使用关键字 top left 等,举几个例子: 使用关键字: to top (从底部到顶部)、to bottom (从顶部到底部)、to...~ 0 到 8% 的蓝色到黑色的重复径向渐变 重复径向渐变也是一样的,当渐变的横纵轴小于父盒子的宽高时,就会重复 background-image: repeating-radial-gradient(...比如把 black 8% 在 1s 里变为 20% ,再在 1s 里回到 8%...效果比较“眩晕”,就不放图给大家了,大家可以自行尝试下~ 总结 本文仅针对一些比较常用的背景渐变和常见写法进行了梳理,

    34221

    App之底部导航栏的设计

    hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。 我为什么写这个系列的文章。...如领英的设置页面 网格式与列表式类似,但排布更紧凑,显示也更直观,可在一页容纳更多选项,常见于一级页面,电商类app一级页面用的比较多,如淘宝的首页 标签式有顶部、底部两大类,底部应用的最广泛,因为底部比较方便大拇指点击...我们一步步推理下 1、由于需要便于拇指操作,这决定了我们只能在标签式导航中的底部导航栏来进行改造。 2、底部导航栏的功能按钮排布。...下面再看看底部导航栏的一些主流设计方式里的案例: 目前有3种典型的模式,分别是 模式1:首页+我的; 模式2:首页+更多; 模式3:中间功能项突出。...地图类app应用较少采用常规的底部导航栏,没有固定范式,底部导航栏的具体样式根据业务来设计。 最后,用张动图总结本文内容。 ---- 转载请联系本号 自在园版权所有

    4.9K110
    领券