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

如何使ListView小部件与AppBar的底部永久相邻?

要使ListView小部件与AppBar的底部永久相邻,可以使用SliverAppBar和SliverList组合来实现。

SliverAppBar是一个可滚动的AppBar,它可以在滚动过程中隐藏或显示,并且可以与其他滚动小部件进行交互。SliverList是一个可滚动的列表小部件,它可以在滚动过程中动态加载和显示列表项。

以下是实现的步骤:

  1. 在Scaffold的body属性中使用CustomScrollView作为主要滚动容器。
  2. 在CustomScrollView的slivers属性中添加一个SliverAppBar小部件,设置其floating属性为true,使其在滚动时自动隐藏。
  3. 在SliverAppBar的bottom属性中添加一个PreferredSize小部件,设置其preferredSize属性为Size.zero,以消除AppBar的底部空间。
  4. 在CustomScrollView的slivers属性中添加一个SliverList小部件,用于显示列表项。

下面是一个示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView with AppBar'),
        ),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              floating: true,
              bottom: PreferredSize(
                preferredSize: Size.zero,
                child: Container(), // 可以添加一些自定义的底部内容
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们使用了CustomScrollView作为主要滚动容器,并在slivers属性中添加了一个SliverAppBar和一个SliverList。SliverAppBar的floating属性设置为true,使其在滚动时自动隐藏。SliverAppBar的bottom属性中添加了一个PreferredSize小部件,并设置其preferredSize属性为Size.zero,以消除AppBar的底部空间。SliverList用于显示列表项,这里使用了SliverChildBuilderDelegate来动态构建列表项。

这样,ListView小部件就与AppBar的底部永久相邻了。

对于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或官方网站获取更详细的信息。

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

相关·内容

Flutter跨平台移动端开发丨顶部导航栏 TabBar Widget

支持左右滑动切换、不限 item 数量 tabbar 是分类信息列表展示必不可少组件,在 flutter 中可通过 AppBar + TabBar + PageView + ListView 完成这个需求...---- TabBar 部件 支持修改 tab 背景颜色、底部横线颜色,tab 上按钮样式以及对应切换页面,可通过 List 传入,这样可以支持更多拓展需求 import 'package:delongzhixuan...item 对应页面 也就是 ListView 部分,修改 initPageWidget 返回 widget 为你需要样式即可 import 'package:flutter/material.dart...- $i", style: TextStyle(color: Color(0xff000000), fontSize: 20.0),), ); }); } } TabBar 部件如何应用...widget(ListView 列表) * * @params itemNameList 存储 tab item 名字集合 * @params itemWidgetList 转化完成后返回集合

1.8K30

Flutter 构建完整应用手册-列表 顶

基础列表 显示数据列表是移动应用程序基本模式。 Flutter包含ListView部件使列表变得轻而易举!...创建一个ListView 使用标准ListView构造函数非常适合仅包含少量项目的列表。 我们还将使用内置ListTile部件来为我们项目提供一个可视结构。...创建一个水平列表 有时,您可能想要创建一个水平滚动而不是垂直滚动列表。 ListView部件支持开箱即用水平列表。...使用长列表 标准ListView构造函数适用于列表。 为了处理包含大量项目的列表,最好使用ListView.builder构造函数。...创建一个包含不同类型条目的列表 我们经常需要创建显示不同类型内容列表。 例如,我们可能正在制作一个列表,其中显示一个标题,后面跟着该标题相关几个项目,后面是另一个标题,等等。

2.5K20

flutter中对列表性能优化

嵌套列表 - ShrinkWrap Slivers 使用 ShrinkWrap 列表列表 下面是一些使用ListView对象呈现列表列表代码,内部列表shrinkWrap值设置为 true。...” “另请注意:虽然ListView.builder(默认情况下)有效地构建其子项,为您节省构建屏幕外小部件不必要成本,但设置 shrinkWrap为true覆盖此默认行为!...而且你滑动时候列表会抖动! 重新构建嵌套列表 要了解如何使用户免受卡顿威胁,请等待我第二节,下一节将使用 Slivers 而不是 ListViews 重建相同 UI。...使用 Slivers 列表列表 下面的代码构建了之前相同 UI,但这次它使用Slivers 而不是收缩包装ListView对象。本页其余部分将引导您逐步完成更改。...SliverList类是比原始略有不同ListView类,主要差异是的外观delegate。

3.5K00

开始使用-编写你第一个Flutter应用程序 顶

如何实现有状态部件如何创建一个无限,延迟加载列表。 如何创建并导航到第二个屏幕。 如何使用主题更改应用程序外观。...该应用程序扩展了使应用程序本身成为小部件StatelessWidget。 在Flutter中,大多数情况都是一个小部件,包括对齐,填充和布局。...小部件主要工作是提供一个build()方法,该方法描述如何根据其他较低级别的小部件来显示小部件。 此示例部件树由包含Text小部件Center小部件组成。...1.将有状态RandomWords小部件添加到main.dart。 它可以在MyApp之外文件中任何位置使用,但解决方案将它放在文件底部。...稍后,您将添加心脏图标进行交互功能。

9.5K20

Flutter中构建布局 顶

Flutter布局机制如何工作。 如何垂直和水平布局小部件如何构建一个Flutter布局。 这是在Flutter中构建布局指南。 您将构建以下屏幕截图布局: ?...然后本指南回过头来解释Flutter布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见布局小部件。...这些小部件安排在ListView中,而不是列中,因为在设备上运行应用程序时,ListView会自动滚动。...使用Scaffold是最容易,它是Material Components库中一个小部件,它提供了一个默认横幅,背景颜色,并且具有添加抽屉,小吃店和底部表单API。...使用ListView显示使用ListTiles业务列表。 分隔线将餐厅餐厅分开。

43K10

Flutter 构建完整应用手册-设计基础知识 顶

这本食谱包含演示如何在写Flutter应用程序时解决常见问题食谱。 每个配方都是独立,可以作为参考帮助您构建应用程序。...在这种情况下,我们需要在屏幕底部显示SnackBar,而不会与其它重要部件重叠,例如FloatingActionButton!...为此,我们将使用TabBarView部件。 注意:顺序很重要,必须TabBar中选项卡顺序相对应!...这些值对应于FontStyle,可用于TextStyle对象fontStyle属性。 3.将字体设置为默认值 对于如何将字体应用于文本,我们有两种选择:作为默认字体或仅在特定部件中。...在这个例子中,我们将使用一个ListView。 尽管我们可以使用Column部件,但ListView在这种情况下很方便,因为如果内容占用空间比屏幕支持更多,它将允许用户滚动抽屉。

7K10

【Flutter 专题】21 图解 ListView 下拉刷新上滑加载(三)

和尚前段时间整理了两种 ListView 异步加载数据时,下拉刷新上滑加载更多方式,每种方式都有自己优势,网上也有很多大神讲解过 ListView 数据流种种处理方式,和尚根据实际遇到情况整理一下尝试第三种方案...: AppBar( title: Text("第三种加载方式"), ), body: new RefreshIndicator( child: ListView.builder...: 初始化时添加监听事件,判断是否滑动到最底部ListView 中添加监听方法。...至此,列表下拉刷新上滑加载更多就基本完成了;接下来需要将两种合并使用,也很简单,如下: body: new Padding( padding: EdgeInsets.all(2.0), child...优化 优化一:【上滑加载更多】添加动画效果 添加一个加载更多布局 Widget; 在 itemCount 中将 item 个数 +1; 添加监听判断,当滑到最后一个 item 时展示加载更多到布局

1.2K41

Flutter之drawer详细分析(你要操作都有)

=> 装载抽屉部件 DrawerHeader =>抽屉头部 SizeBox => 用于限制CircleAvatar大小 CircleAvatar => 头像部件 ListTile =>...image.png 可以看到: Container=>限制高度(默认高度+状态栏高度) BoxDecoration=> 底部添加毫无用处分割线 AnimatedContainer =>动画版Container...image.png 确实,跟ListView有关,这是什么原因导致ListView加上一个statusBarHeight大小内边距呢?我们可以继续找ListView源码 ?...image.png 可以直接点击ListView构造方法,跳转到455行可看到 1.当ListView属性padding为空时,获取MediaQueryData信息 2.因为ListView...image.png 可以看到Drawer这个部件就是我们平常一些部件组合而成 Semantics=> 语义,用于给无障碍 ConstrainedBox => 限制Drawer宽度,以至于Drawer

3.9K20

Flutter 黏贴卡动画效果

Flutter动画支持使实现各种动画类型变得容易。许多小部件,特别是“Material”小部件,都伴随着其设计规范中所描述标准运动效果,但是与此同时,也可以自定义这些效果。...我们将看到如何在flutter应用程序中实现使用slimy_card包制作动画粘纸卡。...pub 地址:https://pub.dev/packages/slimy_card SlimyCard: SlimyCard提供了一张类似于卡粘液状动画,可分为两张不同的卡,一张在顶部,另一张在底部...可以将任何自定义窗口小部件放置在这两个单独的卡中。 属性 slimy_card 包一些属性: **颜色:**这些属性表示用户添加他们想要任何颜色。...在topCardWidget中,我们将添加一个列小部件。在该列内,我们将添加一个容器小部件。在容器中,我们将添加高度,宽度和装饰图像。我们还将添加两个文本并将它们包装到中心。

2.1K20

Flutter 入门指北之滑动部件(超详细)

前面的小节基本上讲完了常用部件和容器部件,也可以完成很多界面,但是又一个问题,假如我们要显示一段文字,比如将 一段又臭又长文字 在界面上显示 1000 次,不难完成吧 // ..省略一些无关代码...那么这里提下可滑动容器部件 SingleChildScrollView 这个部件非常简单,不贴源码了。最简单使用方式只需要提供一个 child 即可。...来实现,Flutter 也提供了类似的部件 ListView 实现 ListView 方法主要有 通过 ListView 设置 children 属性实现 通过 ListView.custom 实现...因为 GridView 和 ListView 亮着都是可滑动部件,直接拼接肯定会有「滑动冲突」,所以 Flutter 就提供了一个粘合剂,CustomScrollView,那么 Flutter 如何实现呢...在结束前,我们再说下如何通过 ScrollController 来控制 Scrollable 滚动位置。

2.4K30

【Flutter 专题】107 图解自定义 ACEPageMenu 滑动菜单 (二)

Offstage & Opacity 和尚在刚开始尝试过程中遇到一个问题,当只展示顶部和底部 Menu 时,Menu 中点击事件无法触发;分析之后发现,和尚是在层级 Stack 中存放四周...Menu,当时采用 Offstage 使两侧 Menu 不展示,但和尚忽略了一点,Offstage 虽然是视觉不可见,但其子 Widget 依旧存在,类似于 Android android:visibility...ListView 头部空白 和尚在尝试左侧滑动菜单时,添加了一个 ListView 作为数据展示,但尝试过程发现 ListView 顶部会有一块空白区域,而和尚并未设置 Header 或内外边距...;查阅资料发现,当 ListView 没有 AppBar 共同使用时,MediaQuery 会默认设置一个 padding,通过 remove 去掉即可; return MediaQuery.removePadding...StatefulWidget 小部件,主要是处理 gestures 来拦截各种手势操作;针对手势这部分,和尚会在今后博客中详细学习,今天仅为实现基本功能; 和尚优先实现基本点击事件,在拦截点击时

50810
领券