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

flutter -将固定的标题添加到SliverList

Flutter是一种跨平台的移动应用程序开发框架,由谷歌开发并推出。它使用Dart编程语言,允许开发人员使用单个代码库创建高性能、美观且响应迅速的移动应用程序。

在Flutter中,可以使用SliverList来创建可滚动的列表,SliverList是一个基于Sliver的组件,它可以无限地延伸并且具有固定的标题。

要将固定的标题添加到SliverList中,可以使用CustomScrollView组件包裹SliverList,并在CustomScrollView的slivers属性中添加一个SliverPersistentHeader组件。SliverPersistentHeader组件接受一个delegate参数,通过delegate参数可以指定固定标题的大小和内容。

以下是一个示例代码,演示了如何将固定的标题添加到SliverList中:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverPersistentHeader(
              delegate: MySliverHeaderDelegate(),
              pinned: true,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item $index'),
                ),
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MySliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          '固定标题',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }

  @override
  double get maxExtent => 100;

  @override
  double get minExtent => 100;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      false;
}

在这个示例中,我们通过自定义的MySliverHeaderDelegate类来实现固定标题的外观和行为。该类继承自SliverPersistentHeaderDelegate,并重写了build、maxExtent、minExtent和shouldRebuild方法。build方法用于构建固定标题的UI,maxExtent和minExtent定义了标题的最大和最小高度,shouldRebuild方法确定是否应重新构建固定标题。

这里使用的是Flutter官方提供的Material UI组件库,可根据实际需求进行修改和定制。注意,为了使标题保持固定,我们将SliverPersistentHeader的pinned属性设置为true。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云服务器(CVM):提供可扩展的计算能力和高性能的网络,可满足各种规模应用程序的需求。产品介绍链接地址:https://cloud.tencent.com/product/cvm
  • 腾讯云对象存储(COS):提供安全可靠的数据存储和访问服务,适用于图片、视频、音频、文档等各种类型的文件存储和管理。产品介绍链接地址:https://cloud.tencent.com/product/cos

以上是关于Flutter中将固定的标题添加到SliverList的完善且全面的答案。

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

相关·内容

Flutter 3.13 组件更新 | 欢迎 Slivers 体系 5 位新成员

介绍一下 5 个新 Sliver 组件 在 Flutter 3.13 更新中,增加了 5 位新 Sliver 相关组件,用于滑动视口中,完成特定功能。这篇文章介绍一下它们作用和使用场景。...主轴滑片分组: SliverMainAxisGroup 组件 在 《Flutter 滑动探索 - 珠联璧合#第九章》 介绍过一个分组滑动效果,当时使用了 flutter_sticky_header 三方库来实现...具体使用场景是: 比如下面是 QQ 中分组列表滑动效果,组名下有若干成员,组标题在滑动中会进行吸附,而且在滑动到下一组标题时,上一标题会被滑出;同样,下滑时展现也是如此。...其中通过 SliverConstrainedCrossAxis 可以指定某个滑块在水平方向固定尺寸;也可以通过 SliverCrossAxisExpanded 指定在水平方向尺寸占份,下面 tag1...当然也可以自定义 Decoration 自己绘制,装饰详细使用可详见 《 【Flutter 组件集录】 DecoratedBox》 ,这里就不赘述了。

95220

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

