flutter SliverAppBar 随内容一起滑动的头部 - 滞留头部

最新推荐文章于 2025-09-07 13:36:30 发布

原创最新推荐文章于 2025-09-07 13:36:30 发布 · 5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flutter SliverAppBar #flutter 滑动的头部 #flutter 滞留头部

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

博客介绍了与CustomScrollView集成的Sliver应用程序栏，它可作为CustomScrollView的首个子项，能根据滚动偏移量改变高度或在其他内容上方浮动。还包含该应用程序栏的参数详解、代码示例、效果图及完整代码。

一个与CustomScrollView集成的应用程序栏。

Sliver应用程序栏通常用作CustomScrollView的第一个子项，它允许应用程序栏与滚动视图集成，以便它可以根据滚动偏移量在高度上变化，或者在滚动视图中的其他内容上方浮动。

参数详解

属性	说明
leading	头部组件（无法使用网络图片）
automaticallyImplyLeading	默认true
title	标题
actions	在标题之后显示的组件
flexibleSpace	应用栏灵活空间 title：标题 background：背景 centerTitle：标题居中 titlePadding：标题内边距 collapseMode：样式
bottom	标题下方显示的组件
elevation	阴影高度
forceElevated	展开状态是否显示阴影默认false
backgroundColor	背景颜色默认为主题颜色
brightness	应用栏亮度。通常这是与backgroundColor, iconTheme, textTheme一起设置的
iconTheme	应用栏图标的颜色、不透明度和大小。通常这是与背景颜色，亮度，textTheme一起设置的
actionsIconTheme	actions样式
textTheme	文字样式
primary	是否为主应用栏（最顶部的应用栏）默认true
centerTitle	标题居中
titleSpacing	标题间距，默认NavigationToolbar.kMiddleSpacing
expandedHeight	应用栏完全展开的高度
floating	是否随着滑动隐藏标题
pinned	是否固定在顶部
snap
shape	形状

代码示例

SliverAppBar(
  primary:true,
  leading: Icon(Icons.backup),
  // automaticallyImplyLeading:true,
  pinned: true,
  expandedHeight: 250.0,
  // title: Text('SliverAppBar'),
  flexibleSpace: FlexibleSpaceBar(
    // titlePadding: EdgeInsets.all(15),
    title: Text('CustomScrollView'),
    collapseMode:CollapseMode.parallax,
    background: Image.asset('images/ba.jpg', fit: BoxFit.cover),
  ),
  backgroundColor: Theme.of(context).accentColor,
  
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.shopping_cart),
      tooltip: 'Open shopping cart',
      onPressed: () {
        // handle the press
      },
    ),
    IconButton(
      icon: Icon(Icons.settings),
      tooltip: 'Open settings',
      onPressed: () {
        // handle the press
      },
    ),
  ],

  // bottom:PreferredSize(
  //   child: Icon(Icons.shopping_cart),
  //   preferredSize: Size(50, 50),
  // ),
  elevation:10.0,
  forceElevated:true,
),