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

知识共享许可协议 版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons

一个与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 当滚动时,控制应用栏状态。默认false
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,
),

效果图

          

完整代码

查看完成代码

猜你喜欢

转载自blog.csdn.net/ruoshui_t/article/details/94975101
今日推荐