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

如何在SliverAppBar的底部添加一个按钮,并使其在ExtentList上重叠?

在SliverAppBar的底部添加一个按钮,并使其在ExtentList上重叠,可以通过以下步骤实现:

  1. 首先,在SliverAppBar的bottom属性中添加一个Container组件,用于包裹按钮。
  2. 在Container组件中,设置alignment属性为Alignment.bottomCenter,使其位于底部中间位置。
  3. 在Container组件中,添加一个按钮组件,例如FloatingActionButton,用于实现底部按钮。
  4. 为了使按钮在ExtentList上重叠,需要将ExtentList组件包裹在一个Stack组件中。
  5. 在Stack组件中,首先放置ExtentList组件,然后放置一个Positioned组件,用于定位底部按钮。
  6. 在Positioned组件中,设置bottom属性为0,使按钮位于底部。
  7. 在Positioned组件中,设置left和right属性为0,使按钮水平方向上与ExtentList宽度一致。

以下是示例代码:

代码语言:txt
复制
SliverAppBar(
  // 其他属性...
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(56.0),
    child: Container(
      alignment: Alignment.bottomCenter,
      child: FloatingActionButton(
        onPressed: () {
          // 按钮点击事件
        },
        child: Icon(Icons.add),
      ),
    ),
  ),
),

