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

这个高度是多少?(SliverAppBar下的列表)

这个问题涉及到前端开发中的一个组件——SliverAppBar,它通常用于创建具有可折叠效果的应用栏。在这个问题中,我们需要回答的是这个高度是多少。

SliverAppBar是Flutter框架中的一个组件,用于实现可折叠的应用栏。它可以在滚动列表中根据滚动位置的变化来调整自身的高度。

具体到这个问题中,由于没有提供具体的上下文信息,无法确定SliverAppBar的高度。在实际开发中,SliverAppBar的高度可以根据设计需求和用户体验来确定。可以通过设置其属性来控制高度,例如设置其高度属性为固定值或者根据内容自适应。

需要注意的是,SliverAppBar的高度通常是相对于屏幕的可视区域而言,而不是整个屏幕的高度。因此,在不同的设备上,SliverAppBar的高度可能会有所不同。

总结起来,SliverAppBar的高度是根据具体需求和设计来确定的,可以通过设置属性来控制。在这个问题中,由于缺乏上下文信息,无法给出具体的高度数值。如果需要更详细的信息,建议查阅Flutter官方文档或相关教程。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官方网站:https://cloud.tencent.com/
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云数据库(TencentDB):https://cloud.tencent.com/product/cdb
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发(移动推送、移动分析等):https://cloud.tencent.com/product/mobile
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云游戏多媒体引擎(GME):https://cloud.tencent.com/product/gme
  • 腾讯云音视频处理(VOD):https://cloud.tencent.com/product/vod
  • 腾讯云网络安全(SSL证书、DDoS防护等):https://cloud.tencent.com/product/cns
  • 腾讯云云计算(CVM、云函数等):https://cloud.tencent.com/product/cvm
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

= 1.0, // 同屏幕比例值,1.0 为一个屏幕大小 }) 如果一个滑动列表,每个 item 需要占满一个屏幕或者更大,可以使用该部件生成列表,但是如果 item 高度小于一个屏幕高度,那就不太推荐了...SliverPersistentHeader Flutter 中,为我们提供了这么一个作为头部部件 SliverPersistentHeader,这个部件可以根据滚动距离缩小高度,有点类似 SliverAppBar...SliverPersistentHeaderDelegate 需要提供一个最大值,最小值,展示内容,以及更新部件条件 比如我们需要展示一个最大高度 300,最小高度 100,居中文字,那么我们可以这么写这个代理类...tab 切换也),其 body 属性使用 TabBarView 来展示 Tab 页内容,这样通过切换 Tab 页就能展示该页展示内容。...X 7:创建一个和指定 handle 一样高度 sliver 部件,这个 handle 同 SliverOverlapAbsorber handle 保持一致即可。

2.2K30

Flutter | Slivers 系列

,等这种就可以直接使用 SliverAppBar,SliverList 和 SliverGrid Slivers 不是单独指一个组件,而是指一个系列,所以以 Sliver 开头组件都是这个系列,但是他们都只能作用于...FlutterLogo(size: 100), FlutterLogo(size: 100), FlutterLogo(size: 100), ], )) 复制代码 一般在列表数量较小并且显示内容确定情况可以使用次...只要固定了列表中元素高度,就可以提升不小性能,但是在实际项目中,想要固定元素高度是非常麻烦,就算是列表元素只有一行文字,也有可能会出现问题,例如直接在系统层面修改字体大小,这也会导致高度固定导致渲染出来效果不尽人意...在 SliverPrototypeExtentList 中,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕上,在运行过程中,Flutter 会将原型尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型尺寸...在 slivers 系列中,SliverAppbar 可以说是使用频率比较高组件了,SliverAppbar 为应用栏提供了自定义滚动行为,下面我们来看一 class _MyHomePageState

