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

如何通过单击SliverAppbar颤动中的按钮来最小化SliverList

要通过单击SliverAppBar颤动中的按钮来最小化SliverList,可以按照以下步骤进行操作:

  1. 首先,确保你已经在应用程序中使用了SliverAppBar和SliverList组件。SliverAppBar是一个可滚动的应用栏,而SliverList是一个可滚动的列表。
  2. 在SliverAppBar中添加一个按钮,用于最小化SliverList。可以使用IconButton组件来创建一个带有图标的按钮。例如,可以使用Icons.arrow_downward图标来表示最小化操作。
  3. 在按钮的onPressed回调函数中,使用状态管理来控制SliverList的最小化状态。可以使用一个布尔值来表示SliverList是否被最小化。
  4. 在SliverList组件的外部包裹一个AnimatedContainer组件,并根据最小化状态来设置AnimatedContainer的高度。当SliverList被最小化时,将AnimatedContainer的高度设置为0,即可实现最小化效果。

以下是一个示例代码,演示如何通过单击SliverAppBar颤动中的按钮来最小化SliverList:

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isListMinimized = false;

  void toggleListMinimized() {
    setState(() {
      isListMinimized = !isListMinimized;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('My App'),
            floating: true,
            snap: true,
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_downward),
                onPressed: toggleListMinimized,
              ),
            ],
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return AnimatedContainer(
                  height: isListMinimized ? 0 : 100, // 根据最小化状态设置高度
                  color: Colors.blue,
                  child: ListTile(
                    title: Text('Item $index'),
                  ),
                  duration: Duration(milliseconds: 300),
                );
              },
              childCount: 10,
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

在这个示例中,我们创建了一个CustomScrollView,其中包含一个SliverAppBar和一个SliverList。在SliverAppBar的actions中添加了一个IconButton,用于最小化SliverList。通过点击按钮,调用toggleListMinimized函数来切换SliverList的最小化状态。在SliverList的delegate中,使用AnimatedContainer来包裹列表项,并根据最小化状态设置AnimatedContainer的高度。

