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

SliverAppBar滚动时flexibleSpace中的图标未隐藏

SliverAppBar是Flutter框架中的一个控件,用于在滚动页面时显示一个可折叠的应用栏。其中的flexibleSpace参数可以用来设置应用栏滚动时的背景、图标等内容。然而,有时候在使用SliverAppBar时会发现,当页面滚动时,flexibleSpace中的图标未能正确隐藏。

造成这个问题的原因可能是在设置flexibleSpace时,没有正确使用滚动控制器(ScrollController)或监听页面滚动事件。为了解决这个问题,可以按照以下步骤进行操作:

  1. 确保你已经使用了一个ScrollController来控制页面滚动。可以在初始化时创建一个ScrollController,并将其传递给相关的可滚动组件(如ListView、CustomScrollView等)的controller参数。
  2. 在SliverAppBar中,使用一个PreferredSizeWidget作为flexibleSpace参数的子组件,并将PreferredSizeWidget的preferredSize属性设置为一个固定的值,比如PreferredSize.fromHeight(200),以确保flexibleSpace有足够的高度来显示内容。
  3. 在SliverAppBar外部的组件中,添加一个Listener来监听滚动事件。可以通过ScrollController的addListener方法来添加滚动监听器,并在回调函数中根据页面滚动的位置来控制flexibleSpace中图标的显示与隐藏。

下面是一个示例代码,展示了如何正确使用SliverAppBar并解决图标未隐藏的问题:

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

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  ScrollController _scrollController;
  bool _showIcons = true;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(() {
      setState(() {
        _showIcons = _scrollController.position.pixels < 200;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverAppBar(
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                color: Colors.blue,
              ),
              title: _showIcons ? Icon(Icons.arrow_upward) : null,
            ),
          ),
          // Other sliver widgets
        ],
      ),
    );
  }
}

在这个示例中,我们通过使用ScrollController来监听滚动事件,并根据滚动的位置来控制flexibleSpace中的图标是否显示。当滚动距离小于200像素时,图标显示;否则,图标隐藏。

这样就可以解决SliverAppBar滚动时flexibleSpace中图标未隐藏的问题。希望能对你有所帮助!如果你需要了解更多关于Flutter的知识,可以访问腾讯云的Flutter产品介绍页面:腾讯云Flutter产品介绍

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

相关·内容

flutter系列之:如丝般顺滑SliverAppBar

floatingfloating是一个非常重要属性,因为对于SliverAppBar来说,当界面向远离SliverAppBar方向滚动时候,SliverAppBar隐藏或者缩写为status bar...pinned表示SliverAppBar滚动过程是否会固定在界面的边缘。...snapsnap是和floating一起使用属性,snap表示当向SliverAppBar滚动时候,SliverAppBar是否立即展示完全。...最后运行可以得到下面的界面:默认情况下SliverAppBar是展开状态,如果我们将下面的SliverList向上滑动,flexibleSpace就会被隐藏,我们可以得到下面的界面:当我们向上慢慢滑动时候...总结简单点说,SliverAppBar就是一个在滑动可变大小AppBar,我们可以通过设置不同参数来实现不同效果。

1.7K20

flutter系列之:如丝般顺滑SliverAppBar

floating floating是一个非常重要属性,因为对于SliverAppBar来说,当界面向远离SliverAppBar方向滚动时候,SliverAppBar隐藏或者缩写为status...pinned 表示SliverAppBar滚动过程是否会固定在界面的边缘。...snap snap是和floating一起使用属性,snap表示当向SliverAppBar滚动时候,SliverAppBar是否立即展示完全。...最后运行可以得到下面的界面: 默认情况下SliverAppBar是展开状态,如果我们将下面的SliverList向上滑动,flexibleSpace就会被隐藏,我们可以得到下面的界面: 当我们向上慢慢滑动时候...总结 简单点说,SliverAppBar就是一个在滑动可变大小AppBar,我们可以通过设置不同参数来实现不同效果。