1.5K11
  • UITableView在Flutter中是什么?

    但,对于定高列表项元素,最好是提前设置好这个参数值。...因为如果这个参数为null,ListView会动态地根据子Widget创建完成结果,决定自身视图高度,以及子Widget在ListView中相对位置。...因此,在ListView中,指定itemExtent比让子Widget自己决定自身高度会更有效。 运行这个示例,效果如下: ? 可能你已经发现了,我们列表还缺少分割线。...flexibleSpace 可以让背景图显示在SliverAppBar下方,高度SliverAppBar一样; 而在创建SliverList时,通过 SliverChildBuilderDelegate...接下来我们考虑一个更加复杂问题:在某些情况,我们希望获取视图滚动信息,并进行相应控制。比如,列表是否已经滑到底(顶)了?如何快速回到列表顶部?列表顶部是否已经开始,或者是否已经停下来了?

    5.6K10

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

    UI 分析 首先还是再来看一「每日推荐」UI效果: ? 看到这个效果,有经验同学可能直接就会喊出:CustomScrollView!! 没错,当前页一共分为三部分: ?...滑上去时候「播放全部」那一行还停留在上方,是使用了 SliverAppBar bottom参数。 这样一个页面的UI其实就分析完了。 然而!我们回过头看一两个页面的UI,是不是感觉非常相似!...先封装SliverAppBar bottom 确定一需求,看看需要传入哪些参数: 1. count:共多少首歌 2. tail:尾部控件 3. onTap:点击播放全部时回调 bottom 需要是一个...还是先确定一需求,看看需要传入什么: 1.要传入一个背景还模糊2.传入title3.传入展开时高度4.播放次数5.播放全部点击回调 确定好就之后,代码如下: class PlayListAppBarWidget...最后封装歌曲列表item 这个item就比较简单了,传入一个实体类,根据参数来填值就好了,大致代码如下: class WidgetMusicListItem extends StatelessWidget

    1.5K20

    flutter组件6【AppBar使用】

    1.图示 2.解释 AppBar 有以下常用属性: leading → Widget - 在标题前面显示一个控件,在首页通常显示应用 logo;在其他界面通常显示为返回按钮。...actions → List - 一个 Widget 列表,代表 Toolbar 中所显示菜单,对于常用菜单,通常使用 IconButton 来表示;对于不常用菜单通常使用 PopupMenuButton...elevation → double - 控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当 SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar...变为 Toolbar 时候,修改 elevation 值。...flexibleSpace → Widget - 一个显示在 AppBar 下方控件,高度和 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用。

    1.2K20

    SliverAppBar

    或者你咨询搜索引擎吧。...接下来我们来介绍SliverAppBar SliverAppBar ---- 我看还是先来看下SliverAppBar构造方法 构造方法也是非常简单,但是我们却不能直接使用它,由官方文档可以看到我们通常结合...首先我们使用了NestedScrollView中headerSliverBuilder属性添加了SliverAppBar 然后我们设置展开高度为200,不让标题栏随着滑动滚动出可视区域 我们使用flexibleSpace...当然我们是希望这个TabBar在SliverAppBar下方,并且随着SliverAppBar滚动,但是我们还是来看下效果吧 ?...很丑有没有,由于TabBar高度所以我们并不能让SliverAppBar滑动到顶部,所以要想实现随着SliverAppBar移动,把TabBar放在bottom也不是很合适

    1.8K30

    6详解AppBar小部件

    ), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐小部件列表。我们通常在用作按钮应用程序中看到它们来触发下拉菜单、个人资料头像等。...布局和添加小部件 如何为 AppBar 图标、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了!...,高度和 AppBar 高度一样, // 可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar,当 SliverAppBar...和内容同级时候,该值为 0, // 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值。

    16.4K10

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

    ,//Toolbar 中主要内容,通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表,代表 Toolbar 中所显示菜单,对于常用菜单,通常使用 IconButton...来表示;对于不常用菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示在 AppBar 下方控件,高度和 AppBar...高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget 对象,通常是 TabBar。...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当...SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值 this.backgroundColor

    1.4K20

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

    顶部状态栏在日常中是必不可少,今天和尚尝试一可折叠状态栏使用; 和尚以前在学习滑动冲突时曾用过 Sliver 系列 Widget,和尚这次尝试用 SliverAppBar...来处理; SliverAppBar 源码分析 const SliverAppBar({ Key key, this.leading, this.automaticallyImplyLeading...滑动后固定折叠状态栏,false 直接滑上去; floating:滑动过程中效果,通常与 snap pinned 共同使用,且 floating 为 ture 时,snap 也一般为 true;官方推荐样例视频很好诠释出滑动过程中列表滑动与顶部状态栏滑动变化..., }) 和尚主要实现 SliverPersistentHeaderDelegate;需要实现四个方法: build 是页面布局效果,其中 shrikOffset 为滑动距离,直到设置折叠展开高度...; maxExtent 折叠状态栏展开最大高度; minExtent 折叠状态栏收起最小高度(pinned=true);当 maxExtent=minExtent 时,状态栏不折叠; shouldRebuild

    1.4K51

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

    this.automaticallyImplyLeading = true, this.title,//Toolbar 中主要内容,通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表...,//一个显示在 AppBar 下方控件,高度和 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当...SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值 this.backgroundColor...], controller: TabController(length: 5, vsync: ScrollableState()), )),//这个是顶部

    90910

    不一样角度带你了解 Flutter 中滑动列表实现

    , 当我们滑动时其实就是它在 Viewport 里位置发生了变化; 了解完这个基础理念后,就可以知道一般情况 Viewport 和  Scrollable 实现都是很通用,所以一般在 「Flutter..., 也就是“预布局”区域,这个区域默认大小是 「defaultCacheExtent= 250.0;」 ListView 高度为 701,defaultCacheExtent 为默认 250,也就是得到...最后顺便聊 CustomScrollView ,事实上就是一个「开放了可自定义配置 RenderSliver 数组滑动控件」,例如: 通过利用 SliverList + SliverGrid 就可以搭配出多样化滑动列表...了解完 NestedScrollView 布局和联动实现之外,最后简单介绍一  SliverPersistentHeader , 因为经常在  NestedScrollView 里使用  SliverAppBar... SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 高度; 使用 SliverOverlapInjector 将这个高度配置到 body 列表中,让列表知道顶部存在一个固定高度区域

    1.1K30

    关于列表转字符串这个过程曲折

    确实是简单方法! 学到了新知识 结语 前言 今天写爬虫小程序时候遇到了一个小问题,最后解决了,感觉还是蛮有用,就分享一吧!...小技巧 问题 平常我们(也可能只是我自己)把列表字符串拿出来,都会先把列表遍历,但是今天我遇到一个小问题,问题是这样: a = ['a', 'b', 'c', 'd'] c = ''   # 如何讲...然后我就它封装成了一个函数,放在我需要地方使用。 另一种简单方法? 当我解决了这个简单问题后,我就又回到了群里,发现了一个人说就一个方法可以解决,这个方法是:join。...我又单独搜索了一join方法,发现他可以将列表通过某种字符拼接成一个新字符串,比如这样: a = ['a', 'b', 'c', 'd'] c = ''.join(a) print(c)  # 结果是...:abcd 学到了新知识 顿时我就发现了新大陆,拿去解决我问题,果然,很好用,哈哈,相比我那个又傻又笨方法,这个无疑更简单,更方便,所以,今天又学到了一个知识,挺好

    70100

    Flutter之SliverAppBar

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

    1.4K30

    不一样角度带你了解 Flutter 中滑动列表实现

    SliverList 在 Viewport 里产生滑动; 黄色部分就是 SliverList , 当我们滑动时其实就是它在 Viewport 里位置发生了变化; 了解完这个基础理念后,就可以知道一般情况...预布局”区域,这个区域默认大小是 defaultCacheExtent= 250.0; ListView 高度为 701,defaultCacheExtent 为默认 250,也就是得到第一次需要布局到底部距离其实为...image 在 ListView 父类 ScrollView 内部,默认情况使用就是 PrimaryScrollController.of(context) 这个 controller ,因为...NestedScrollView 里使用 SliverAppBar,本质上 SliverAppBar 实现靠就是 SliverPersistentHeader。...SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 高度; 使用 SliverOverlapInjector 将这个高度配置到 body 列表中,让列表知道顶部存在一个固定高度区域

    2.2K51

    Flutter | 滚动组件,ListView,GridVIew等

    ,如果子树中滚动组件没有显示指定,则会使用这个默认。...,在 Flutter 中,术语 ViewPort (视口) ,如无特别说明,则是指一个 Widget 实际显示区域; 例如,一个 ListView 显示区域高度是 800 像素,虽然其列表项总高度可能远远超过...在 ListView 中指定 itemExtent 比让子组件自己决定吱声长度会更有效,因为指定后,滚动系统可以提前知道列表长度,而无需每次构建子组件是都去计算一,尤其是在滚动位置频繁变化时(滚动系统需要频繁去计算列表高度...复制代码 意思是 ListView 高度无法确定,所以解决办法就是给 ListView 设置边界,我们可以使用 SizedBox 指定具体高度: children: [ Text("商品列表"...但是由于 listView 高度是固定,就会导致底部留白,这种情况可以使用屏幕高度 减去状态类,导航栏,头部高度

    8.5K20
    领券