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

在颤动中添加SliverAppBar和SliverList之间的空格

在Flutter中,可以使用SliverAppBar和SliverList来创建具有可滚动效果的页面。SliverAppBar是一个可折叠的应用栏,而SliverList是一个可滚动的列表。在SliverAppBar和SliverList之间添加空格的方法有多种。

一种简单的方法是在SliverAppBar和SliverList之间添加一个SliverPadding小部件。SliverPadding可以在Sliver中添加填充,以创建空白区域。以下是一个示例代码:

代码语言:txt
复制
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      // AppBar的设置
      // ...
    ),
    SliverPadding(
      padding: EdgeInsets.only(top: 10.0), // 在顶部添加10像素的空白区域
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            // 构建列表项
            // ...
          },
          childCount: 10, // 列表项数量
        ),
      ),
    ),
  ],
)

在上面的示例中,通过在SliverPadding中设置padding属性来添加顶部空白区域。你可以根据需要调整填充的大小。

除了使用SliverPadding,还可以使用其他方法来添加空白区域。例如,你可以在SliverAppBar和SliverList之间添加一个SliverToBoxAdapter小部件,并在其中放置一个Container小部件,设置Container的高度来创建空白区域。以下是一个示例代码:

代码语言:txt
复制
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      // AppBar的设置
      // ...
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 10.0, // 设置高度为10像素的空白区域
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          // 构建列表项
          // ...
        },
        childCount: 10, // 列表项数量
      ),
    ),
  ],
)

在上面的示例中,通过在SliverToBoxAdapter中放置一个具有指定高度的Container来创建空白区域。

总结起来,要在SliverAppBar和SliverList之间添加空格,可以使用SliverPadding或SliverToBoxAdapter来创建空白区域。这些方法可以根据需要调整填充或容器的大小来满足设计要求。

关于Flutter的SliverAppBar和SliverList的更多信息,你可以参考腾讯云的Flutter开发文档:SliverAppBarSliverList

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