1.7K30
  • Flutter 首页必用组件NestedScrollView

    今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景,当列表滚动隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。

    4.2K10

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

    在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景,当列表滚动隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context...) { return <Widget [SliverAppBar( expandedHeight: 230.0, pinned: true, flexibleSpace: FlexibleSpaceBar...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。

    4K40

    Flutter之SliverAppBar

    SliverAppBar控件可以实现页面头部区域展开、折叠效果,类似于AndroidCollapsingToolbarLayout。 先看下SliverAppBar实现效果,效果图如下: ?...SliverAppBar中有一个非常重要参数flexibleSpaceflexibleSpaceSliverAppBar展开和折叠区域,flexibleSpace与expandedHeight一起使用..."返回"图标 title 标题,通常为Text控件 actions 右侧控件 flexibleSpace 展开和折叠区域 bottom 底部控件 elevation‍ 阴影 expandedHeight...展开区域高度‍‍ floating 设置为true,向下滑动,即使当前CustomScrollView不在顶部,SliverAppBar也会跟着一起向下出现 pinned 设置为true,当SliverAppBar...内容滑出屏幕,将始终渲染一个固定在顶部收起状态 snap 设置为true,当手指放开SliverAppBar会根据当前位置进行调整,始终保持展开或收起状态,此效果在floating=true

    1.4K30

    UITableView在Flutter是什么?

    如下所示,我定义了一组列表项组件,并将他们放在了垂直滚动ListView: ListView( children: [ //设置ListView组件标题与图标...在这个例子,我们一次性创建了6个子Widget。但是从上图运行效果可以看到,由于屏幕宽高有限,同一间用户只能看到3个Widget。...以一个有着封面头图列表为例,我们希望封面头图和列表这两层视图滚动联动起来,当用户滚动列表,头图会根据用户滚动手势,进行缩小与展开。...具体实现思路是: 在创建SliverAppBar,把 flexibleSpace 参数设置为悬浮头图背景。...flexibleSpace 可以让背景图显示在SliverAppBar下方,高度和SliverAppBar一样; 而在创建SliverList,通过 SliverChildBuilderDelegate

    5.6K10

    Flutter开发实战分析-pesto_demo解析

    因为是MDCard样式,所以需要在最外层包裹一层Card 同时,图中标注是,padding部分。在Flutter,要实现padding,只要在它包裹在外面一层布局下就可以了。...结合SliverAppBar和SliverGrid来进行整体绘制。 CustomScrollView 使用它,可以结合Sliver来创造自定义滚动效果。...SliverAppBarflexibleSpace来存放appBar内显示其他控件 默认 SliverAppBarpined为false,故他会跟着滚上去。...22.gif 仔细看,有两点效果还是不满足我们预期效果。 FloatingActionButton,需要压住一点上面的图片。 滚动,我们不需要图片进行透明度渐变。...我们这里需要根据滚动量去改变FlexibleSpaceBar内我们创建logo和图标的大小。

    2.3K20

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

    一、老套路,先看样式 右侧图是我实际开发业务界面,用作展示而已 二、讲解(后附源码) 1.这里主要是用户AppBar组件 /** AppBar({ Key key, this.leading...,//Toolbar 主要内容,通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表,代表 Toolbar 中所显示菜单,对于常用菜单,通常使用 IconButton...来表示;对于不常用菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示在 AppBar 下方控件,高度和 AppBar...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当...SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值 this.backgroundColor

    1.4K20

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

    一、老套路,先看样式 右侧图是我实际开发业务界面,用作展示而已 ? ?...来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示在 AppBar 下方控件,高度和 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当...SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值 this.backgroundColor...如果leading属性未设置,且Scaffold设置了Drawer则显示打开Drawer图标 如果leading属性未设置,Scaffold也未设置Drawer,此时如果有前一个路由,则显示BackButton

    90910

    Flutter NestedScrollView实现一个经典滑动折叠头部图片效果

    Flutter NestedScrollView 滑动组件是用来处理复杂情况下滑动应用场景,如向上滑动视图,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar...在本节是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现折叠头部效果undefined 【x1】微信公众号每日提醒 随时随记...: true, ///SliverAppBar展开高度 expandedHeight: 200, flexibleSpace: buildFlexibleSpaceBar...是配置在 SliverAppBar bottom 属性下,通过 buildTabBar 方法来封装, 代码如下: TabBar buildTabBar() { return TabBar(...,是在 SliverAppBar flexibleSpace 属性配置,当然就是使用了 FlexibleSpaceBar,代码如下: String imageUrl = "https:

    2.7K11

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

    来把填满补上,就是首尾都会留空白。...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部部件 SliverPersistentHeader,这个部件可以根据滚动距离缩小高度,有点类似 SliverAppBar...糟透了翻译 X 1:一个内部能够嵌套其他滚动部件,并使其滚动位置联结到一起滚动部件 /// The most common use case for this widget is a scrollable...X 3:用于构建 NestScrollView 头部部件,innerBoxIsScrolled 主要用来控制 SliverAppBar forceElevated 属性,当内部内容滚动,显示...接着请注意代码那段 assert 文字 糟透了翻译 X 5:sliverOverlapAbsorberHandleFor 传入参数 context 必须包含 NestedScrollView

    2.2K30

    Flutter | Slivers 系列

    概述 CustomScrollView:一个滚动容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动列表,如 Appbar, 列表,网格...在 slivers 系列SliverAppbar 可以说是使用频率比较高组件了,SliverAppbar 为应用栏提供了自定义滚动行为,下面我们来看一下 class _MyHomePageState...SliverAppbar,并没有实现任何特殊效果,默认效果如下: 可以看到在滑动过程SliverAppbar 被顶上去了,这也是非常正常。...( title: Text("Sliver AppBar"), snap: true, floating: true, ) flexibleSpace:可展开拉伸部分 SliverAppBar...hasScrollBody: false, child: Center( child: CircularProgressIndicator(), ), ) 复制代码 hasScrollBody :当前组件是否有可滚动组件

    1.5K11

    Flutte部件目录-基本部件(三) 顶

    Drawer, 这是一个垂直面板,通常使用drawer属性显示在身体左侧(通常隐藏在手机上)....对于可滚动应用程序栏,请参阅SliverAppBar,该应用程序将AppBar嵌入长条以用于CustomScrollView。...如果指定了一个flexibleSpace部件,那么它将堆叠在工具栏和底部部件后面。下图显示了当书写语言是从左到右(例如英语),每个插槽出现在工具栏位置: ?...FlexibleSpaceBar, 当应用栏可以展开和折叠,它与flexibleSpace一起使用. material.google.com/layout/structure.html#structure-toolbars...也可以看看: IconTheme, 为图标提供环境配置. Icon, 用于显示图标材质设计图标库. ImageIcon,用于显示来自AssetImages或其他ImageProviders图标.

    6.3K10

    SliverAppBar

    在前面的文章我们将到了Appbar用户,它类似于Androidtoolbar,但是熟悉Android开发童鞋应该知道在Android还有个Collapsing Toolbar东西,就是一个可以折叠标题栏效果...首先我们使用了NestedScrollViewheaderSliverBuilder属性添加了SliverAppBar 然后我们设置展开高度为200,不让标题栏随着滑动滚动出可视区域 我们使用flexibleSpace...来构建了一个可以滚动区域 最后我们给NestedScrollViewbody加了一个ListView 然后我们来看下效果: ?...当然我们是希望这个TabBar在SliverAppBar下方,并且随着SliverAppBar滚动,但是我们还是来看下效果吧 ?...但是有童鞋就问问了,我们怎么让这个SliverPersistentHeader内容(TabBar)不随着ListView滚动而滑动呢?

    1.8K30

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

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

    1.4K51

    Flutter 粘合剂CustomScrollView控件

    ,需要给GridView指定高度,但我们希望高度随内容而变化(不指定),ListView和GridView作为整体滚动效果。...,AppBar具有吸顶效果,此效果也是我们经常遇到,用法如下: CustomScrollView( slivers: [ SliverAppBar( pinned...reverse参数表示反转滚动方向,并不是垂直转为水平,而是垂直方向滚动,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...primary设置为true,不能设置controller,因为primarytrue,controller使用PrimaryScrollController,这种机制带来好处是父组件可以控制子树滚动组件滚动行为...,例如,Scaffold正是使用这种机制在iOS实现了点击导航栏回到顶部功能。

    2K20
    领券