开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CustomScrollView中有多个SliverAppBar

CustomScrollView是Flutter中的一个可定制的滚动视图控件，它允许我们创建一个包含多个Sliver组件的滚动视图。SliverAppBar是CustomScrollView中的一个特殊的Sliver组件，它提供了一个可定制的应用栏，可以在滚动过程中动态改变高度和内容。

CustomScrollView中有多个SliverAppBar的情况下，每个SliverAppBar可以具有不同的设置和行为。它们可以在滚动过程中自动隐藏或显示，也可以通过手势来控制展开和折叠。这种布局适用于需要在滚动视图中显示多个可定制的应用栏的情况，例如一个包含多个模块或功能的页面。

优势：

可定制性：CustomScrollView和SliverAppBar提供了丰富的属性和回调函数，可以根据需求自定义滚动视图和应用栏的外观和行为。
灵活性：通过使用多个SliverAppBar，可以在滚动视图中创建多个独立的应用栏，每个应用栏可以有不同的设置和行为。
节省空间：由于SliverAppBar可以在滚动过程中自动隐藏，可以节省屏幕空间，使得内容能够更好地展示。

应用场景：

新闻应用：在一个包含多个新闻模块的页面中，每个模块可以有自己的SliverAppBar，以展示相关的标题和操作按钮。
社交应用：在一个包含多个社交功能的页面中，每个功能可以有自己的SliverAppBar，以展示相关的用户信息和操作入口。
多标签页面：在一个包含多个标签的页面中，每个标签可以有自己的SliverAppBar，以展示相关的标签名称和切换按钮。

推荐的腾讯云相关产品：腾讯云提供了丰富的云计算产品和服务，以下是一些与CustomScrollView和SliverAppBar相关的产品：

腾讯云移动应用分析（https://cloud.tencent.com/product/uma）：提供了移动应用数据分析和用户行为分析的能力，可以帮助开发者了解用户对滚动视图和应用栏的使用情况。
腾讯云移动推送（https://cloud.tencent.com/product/tpns）：提供了移动应用消息推送的能力，可以用于在滚动视图和应用栏中展示通知和提醒。
腾讯云云服务器（https://cloud.tencent.com/product/cvm）：提供了可扩展的云服务器实例，可以用于部署和运行滚动视图和应用栏的后端服务。

以上是关于CustomScrollView中有多个SliverAppBar的完善且全面的答案。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter之SliverAppBar

SliverAppBar控件需要和CustomScrollView搭配使用,SliverAppBar要通常放在slivers的第一位，后面接其他sliver控件。...CustomScrollView( slivers: [ SliverAppBar( ), //其他sliver...SliverAppBar中有一个非常重要的参数flexibleSpace，flexibleSpace是SliverAppBar中展开和折叠区域，flexibleSpace与expandedHeight一起使用...flexibleSpace 展开和折叠区域 bottom 底部控件 elevation‍ 阴影 expandedHeight 展开区域的高度‍‍ floating 设置为true时，向下滑动时，即使当前CustomScrollView...extends StatelessWidget { @override Widget build(BuildContext context) { return CustomScrollView

1.4K3 0

Flutter | Slivers 系列

概述 CustomScrollView：一个滚动的容器，改组件不接受任何 child，但是你可以直接提供 Slivers 已创建各种滚动效果，例如页面中有多个可滑动的列表，如 Appbar，列表，网格...CustomScrollView 中。...常用到的 Sliver 有，SliverAppbar，SliverList，SliverGrid，SliverToBoxAdapter 等由于 CustomScrollView 的子组件只能是 Sliver...最主要的原因就是可以在 slives 中添加多个组件，如在列表的上面和下面添加更多的内容。...child: Row( children: [Text(label), Text(content)], ), ), ); } } 上面代码中有一个问题

1.4K1 1

flutter系列之:如丝般顺滑的SliverAppBar