相关·内容

  • Flutter | Slivers 系列

    ,等这种就可以直接使用 SliverAppBar,SliverList SliverGrid Slivers 不是单独指一个组件,而是指一个系列,所以以 Sliver 开头组件都是这个系列,但是他们都只能作用于...最主要原因就是可以 slives 添加多个组件,如在列表上面下面添加更多内容。...这个delegate,它可以实现动态加载,当然 SliverList 也有 ListView 中一样非动态加载delegate,就是SliverChildListDelegate SliverList... slivers 系列SliverAppbar 可以说是使用频率比较高组件了,SliverAppbar 为应用栏提供了自定义滚动行为,下面我们来看一下 class _MyHomePageState...SliverAppbar,并没有实现任何特殊效果,默认效果如下: 可以看到滑动过程SliverAppbar 被顶上去了,这也是非常正常

    1.5K11

    如何批量添加中文英文数字之间空格?用正则表达式吧

    1、中文与英文数字混合使用,排版有规范 写作,我们经常遇到以下中文与英文、数字混用情况。 我自学python编程,是xue.cn上进行。...时耗方面,基础功仅需50多小时,加上很多实战,包括初步运用pandas爬虫处理业务需求,加在一起也才200多小时而已。 其实,中文和数字、英文之间有一个空格会更美观。...但日积月累,这也将是一项不菲时间开销。 要么,可以试试用正则匹配批量处理。——正是我这篇笔记想要分享。你无须懂编程,也可使用特定工具快速完成批量添加中文英文数字之间空格。...普通模式可直接复制粘贴你想要样式,即便它有换行也是 OK 。——常见办公软件通常不支持复制粘贴换行,这足见 vscode 强大实用。 ?...回到最初需求,想要在中文紧挨着英文数字之间增加空格,分别处理中文左、中文右两个情况即可完成。是不是很简单呢? 3、背后原理?10 分钟系统理解正则表达式 这背后知识点,就是正则表达式。

    2.4K20

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

    SliverList Viewport 里产生滑动; 黄色部分就是 SliverList , 当我们滑动时其实就是它在 Viewport 里位置发生了变化; 了解完这个基础理念后,就可以知道一般情况下...RenderSliver 我们都知道 Flutter 整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样过程,而 Flutter 里布局绘制逻辑都在...RenderBox SingleChildScrollView 内部使用是 RenderBox ,那么布局过程自然而然会把整个 child 都进行布局计算,绘制时主要也是通过 offset...,那他们之间是滑动关系是如何处理?...NestedScrollView 里使用 SliverAppBar,本质上 SliverAppBar 实现靠就是 SliverPersistentHeader。

    2.2K51

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

    RenderSliver 我们都知道 Flutter 整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样过程,而 「Flutter 里布局绘制逻辑都在...RenderBox  SingleChildScrollView 内部使用是 RenderBox ,那么布局过程自然而然会把整个 child 都进行布局计算,绘制时主要也是通过 offset ...,那他们之间是滑动关系是如何处理?...了解完 NestedScrollView 布局联动实现之外,最后简单介绍一下  SliverPersistentHeader , 因为经常在  NestedScrollView 里使用  SliverAppBar...image.png 以第一个 _SliverFloatingPinnedPersistentHeader 最后一个 _SliverScrollingPersistentHeader 之间对比为例子

    1.1K30

    Flutter 粘合剂CustomScrollView控件

    老孟导读:快乐51假期结束了,切换为努力模式,今天给大家分享CustomScrollView组件,此组件以后项目中会经常用到,CustomScrollView就像一个粘合剂,将多个组件粘合在一起,...Sliver系列组件有很多,比如SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。...相互嵌套场景 实际业务场景中经常见到这样布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动时候做为一个整体,此场景是无法使用GridView+ListView来实现...primary设置为true时,不能设置controller,因为primarytrue时,controller使用PrimaryScrollController,这种机制带来好处是父组件可以控制子树可滚动组件滚动行为...,例如,Scaffold正是使用这种机制iOS实现了点击导航栏回到顶部功能。

    2K20

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

    前期回顾: •Flutter实战 | 从 0 搭建「网易云音乐」APP(一、创建项目、添加插件、通用代码)•Flutter实战 | 从 0 搭建「网易云音乐」APP(二、Splash Page、登录页、...1.SliverAppBar2.SliverAppBar bottom3.SliverList 整个页面就是用 CustomScrollView 来做,但是有一点不同: 平时我们使用 SliverAppBar...1.标题,不用多说,是一样2.SliverAppBar 展开状态时内容,是不是可以由外部传入3.播放全部,也是一样,后面有个「共多少首」,也可以由调用者传入4.最下面的歌单,是不是也可以封装出一个组件来...5.忘记标了,还有一个是SliverAppBar展开时模糊背景,也可以由调用者传入 so,我们从上往下来封装。...先封装SliverAppBar bottom 确定一下需求,看看需要传入哪些参数: 1. count:共多少首歌 2. tail:尾部控件 3. onTap:点击播放全部时回调 bottom 需要是一个

    1.5K20

    Flutter开发实战分析-pesto_demo解析

    因为是MDCard样式,所以需要在最外层包裹一层Card 同时,图中未标注是,padding部分。Flutter,要实现padding,只要在它包裹在外面一层布局下就可以了。...结合SliverAppBarSliverGrid来进行整体绘制。 CustomScrollView 使用它,可以结合Sliver来创造自定义滚动效果。...比如说 做一个MD中常用app bar 扩展效果,就可以使用SliverAppBarSliverListSliverGrid来完成。 会创造RenderSliver对象。...SliverAppBarflexibleSpace来存放appBar内显示其他控件 默认 SliverAppBarpined为false,故他会跟着滚上去。...(这个用法超级常见方便) Table TableRow TableCell组件来显示简单表单功能 使用CustomScrollView结合SliverAppBarSliverList来实现经典

    2.3K20

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

    顶部状态栏日常是必不可少,今天和尚尝试一下可折叠状态栏使用; 和尚以前在学习滑动冲突时曾用过 Sliver 系列 Widget,和尚这次尝试用 SliverAppBar...来处理; SliverAppBar 源码分析 const SliverAppBar({ Key key, this.leading, this.automaticallyImplyLeading...elevation 共同使用,false 时不展示,true 时根据 elevation 设置效果展示; 如图: backgroundColor:背景色; brightness:主题亮度,主要是 light ...bottom:添加状态栏底部小部件,需要是 PreferredSizeWidget 类型 Widget; bottom: TabBar(tabs: [ Tab(icon: Icon(Icons.border_left...true;官方推荐样例视频很好诠释出滑动过程列表滑动与顶部状态栏滑动变化; floating: false, pinned: false, snap: false floating: true

    1.4K51

    Flutter | 滚动组件,ListView,GridVIew等

    可滚动组件中有很多都支持 Sliver 延时构建模型,如 ListView,GridView ,但是也有不支持改模型 SingleChildScrollView 主轴纵轴 滚动组件坐标描述,...组件; 典型一个懒加载列表,如果将列表包裹在 AutomaticKeepAlive 改了吧划出视口时,他也不会被 GC 回收(垃圾回收),他会使用 KeepAliveNotification...color: Colors.red)), ); }, ); } } 复制代码 ListView.separated ListView.separated 可以在生成列表项之间添加一个分隔组件...childAspectRatio:子元素横轴长度主轴长度比例。...:SliverAppBar 对应 AppBar,两者不同之处在于 SliverAppBar 可以集成到 CustomScrollView SliverAppBar 可以结合 FlexibleSpaceBar

    8.5K20

    使用 DMA FPGA HDL 嵌入式 C 之间传输数据

    使用 DMA FPGA HDL 嵌入式 C 之间传输数据 该项目介绍了如何在 PL HDL 与 FPGA 处理器上运行嵌入式 C 之间传输数据基本结构。...介绍 鉴于机器学习人工智能等应用 FPGA 设计硬件加速兴起,现在是剥开几层“云雾”并讨论 HDL 之间来回传递数据(主要指FPGA 可编程逻辑 (PL) 运行代码以及 FPGA 硬核或软核处理器上运行相应软件之间传输数据...因此,要成为一名高效设计人员,就必须掌握如何在硬件软件之间来回传递数据技巧。 本例,使用是 Zynq SoC(片上系统)FPGA,它具有硬核 ARM 处理器。...为了将 Verilog 状态机添加到模块设计,我右键单击模块设计空白区域,然后选择“添加模块...”选项,该选项将显示 Vivado 可以设计源中找到所有有效 Verilog 模块BD中使用文件...步骤 4 5 之间发生一些其他进程是可以,但步骤 2 - 4 必须在步骤 5 - 7 之前发生。

    74910

    【Android 逆向】启动 DEX 字节码 Activity 组件 ( PathClassLoader BootClassLoader 之间插入 DexClassLoader )

    文章目录 前言 一、 PathClassLoader BootClassLoader 之间插入 DexClassLoader 1、创建 DexClassLoader 2、使用 DexClassLoader...实例对象作为 PathClassLoader 父节点 二、完整代码示例 三、执行结果 四、博客资源 前言 ---- 上一篇博客 【Android 逆向】启动 DEX 字节码 Activity...组件 ( 替换 LoadedApk 类加载器 | 加载 DEX 文件 Activity 类并启动成功 ) , 通过 替换 LoadedApk 类加载器可以成功加载 DEX 字节码文件...| 失败原因分析 | 自定义类加载器没有加载组件类权限 ) 博客 提出 加载组件类 第二种方案 ; 一、 PathClassLoader BootClassLoader 之间插入 DexClassLoader...// 类加载器双亲委派机制 PathClassLoader BootClassLoader 之间 // 插入 DexClassLoader if

    1.2K30

    合并列,【转换】添加列】菜单功能竟有本质上差别!

    有很多功能,同时【转换】添加】两个菜单中都存在,而且,通常来说,它们得到结果列是一样,只是【转换】菜单功能会将原有列直接“转换”为新列,原有列消失;而在【添加】菜单功能,则是保留原有列基础上...,“添加”一个新列。...但是,最近竟然发现,“合并列”功能,虽然大多数情况下,两种操作得到结果一致,但是他们却是有本质差别的,而且一旦存在空值(null)情况,得到结果将有很大差别。...比如下面这份数据: 将“产品1~产品4”合并到一起,通过添加方式实现: 结果如下,其中空值直接被忽略掉了: 而通过转换合并列方式: 结果如下,空内容并没有被忽略,所以中间看到很多个连续分号存在...当然,要学会修改,首先要对各类操作比较熟悉,同时,操作时候,也可以多关注一下步骤公式结构含义,这样,随着对一些常用函数熟悉,慢慢就知道在哪里改,怎么改了。

    2.6K30

    【DB笔试面试592】Oracle,表之间关联方式有哪几种?

    ♣ 题目部分 Oracle,表之间关联方式有哪几种?...Oracle数据库中有一个隐含参数“_OPTIMIZER_SORTMERGE_JOIN_ENABLED”控制着SMJ启用关闭,该参数默认值是TRUE,表示启用SMJ连接。...嵌套循环连接,Oracle读取驱动表(外部表)每一行,然后在被驱动表(内部表)检查是否有匹配行,所有被匹配行都被放到结果集中,然后处理驱动表下一行。...这种连接是Oracle 7.3引入,从理论上来说比NL与SMJ更高效,而且只用在CBO(Cost Based Optimization,基于代价优化器)优化器。...Oracle数据库中有一个隐含参数“_HASH_JOIN_ENABLED”控制着HJ启用关闭,该参数默认值是TRUE,表示启用HJ连接。

    2.1K10
    领券