CustomScrollView(
  slivers: <Widget>[
    // 其他Sliver组件...
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Stack(
            children: <Widget>[
              ExtentList(
                // ExtentList的配置...
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                  height: 56.0,
                  child: RaisedButton(
                    onPressed: () {
                      // 按钮点击事件
                    },
                    child: Text('底部按钮'),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ],
),

这样,就可以在SliverAppBar的底部添加一个按钮,并使其在ExtentList上重叠。

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

相关·内容

6详解AppBar小部件

AppBar 应用栏是各种应用程序中最常用组件之一。它可用于容纳搜索字段、以及页面之间导航按钮,或者只是页面标题。...由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...leading放置AppBar最左边位置;titleactions出现在它右边。...工具栏包含文字,图标,按钮,和其他任何公司前景,除了小部件,Container和Image。...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar,当 SliverAppBar

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

    ,//标题前面显示一个控件,首页通常显示应用 logo;在其他界面通常显示为返回按钮 this.automaticallyImplyLeading = true, this.title...来表示;对于不常用菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示 AppBar 下方控件,高度和 AppBar...高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget 对象,通常是 TabBar。...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当...,有时候我们需要定义,有时候也仅是简单返回一层,就需要自定义了,他支持子组件。

    1.4K20

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

    二、讲解(后附源码) 1.这里主要是用户AppBar组件 /** AppBar({ Key key, this.leading,//标题前面显示一个控件,首页通常显示应用...来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示 AppBar 下方控件,高度和 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当...SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值 this.backgroundColor...,有时候我们需要定义,有时候也仅是简单返回一层,就需要自定义了,他支持子组件。

    90910

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

    ,基本和 GridView 和 ListView 用法差不多,所以这边就不多讲这两个部件了。...,1.0 为一个屏幕大小 }) 如果一个滑动列表,每个 item 需要占满一个屏幕或者更大,可以使用该部件生成列表,但是如果 item 高度小于一个屏幕高度,那就不太推荐了,首尾会用空白 item...糟透了翻译 X 1:一个内部能够嵌套其他滚动部件,使其滚动位置联结到一起滚动部件 /// The most common use case for this widget is a scrollable...糟透了翻译 X 2:最常用情况,就是在其 headerSliverBuilder 中使用携带 TabBar SliverAppBar(就是使用 SliverAppBar bottom 属性添加...X 6:一个 sliver 部件,用于把部件重叠高度反馈给 SliverOverlapAbsorberHandle,而且指明了 handle 不能空,可以通过 NestedScrollView

    2.2K30

    uni-appH5适配全面屏

    # 适用场景 页面带有操作按钮,例如「确定」、「提交」、「删除」之类,操作按钮需要置底显示情况。...如下图: image.png 可以看到页面底部 home indicator 横条与操作按钮重叠了。 # 解决方法 主要方法就是需要判断当前是否是全面屏然后为底部操作栏增加相应样式。...我们可以uni-app项目的公用函数里添加一段js来判断 function() { let isFullScreen = false const rate = window.screen.height... Windows 这样操作系统中,这个可用高度不包括分配给半永久特性(屏幕底部任务栏)垂直空间。... Windows 这样操作系统中,这个可用高度不包括分配给半永久特性(屏幕底部任务栏)垂直空间。 window.screen.width:声明了显示浏览器屏幕宽度,以像素计。

    2.8K20

    UITableViewFlutter中是什么?

    不过,这种创建方式要求提前将所有子Widget一次性创建好,而不是等到他们真正在屏幕显示时候才会创建,所以有一个很明显缺点,就是性能不好。因此,这种方式仅适用于列表中含有少量元素场景。...具体实现思路是: 创建SliverAppBar时,把 flexibleSpace 参数设置为悬浮头图背景。...如下代码所示,我们声明了一个有着100个元素列表项,当滚动视图到特定位置后,用户可以点击按钮返回到列表顶部: 首先,我们State初始化方法里,创建了ScrollController,通过_controller.addListener...随后,视图构建方法build中,我们将ScrollController对象与ListView进行了关联,并且RaisedButton中注册了对应回调方法,可以点击按钮时通过_controller.animateTo...与ScrollController不同是,NotificationListener是一个Widget,为了监听滚动类型事件,我们需要将NotificationListener添加为ListView父容器

    5.6K10

    Flutter | Slivers 系列

    概述 CustomScrollView:一个滚动容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动列表, Appbar, 列表,网格...最主要原因就是可以 slives 中添加多个组件,如在列表上面和下面添加更多内容。... SliverPrototypeExtentList 中,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕,在运行过程中,Flutter 会将原型尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型尺寸...SliverAppbar,并没有实现任何特殊效果,默认效果如下: 可以看到滑动过程中,SliverAppbar 被顶上去了,这也是非常正常。...区别就是滑动时候 SliveAppbar 底部会有一点点影子 snap:滑动停止之后,导航会自动全部显示出来,需要注意是必须搭配 floating 一起使用,如下: SliverAppBar

    1.5K11

    flutter组件6【AppBar使用】

    1.图示 2.解释 AppBar 有以下常用属性: leading → Widget - 标题前面显示一个控件,首页通常显示应用 logo;在其他界面通常显示为返回按钮。...bottom → PreferredSizeWidget - 一个 AppBarBottomWidget 对象,通常是 TabBar。用来 Toolbar 标题下面显示一个 Tab 导航栏。...elevation → double - 控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当 SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar...flexibleSpace → Widget - 一个显示 AppBar 下方控件,高度和 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用。...textTheme → TextTheme - Appbar 文字样式。 centerTitle → bool - 标题是否居中显示,默认值根据不同操作系统,显示方式不一样。

    1.2K20

    按钮与交互-使用按钮触发操作

    设置 现在,您可以更改项目名称添加应用程序图标。设置页面中,将显示名称更改为角度AR或所需名称。资产目录中,将应用程序图标从assets文件夹拖放到选定插槽中。...主要故事板 我们屏幕放置一些按钮。使用模板,主故事板附带一个ARSCNView,我们无法在其放置按钮。首先,删除ARSCNView放置UIView。...拥有UIView,允许我们放置这3个按钮添加约束。...解决方案是声明另一个变量使其成为与iPhoneNode相同节点。根级别和渲染器内声明变量iPhoneXNode,将2个变量匹配在一起。...diffuse.contents = UIImage(named: "art.scnassets/AR-Screen.png") } 结论 本节中,我们学习了如何在Storyboard中放置按钮约束它们

    4.6K20

    一个简单完整网页密码_简单个人网页

    input输入框还有一个按钮+下面的通栏 因为用到左浮,右浮地方不同我们可以写一个通类 这里logo图片如果不定义宽高会影响下面的通栏设置,影响其中一个为首顺序无法对齐 二、通栏...(宽度为适应屏幕所以是100%,不用设定了) 效果 分析:有一个ul里面有6个li,鼠标滑过时候文字颜色改变(hover),ul整个通栏nav中用一个nav-con这个命名div包住,使其居中显示...①图片+文字(),还有正中间图片+左右箭头图片用(子绝父相)position ②图片+文字(),列表项ul,li,border-bottom用dashed虚线,“致歉公告”单独设置样式 ③图片...+文字(),也是列表项这个我用div包住,还有下面的p标签段落 六、底部 效果 注意:这里news部分用到一个类来清除浮动,这样保证news部分和底部不发生重叠clearfix...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    74840

    iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

    添加联系人按钮: 展示联系人列表 帮助用户将一个联系人添加到当前联系人按钮所在视图中 使用添加联系人按钮让用户不需要使用键盘情况下就可以方便地访问到联系人。...API注释 想要了解如何在代码中定义信息按钮,可以参考UIButton. iOS包含了两种信息按钮样式:适用于浅色内容深色按钮,以及适用于深色内容浅色按钮。...如果用户可以在你应用程序打开超过20个视图,请考虑给视图一个不同展示方式,以提供关于视图详细信息,使其支持不连续导航。 在打开视图底部边缘和屏幕底部边缘里垂直居中页面控件。...但在某些特定内容区域内,为按钮描边或者添加背景颜色,让用户迅速地把注意力放到按钮,也是必要。Value 2布局中,文本和副标题中间垂直间距会让用户专注于副标题一个单词。...你可以自定义一个文本框,帮助用户更好地理解如何使用它。举个例子,你可以文本框左侧或者右侧加入自定义图形,或者加入系统按钮书签按钮等。

    13.2K30

    Flutter | 滚动组件,ListView,GridVIew等

    这种机制带来好处是父组件可以控制子树中可滚动组件滚动行为,例如,Scaffold 正是使用这种机制 IOS 实现了点击导航栏回到顶部功能 Scrollbar Scrollbar 是一个 Material...风格滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需要将 Scroolbar 作为可滚动组件任意一个父级组件即可,: Scrollbar( child: SingleChildScrollView...其实此属性本质是决定可滚动组件初始滚动位置是 头 还是 尾 , false 时,初始位置头,反之则在 尾 primary:指是否使用 widget 树中默认 PrimaryScrollController...,then 是异步执行完成回调 还有问题可以参考这篇文章 最终效果如下: 添加固定列表头 很多时候我们需要给列表添加一个固定表头,比如实现一个商品列表,就需要在列表添加一个 商品列表 标题 以往经验告诉我...实现 Material Design 中头部伸缩模型 2,SliverGrid:被 SliverPadding 包裹,添加内边距 3,底部 SliverFiexdExtentList :是一个所有元素都为

    8.5K20

    何在 SwiftUI 中创建悬浮操作按钮

    以下是 Twitter 应用中悬浮操作按钮示例。Twitter App 最重要操作步骤,发布推文时使用悬浮操作按钮。如下图,右下角有一个蓝底中间有加号按钮。...悬浮按钮带有一个轻微阴影。这是要实现悬浮按钮所有行为。让我们逐步实现这些需求。在此之前,需要先创建初始化一个屏幕用来承载这个悬浮按钮。...将一个按钮放在内容视图上。这将在列表视图上添加一个加号图像按钮。示例运行截图如下:悬浮按钮位于屏幕右下角接着,是需要实现需求中第二步,使按钮与内容视图对齐到右下角。...我们还在按钮周围添加了填充,以使其不会过于靠近边缘。示例运行截图如下:使悬浮按钮呈现圆形接着,是需要实现需求中第三步,使悬浮按钮具有圆角形状,并在中心具有一个图标。...添加阴影最后,是需要实现需求中第四步,使悬浮按钮带有一个轻微阴影。我们通过添加阴影为其增色,使其看起来像悬浮。

    16432

    处理视觉冲突 | 手势导航 (二)

    如果您控件出现在了这些区域内,就可能被系统 UI 遮盖。自然,我们可以使用 insets 区域来尝试解决视觉冲突,把视图从屏幕边缘向内移动到一个合适位置。...我们来看一个使用系统窗口区域例子。我们有一个悬浮操作按钮 (FAB),它位于屏幕右下角,距离屏幕边缘 16dp (这符合设计指南中要求)。...注意,使用可点击区域里数值进行布局时,依然可能导致自己控件与系统 UI 视觉重叠,这一点与系统窗口区域 insets 不同,使用后者值对自己控件进行位移后能确保不会与系统/导航栏发生视觉重叠... Android 10 ,当前唯一强制区域是屏幕底部主屏手势区域,系统保留这个区域就可以让用户在任何时候都可以退出当前应用: △ 底部 60dp 即为强制系统手势边衬区 稳定显示边衬区 方法:...在有些显示模式下 (比如放松模式和沉浸模式),系统 UI 可能会根据情况可见与不可见之间切换 (游戏、照片浏览、视频播放器等)。

    2.8K30

    一篇文章读懂UI按钮设计细节与规范

    结账按钮可以通过购物篮或者购物车图标促使用户快速识别,但前提依然是要将“结账”一词显示出来。 ? 在按钮标签之后放置向右箭头,可以让按钮导向性进一步加强。用户更加迫切点击继续操作。...与平面化按钮相比,带有阴影按钮也可以让用户有更强点击欲望,并且更快注意到这个按钮。在按钮添加一个微妙阴影,可以让它从背景中脱颖而出。关于按钮阴影最佳实践将在本章稍后讨论。 ?...太会让你感觉左边距和上方文本不在同一个位置(也就是说没有对齐)。 ? 对齐图标 在按钮上进行良好图标对齐是一件很困难事情。很多情况下,字体粗细,图标粗细之间关系都会影响到对齐。...这个图形应该在一个视觉形状中有填充,以便与我们文本高度相同。然后,将图标放置较小形状中。 如果是人字形图标,那么最高使其与文本高度相同,并且您还可以根据字体宽度检查线宽。...边缘平衡 如果你使用是圆角按钮,请记住将正确圆角比率与屏幕其它元素对齐。在所有的情况下使用一种设置会造成视觉边际不平衡。 ? 对角线间距与左侧和底部对角线间距相同。

    3.8K30
    领券