本篇主要帮助剖析理解 Flutter列表和滑动组成,用比较通俗易懂方式,从常见 ListView 到 NestedScrollView 内部实现,帮助你更好理解和运用 Flutter滑动列表...SliverList 在 Viewport 里产生滑动; 黄色部分就是 SliverList , 当我们滑动时其实就是它在 Viewport 里位置发生了变化; 了解完这个基础理念后,就可以知道一般情况下...所以在 Flutter 里: ListView 使用是 SliverFixedExtentList 或者 SliverList; GridView 使用是 SliverGrid; PageView...最后需要注意是,当你使用 SliverPersistentHeader 去固定住头部时候,作为 body 列表是不知道顶部有个固定区域。...SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 高度; 使用 SliverOverlapInjector 这个高度配置到 body 列表中,让列表知道顶部存在一个固定高度区域

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

    本篇主要帮助剖析理解 Flutter列表和滑动组成,用比较通俗易懂方式,从常见 ListView到 NestedScrollView 内部实现,帮助你更好理解和运用 Flutter滑动列表...Flutter 滑动列表 在 Flutter 里我们常见滑动列表场景,简单地说其实是由三部分组成: Viewport :它是一个 MultiChildRenderObjectWidget 控件 ,「...所以在 Flutter 里: ListView 使用是 SliverFixedExtentList 或者  SliverList; GridView 使用是 SliverGrid; PageView...最后需要注意是,「当你使用 SliverPersistentHeader 去固定住头部时候,作为 body列表是不知道顶部有个固定区域。」 ... SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 高度; 使用 SliverOverlapInjector 这个高度配置到 body 列表中,让列表知道顶部存在一个固定高度区域

    1.1K30

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

    本文通过一个需求场景,介绍一个非常实用 Flutter 列表滑动知识点,该问题来源于网友咨询。...在 《不一样角度带你了解 Flutter滑动列表实现》 我们讲过,Flutter 滑动列表效果主要有三部分组成: Viewport : 它提供是一个“视窗”作用,也就是列表所在可视区域大小...(绿色部分),就会把原本 SliverList 数据往后顶上去,从而产生了 SliverList 位置发现变化。...这就涉及到 Flutter 列表滑动一个关键知识点:center。 什么是列表 center ?...如下面代码所示,因为聊天列表场景,我们列表是 reverse ,所以需要将新数据 SliverList 放在 centerKey 上面,把旧数据 SliverList放在 centerKey

    1.3K10

    flutter中对列表性能优化

    使用 Slivers 列表列表 下面的代码构建了与之前相同 UI,但这次它使用Slivers 而不是收缩包装ListView对象。本页其余部分引导您逐步完成更改。...如何嵌套列表迁移到 Slivers 第1步 首先,最外面的 ListView 更改为SliverList. // Before @override Widget build(BuildContext...SliverList类是比原始略有不同ListView类,与主要差异是的外观delegate。...运行应用程序并注意 Flutter 不再需要立即渲染 100 个 ColorRow 小部件。当您滚动时,会动态构建更多小部件,正如您所期望那样。...更好是,一直滚动到下一个列表也不会产生任何特殊费用。 Flutter 会根据需要重新构建小部件,而且很快。

    3.5K00

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

    :顶端栏,一个最基本软件 Text:文本 Container:布局组件 CustomScrollView:自定义滚动效果组件,比如列表和网格组件都可以包含在其中 SliverGrid:网格视图组件 SliverList...:列表控件 InkWell:效果控件,可以给其他widget包裹一个点击效果 ListTile:标题组件,通常填充listview 2.首先设置下标题样式 getItem是我们主内容 @override...,判断当前内容是否满足18条(一屏展示数目) 如果不满足,说明最后一页了,重置页码为1 如果满足,说明当前数据>=18,后面可能还有数据,页码+1 然后请求数据,_getData()是封装一个请求数据函数...SliverList( delegate: SliverChildListDelegate([ ListTile( onTap:...), ]), ), 4.网格内容其实就是一个SliverGrid,切换数据后,进行了部分页面重新渲染 三、源码(可直接运行调试) import 'package:flutter

    1.4K20

    Flutter 双向聊天列表效果进阶优化

    聊天列表是一个很扣细节场景,在之前Flutter 实现完美的双向聊天列表效果,滑动列表知识点》 里,通过 CustomScrollView 和配置它 center 从而解决了数据更新时列表跳动问题...所以它实际就是黄色部分; 所以虽然绿色 SliverList 虽然新增了数据,但是从 center 往上高度还是不够,所以就出现了黄色 SliverList 顶部空白问题; image...image 如下代码所以,这里针对新交互场景做了优化调整: 去除 CustomScrollView reverse ; 对调两个 SliverList 位置,把加载 old 数据 SliverList...SliverList ,因为起始点在顶部,如果不用下面绿色正向 SliverList ,就会导致第一次数据看不到情况。...,实现一个聊天列表并不难,但是需要优化细节可能会很多, 实例代码可见:https://github.com/CarGuo/gsy_flutter_demo/blob/master/lib/widget

    64040

    Flutter | 滚动组件,ListView,GridVIew等

    可滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局; 可滚动组件都直接或间接包含一个...,可以显式指定一个固定 ScrollPhysics 。...是异步执行完成回调 还有问题可以参考这篇文章 最终效果如下: 添加固定列表头 很多时候我们需要给列表添加一个固定表头,比如实现一个商品列表,就需要在列表添加一个 商品列表 标题 以往经验告诉我...但是由于 listView 高度是固定,就会导致底部留白,这种情况可以使用屏幕高度 减去状态类,导航栏,头部高度。...因此,为了能让可滚动组件能和 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件 Sliver 版,如 SliverList,SliverGrid 等,实际上 Sliver

    8.5K20

    使用 Cloud-init 节点添加到私有云中

    它也是一个可以在你“家庭私有云”中使用很好工具,可以为你家庭实验室虚拟机和物理机初始设置和配置添加一点自动化 —— 并了解更多关于大型云提供商是如何工作信息。...本文向你展示如何在客户端设备上安装 Cloud-init,并设置一个运行 Web 服务容器来响应客户端请求。...它可以包含在树莓派和单板计算机磁盘镜像中,也可以添加到用于 配给(provision)虚拟机镜像中。...在容器文件中添加以下行以 meta-data 文件复制到新镜像中。...在数据源稍显复杂情况下,物理(或虚拟)机器添加到家中私有云中,可以像插入它们并打开它们一样简单。

    1.7K30

    干货 | Flutter控件CustomScrollView原理解析及应用实践

    它像一个强大粘合剂,如图1所示在此控件中我们可以各种不同布局,比如列表,网格,瀑布流,吸顶组件等,在其里面组合,实现较为复杂页面。...当用户再继续往上滑动时,本应该滑出可视区域黄色sliver,因为上面讲处理,一直绘制在屏幕上方,因此实现了吸顶效果。 ?...图19 SliverList布局流程 如图19所示是SliverList布局主要流程,大体可以分为三个阶段。...我们在接触flutter时候也很好奇,下面来看一下SliverList在这块处理。 ? 图20 SliverList单个child创建或重用 ?...图21 SliverList单个child销毁或回收 sliverList创建和回收每个scrollviewchild方法分别如图20和图21所示。

    1.5K30
    领券