SliverAppBar详解我们先来看下SliverAppBar的定义：class SliverAppBar extends StatefulWidget可以看到SliverAppBar是一个StatefulWidget...通常来说SliverAppBar是和CustomScrollView一起使用的，也就是说SliverAppBar会被封装在CustomScrollView中。...CustomScrollView中除了SliverAppBar之外，还可以添加其他的sliver组件。...接着我们需要把SliverAppBar放到CustomScrollView中进行展示。...Widget build(BuildContext context) { return CustomScrollView( slivers: [ SliverAppBar

1.6K2 0

flutter系列之:如丝般顺滑的SliverAppBar

SliverAppBar详解我们先来看下SliverAppBar的定义： class SliverAppBar extends StatefulWidget 可以看到SliverAppBar是一个StatefulWidget...通常来说SliverAppBar是和CustomScrollView一起使用的，也就是说SliverAppBar会被封装在CustomScrollView中。...CustomScrollView中除了SliverAppBar之外，还可以添加其他的sliver组件。...接着我们需要把SliverAppBar放到CustomScrollView中进行展示。...Widget build(BuildContext context) { return CustomScrollView( slivers: [ SliverAppBar

1.3K3 0

UITableView在Flutter中是什么？

但是，对于某些特殊交互场景，比如多个效果联动、嵌套滚动、精细滑动、视图跟随手势操作等，还需要嵌套多个ListView来实现。...在Flutter中，有一个专门的控件CustomScrollView，用来处理多个需要自定义滚动效果的Widget。...具体的实现思路是：在创建SliverAppBar时，把 flexibleSpace 参数设置为悬浮头图背景。...flexibleSpace 可以让背景图显示在SliverAppBar下方，高度和SliverAppBar一样；而在创建SliverList时，通过 SliverChildBuilderDelegate...具体的示例代码如下所示： CustomScrollView( slivers: [ SliverAppBar(//SliverAppBar 作为头图控件

5.5K1 0

Flutter 粘合剂CustomScrollView控件

老孟导读：快乐的51假期结束了，切换为努力模式，今天给大家分享CustomScrollView组件，此组件在以后的项目中会经常用到，CustomScrollView就像一个粘合剂，将多个组件粘合在一起，...CustomScrollView CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件，使用场景： ListView和GridView相互嵌套场景，ListView嵌套GridView...CustomScrollView就像一个粘合剂，将多个组件粘合在一起，具统一的滚动效果。...Sliver系列组件有很多，比如SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。...( slivers: [ SliverAppBar( pinned: true, expandedHeight: 230.0, flexibleSpace

1.9K2 0

flutter系列之:使用SliverList和SliverGird

简介在上一篇文章我们讲解SliverAppBar的时候有提到过，Sliver的组件一般都用在CustomScrollView中。...除了SliverAppBar之外，我们还可以为CustomScrollView添加List或者Grid来实现更加复杂的组合效果。今天要向大家介绍的就是SliverList和SliverGird。...默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用的，所以我们先创建一个CustomScrollView，在它的slivers属性中，放入一个SliverAppBar...组件： CustomScrollView( slivers: [ const SliverAppBar( pinned: true,...总结在CustomScrollView中使用SliverList和SliverGird，可以实现灵活的呈现效果。

5121 0

flutter系列之:使用SliverList和SliverGird

简介在上一篇文章我们讲解SliverAppBar的时候有提到过，Sliver的组件一般都用在CustomScrollView中。...除了SliverAppBar之外，我们还可以为CustomScrollView添加List或者Grid来实现更加复杂的组合效果。今天要向大家介绍的就是SliverList和SliverGird。...默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用的，所以我们先创建一个CustomScrollView，在它的slivers属性中，放入一个SliverAppBar...组件： CustomScrollView( slivers: [ const SliverAppBar( pinned: true,...总结在CustomScrollView中使用SliverList和SliverGird，可以实现灵活的呈现效果。

8483 0

SliverAppBar

接下来我们来介绍下SliverAppBar SliverAppBar ---- 我看还是先来看下SliverAppBar的构造方法构造方法也是非常的简单，但是我们却不能直接使用它，由官方文档可以看到我们通常结合...我们结合CustomScrollView来看下例子吧。...当然我们是希望这个TabBar在SliverAppBar下方，并且随着SliverAppBar滚动的，但是我们还是来看下效果吧 ?...很丑有没有，由于TabBar的高度所以我们并不能让SliverAppBar滑动到顶部，所以要想实现随着SliverAppBar的移动，把TabBar放在bottom也不是很合适的。...本期小结 ---- 熟悉SliverAppBar的用法了解CustomScrollView的用法了解SliverPersistentHeader的用法

1.8K3 0

Flutter入门指北（Part 8）之Sliver 组件及NestedScrollView

首先看下 SliverAppBar 的源码吧，其实和 AppBar 的参数差不多，只是多了一些比较特殊的属性 const SliverAppBar({ Key key, this.leading...false, this.pinned = false, this.snap = false, }) 别的参数应该不陌生吧，都是 AppBar 的，那么直接来看个例子吧，还是通过上节说的 CustomScrollView...因为在 CustomScrollView 中只允许传入 Sliver 部件，那么类似 Container 等普通部件就不可以使用了，那么这样就需要更多的 Sliver 组件才能完成视图，所以为了方便，直接通过...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢，可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理，当然没问题。...糟透了的翻译 X 2：最常用的情况，就是在其 headerSliverBuilder 中使用携带 TabBar 的 SliverAppBar（就是使用 SliverAppBar 的 bottom 属性添加

2.1K3 0

Flutter SliverAppBar全解析，你要的效果都在这了！

先来简单看下部分效果图：本文内容可能有点多，但是都很简单，配上效果图味道更佳~ 什么是SliverAppBar SliverAppBar 类似于Android中的CollapsingToolbarLayout...false,//标题栏是否固定 this.snap = false,//配合floating使用 }) 基本效果 return Scaffold( body: new CustomScrollView...下拉的时候，SliverAppBar是直接拉下来还是先拉下来再展开。...child: Builder( builder: (BuildContext context) { return CustomScrollView...demo github : https://github.com/yechaoa/flutter_sliverappbar

1.7K2 0

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

看到这个效果，有经验的同学可能直接就会喊出：CustomScrollView！！没错，当前页一共分为三部分： ?...1.SliverAppBar2.SliverAppBar 的 bottom3.SliverList 整个页面就是用 CustomScrollView 来做的，但是有一点不同：平时我们在使用 SliverAppBar...滑上去的时候「播放全部」那一行还停留在上方，是使用了 SliverAppBar 的 bottom参数。这样一个页面的UI其实就分析完了。然而！我们回过头看一下两个页面的UI，是不是感觉非常相似！...1.标题，不用多说，是一样的2.SliverAppBar 展开状态时的内容，是不是可以由外部传入3.播放全部，也是一样的，后面有个「共多少首」，也可以由调用者传入4.最下面的歌单，是不是也可以封装出一个组件来...5.忘记标了，还有一个是SliverAppBar展开时的模糊背景，也可以由调用者传入 so，我们从上往下来封装。

1.4K2 0

Flutter开发实战分析-pesto_demo解析

所以需要使用CustomScrollView。结合SliverAppBar和SliverGrid来进行整体的绘制。...body: CustomScrollView( slivers: [ //分别返回`SliverAppBar`和`SliverToBoxAdapter...SliverAppBar中的flexibleSpace来存放appBar内显示的其他控件默认的 SliverAppBar的pined为false，故他会跟着滚上去。...body: CustomScrollView( slivers: [ SliverAppBar(...(这个用法超级常见和方便) Table TableRow 和TableCell组件来显示简单的表单功能使用CustomScrollView结合SliverAppBar和SliverList来实现经典的

2.3K2 0

Flutter | 滚动组件，ListView，GridVIew等

可滚动组件中有很多都支持 Sliver 的延时构建模型，如 ListView，GridView ，但是也有不支持改模型的 SingleChildScrollView 主轴和纵轴在滚动组件的坐标描述中，...children = const [], }) 复制代码上面的参数分为两组：第一组是可滚动组件的公共参数，上面已经说过了；第二组是 ListView 各个构造函数( ListView 有多个构造函数...但是在 Custom 中，需要粘起来可滚动的组件就是 CustomScrollView 的 Sliver 了，如果将 ListView 或者 GridView 作为 CustomScrollView...，也正因为如此，CustomScrollView 才可以将多个 Sliver 粘在一起，这些 Sliver 共用 CustomScrollView 的 Scrollable，所以最终才实现了统一的滑动效果...：SliverAppBar 对应 AppBar，两者不同之处在于 SliverAppBar 可以集成到 CustomScrollView 中，SliverAppBar 可以结合 FlexibleSpaceBar

8.4K2 0

Flutter开发实战分析-animation_demo瞎复写总结

上一遍文章的CustomScrollView 左右滚动，切换页面。嗯。PageView。 PageView可以让像是一页一页滑动。而且每个页面的大小是一样的。...像是大体想象的框架应该是CustomScrollView.然后初始的SliveAppBar的高度应该是屏幕的高度。...确定中间状态 tColumnToRow 整体的动画，在Flutter中有很方便的lerp函数可以确定中间的状态。只要传入我们进度的百分比就可以。这个百分比可以由滑动的过程中的offset传入。...SliverAppBar //只显示sliverAppBar部分 slivers: [ NotificationListener<ScrollNotification...这边文章我们熟悉了 CustomScrollView的MultiChildLayoutDelegate 通过CustomScrollView的MultiChildLayoutDelegate的performLayout

2.5K3 0

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

RenderBox 就复杂更多，前面介绍过「RenderSliver 就是通过 SliverConstraints 来得到一个 SliverGeometry」，其中： SliverConstraints 中有...这里比较容易有一个误区，那就是 ListView 是由 Viewport + Scrollable 和一个RenderSliver 组成，所以在「ListView 里只会有一个 RenderSliver 而不是多个...」，想使用多个 RenderSliver 需要使用 CustomScrollView。...内部组成 image.png 如上图所示，NestedScrollView 内部主要是通过继承 CustomScrollView ，然后自定义一个 NestedScrollViewViewport ...，本质上「SliverAppBar 的实现靠的就是 SliverPersistentHeader」。

1K3 0

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

RenderBox 就复杂更多，前面介绍过 RenderSliver 就是通过 SliverConstraints 来得到一个 SliverGeometry，其中： SliverConstraints 中有...这里比较容易有一个误区，那就是 ListView 是由 Viewport + Scrollable 和一个RenderSliver 组成，所以在 ListView 里只会有一个 RenderSliver 而不是多个...，想使用多个 RenderSliver 需要使用 CustomScrollView 。...image 如上图所示，NestedScrollView 内部主要是通过继承 CustomScrollView ，然后自定义一个 NestedScrollViewViewport 来实现联动的效果。...，本质上 SliverAppBar 的实现靠的就是 SliverPersistentHeader。

2.1K4 1

Flutter 首页必用组件NestedScrollView

例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return [SliverAppBar...style: TextStyle(color: Colors.white, fontSize: 20), ), ); },itemCount: 20,), ) 效果如下： SliverAppBar...headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return [ SliverAppBar...print('${_scrollController.position}'); }); //滚动到指定位置 _scrollController.animateTo(20.0); CustomScrollView

4.1K1 0

Flutter 首页必用组件NestedScrollView的示例详解

例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget [SliverAppBar...SliverAppBar展开折叠用法如下： NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled...) { return <Widget [SliverAppBar( expandedHeight: 230.0, pinned: true, flexibleSpace: FlexibleSpaceBar...print('${_scrollController.position}'); }); //滚动到指定位置 _scrollController.animateTo(20.0); CustomScrollView

3.6K4 0

Flutter 沉浸式布局

@override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView(...slivers: [ SliverAppBar( title: Text('沉浸式布局'), leading: IconButton

9791 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