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

一个与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,
),

效果图

完整代码

查看完成代码