这样,当你点击SliverAppBar颤动中的按钮时,SliverList将会最小化或展开,从而实现了通过单击SliverAppBar颤动中的按钮来最小化SliverList的效果。

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

  • SliverAppBar: https://pub.dev/documentation/flutter/material/SliverAppBar-class.html
  • SliverList: https://pub.dev/documentation/flutter/widgets/SliverList-class.html
  • IconButton: https://pub.dev/documentation/flutter/material/IconButton-class.html
  • AnimatedContainer: https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Flutter | Slivers 系列

    并且 slivers ,如果存在多个列表的话也是支持动态加载,而不是会一次性全部渲染完 各式各样 Slivers 组件 SliverList 在上面的例子 SliverList 使用是 SliverChildBuilderDelegate...这个delegate,它可以实现动态加载,当然 SliverList 也有和 ListView 中一样非动态加载delegate,就是SliverChildListDelegate SliverList...SliverFixedExtentList 面的子元素宽高是动态,需要手动设置高度,并且这种也不利于性能,所以我们可以使用 SliverFixedExtentList 控制限制子元素大小: SliverFixedExtentList...在 SliverPrototypeExtentList ,可以通过 prototypeItem 传入一个原型,这个原型并不会渲染到屏幕上,在运行过程,Flutter 会将原型尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型尺寸...SliverAppbar,并没有实现任何特殊效果,默认效果如下: 可以看到在滑动过程SliverAppbar 被顶上去了,这也是非常正常

    1.5K11

    Flutter 粘合剂CustomScrollView控件

    Sliver系列组件有很多,比如SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。...相互嵌套场景 在实际业务场景中经常见到这样布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动时候做为一个整体,此场景是无法使用GridView+ListView实现...,而是需要使用CustomScrollView+SliverGrid+SliverList实现,实现代码如下: CustomScrollView( slivers: [ SliverGrid.count...primary设置为true时,不能设置controller,因为primarytrue时,controller使用PrimaryScrollController,这种机制带来好处是父组件可以控制子树可滚动组件滚动行为...,例如,Scaffold正是使用这种机制在iOS实现了点击导航栏回到顶部功能。

    2K20

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

    顶部状态栏在日常是必不可少,今天和尚尝试一下可折叠状态栏使用; 和尚以前在学习滑动冲突时曾用过 Sliver 系列 Widget,和尚这次尝试用 SliverAppBar...来处理; SliverAppBar 源码分析 const SliverAppBar({ Key key, this.leading, this.automaticallyImplyLeading...this.floating = false, this.pinned = false, this.snap = false, }) leading:顶部左侧 Widget 常见是返回按钮...title:顶部标题 Widget 常见是文字标题等; centerTitle:true 为标题 Widget 居中,false 默认居左; actions:顶部右侧菜单组,可设置多个菜单按钮等;...true;官方推荐样例视频很好诠释出滑动过程列表滑动与顶部状态栏滑动变化; floating: false, pinned: false, snap: false floating: true

    1.4K51

    Flutter

    初次运行时三棵树 初步认识了三棵树之后,那Flutter是如何创建布局?以及三棵树之间他们是如何协同呢?...()创建相应Element对象,最后将这些对象组建成Element树; 接下来会创建第三个树,这个树包含了与Widget对应Element通过createRenderObject()创建RenderObject...在 Java 或者 C++ ,我们需要通过三元表达式 (a != null)? a : b 实现这种情况。而在 Dart ,这类代码可以简化为 a ?? b。...经分析得出,要实现这样需求,我们需要两个 Sliver:作为头图 SliverAppBar,与作为列表 SliverList。...flexibleSpace 可以让背景图显示在 AppBar 下方,高度和 SliverAppBar 一样; 而在创建 SliverList 时,通过 SliverChildBuilderDelegate

    1.9K40

    Flutter | 滚动组件,ListView,GridVIew等

    ( ... ), ); 复制代码 Scrollbar 和 CupertinoScrollbar 都是通过监听滚动通知确定滚动条位置 CupertinoScrollbar CupertinoScorllbar...可以使用 Fix 完成,在 弹性布局,可以使用你Expanded 来自动拉伸组件大小,并且 Column 是继承自 Fix,所以可以直接使用 Column + Expanded 实现 Column...,效果如下: 总结 上面主要介绍了 ListView 公共参数和构造函数,不同构造对应了不同列表生成模型,如果需要自定义列表生成模型,可以通过 ListView.custom 定义,他需要实现一个...Widget数组 作为其子元素,这些方式会提前创建好 widget,只适用于 widget 数量较小时候,当 widget 比较多时候,可以通过 GridView.builder 动态创建子 Widget...:SliverAppBar 对应 AppBar,两者不同之处在于 SliverAppBar 可以集成到 CustomScrollView SliverAppBar 可以结合 FlexibleSpaceBar

    8.5K20

    如何使用msprobe通过密码喷射和枚举查找微软预置软件敏感信息

    关于msprobe  msprobe是一款针对微软预置软件安全研究工具,该工具可以帮助广大研究人员利用密码喷射和信息枚举技术寻找微软预置软件隐藏所有资源和敏感信息。...该工具可以使用与目标顶级域名关联常见子域名列表作为检测源,并通过各种方法尝试识别和发现目标设备微软预置软件有效实例。  ...支持产品  该工具使用了四种不同功能模块,对应是能够扫描、识别和发下你下列微软预置软件产品: Exchange RD Web ADFS Skype企业版  工具安装  该工具基于Python开发,...除此之外,我们也可以使用pipx来下载和安装msprobe: pipx install git+https://github.com/puzzlepeaches/msprobe.git  工具使用  工具帮助信息和支持功能模块如下所示...Verbose模式输出查找RD Web服务器: msprobe rdp acme.com -v 搜索目标域名托管所有微软预置软件产品: msprobe full acme.com  工具运行截图

    1.2K20

    6详解AppBar小部件

    由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐小部件列表。我们通常在用作按钮应用程序中看到它们触发下拉菜单、个人资料头像等。...AppBar 现在我们熟悉了 AppBar 布局,让我们通过使用主题选项将自定义提升到一个新水平。...Flutter 中使用 AppBar 布局 ( leading, title, 和actions) 如何自定义 AppBar 布局和添加小部件 如何为 AppBar 图标、文本、背景、高度、阴影颜色和工具栏设置主题...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar,当 SliverAppBar

    16.4K10

    Flutter 实现完美的双向聊天列表效果,滑动列表知识点

    ; Scrollable :它主要通过对手势处理实现滑动效果; Sliver : 准确来说应该是 RenderSliver, 它主要是用于在 Viewport 里面布局和渲染内容,比如 SliverList...; 黄色部分就是 SliverList , 当我们滑动时其实就是它在 Viewport 里位置发生了变化; 本来一切正常,但是当我们通过 insert 添加绿色部分数据时,插入头部数据就会...所以本质上是 SliverList 变长了,起点变了,从而在 Viewport 里位置发生了变化。 那如何去解决这个问题呢?有人可能就会说,那我们让他 jump 回原来位置不就行了吗?...如下图所示,我们通过记录原本位置,然后添加数据,之后得到添加数据大小,之后 jump 到原来位置,效果就是会出现闪动~ 所以如何解决这个问题呢?...另外 center 是一个 Key对象, 也就是除了默认之外,我们可以通过 Key 指定我们想要 center 位置。

    1.3K10

    如何为Ubuntu Dock图标启用最小化点击功能?

    如果各自应用程序已经处于焦点,则不会最小化。它会保持静止。您需要使用最小化按钮最小化它,以查看背景上其他窗口。 如果运行同一应用程序多个窗口,您将看到所有窗口预览。...单击任何窗口即可将其向前移动。 这是Ubuntu Dock默认行为。在其他桌面环境,例如Deepin,当我单击启动器图标时,如果应用程序已经在运行,则相应应用程序将最小化停靠。...要安装dconf-editor,请从终端运行以下命令: 安装后,通过从终端输入以下命令启动它。 您也可以从Dash启动它。 首次启动时,您将收到以下警告消息。 点击“我会小心。”按钮继续。...单击右上角搜索按钮,搜索“dash-to-dock”。 您将看到以下结果。 单击“/org/gnome/shell/extensions/dash-to-dock/”文件夹。...现在,通过单击任何正在运行应用程序图标验证是否启用了“最小化点击”功能,您将看到相应应用程序被自动最小化以停靠。

    1.7K10

    实现点击换一批切换内容,flutter之CustomScrollView【flutter20个实例之八】

    一、老套路,先看样式 左图是我业务样式,右图是下方源码展示样式(复制可直接运行,无额外组件引入) 二、讲解 1.涉及组件 首先,没有一个单一组件实现这个效果 实现这个效果涉及以下组件: AppBar...:顶端栏,一个最基本软件 Text:文本 Container:布局组件 CustomScrollView:自定义滚动效果组件,比如列表和网格组件都可以包含在其中 SliverGrid:网格视图组件 SliverList...,判断当前内容是否满足18条(一屏展示数目) 如果不满足,说明最后一页了,重置页码为1 如果满足,说明当前数据>=18,后面可能还有数据,页码+1 然后请求数据,_getData()是封装一个请求数据函数..._getData(); } //获取数据, 为了测试方便, 我处理为了静态数据 _getData() async { //_list数据应该是通过网络请求获得 print(...new Icon(Icons.arrow_back, color: Colors.black38), onPressed: () { print('返回按钮

    1.4K20
    领券