【Flutter 专题】52 图解可折叠状态栏

举报
阿策小和尚 发表于 2022/01/06 09:19:40 2022/01/06
【摘要】 0 基础学习 Flutter,第五十二步:尝试折叠状态栏管理!

      顶部状态栏在日常中是必不可少的,今天小菜尝试一下可折叠状态栏的使用;

      小菜以前在学习滑动冲突时曾用过 Sliver 系列的 Widget,小菜这次尝试用 SliverAppBar 来处理;

SliverAppBar

源码分析

const SliverAppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.forceElevated = false,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.expandedHeight,
    this.floating = false,
    this.pinned = false,
    this.snap = false,
})

      leading:顶部左侧 Widget 常见的是返回按钮;

      automaticallyImplyLeading:配合 leading 使用,若未设置 leading 且设为 false 时,标题位置整体向左移动,占据 leading 原本位置;

      title:顶部标题 Widget 常见的是文字标题等;

      centerTitletrue 为标题 Widget 居中,false 默认居左;

      actions:顶部右侧菜单组,可设置多个菜单按钮等;

actions: <Widget>[
    Icon(Icons.add), Icon(Icons.info),
    Padding( child: Icon(Icons.delete), padding: EdgeInsets.symmetric(horizontal: 10.0))],

      elevation:滑动过程中标题栏与列表交界处;

      forceElevated:与 elevation 共同使用,false 时不展示,true 时根据 elevation 设置效果展示;

      backgroundColor:背景色;

      brightness:主题亮度,主要是 lightdark 两种;

      iconTheme:图标主题,包括 leading / actions 等主题;

      textTheme:文字主题,包括标题等,通常与上述两种共同使用;

brightness: Brightness.dark,
iconTheme: IconThemeData(color: Colors.black26),
textTheme: TextTheme(title: TextStyle(color: Colors.black26)),

      primarytrue 占据系统状态栏位置,false 相反;

      bottom:添加状态栏底部小部件,需要是 PreferredSizeWidget 类型 Widget

bottom: TabBar(tabs: [
   Tab(icon: Icon(Icons.border_left), text: '左侧'),
   Tab(icon: Icon(Icons.border_clear), text: '居中'),
   Tab(icon: Icon(Icons.border_right), text: '右侧')
], controller: TabController(length: 3, vsync: this)),

      expandedHeight:状态栏展开高度;

      flexibleSpace:状态栏展开 Widget

flexibleSpace: FlexibleSpaceBar(
    title: Text('标题'),
    background: Image.asset('images/icon_header.jpg', fit: BoxFit.cover),
    centerTitle: true),

      pinnedtrue滑动后固定折叠状态栏,false 直接滑上去;

      floating:滑动过程中效果,通常与 snap pinned 共同使用,且 floatingture 时,snap 也一般为 true;官方推荐的样例视频很好的诠释出滑动过程中列表的滑动与顶部状态栏滑动变化;

  1. floating: false, pinned: false, snap: false
  2. floating: true, pinned: false, snap: false
  3. floating: true, pinned: false, snap: true
  4. floating: true, pinned: true, snap: false
  5. floating: true, pinned: true, snap: true
  6. floating: false, pinned: true, snap: false
class _SliverListPage extends State<SliverListPage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(slivers: <Widget>[
      SliverAppBar(
        title: Text('Sliver Title Sliver Title Sliver Title'),
        leading: Icon(Icons.reply),
        automaticallyImplyLeading: true,
        actions: <Widget>[
          Icon(Icons.add), Icon(Icons.info),
          Padding( child: Icon(Icons.delete), padding: EdgeInsets.symmetric(horizontal: 10.0)),
        ],
        flexibleSpace: FlexibleSpaceBar(
            title: Text('标题'),
            background: Image.asset('images/icon_header.jpg', fit: BoxFit.cover),
            centerTitle: true),
        expandedHeight: 200,
        backgroundColor: Colors.pinkAccent,
        elevation: 16.0,
        centerTitle: false,
        primary: true,
        floating: true,
        pinned: false,
        snap: true,
      ),
      SliverList(
          delegate: SliverChildBuilderDelegate(
              (_, index) => ListTile(title: Text('当前 item 为: ${(index + 1)}'))))
    ]));
  }
}

SliverPersistentHeader

      随着需求的不同,对折叠栏的样式要求也不相同,接下来是小菜研究的重点,自定义折叠栏样式;

源码分析

const SliverPersistentHeader({
    Key key,
    @required this.delegate,
    this.pinned = false,
    this.floating = false,
})

      小菜主要实现 SliverPersistentHeaderDelegate;需要实现四个方法:

      build 是页面布局效果,其中 shrikOffset 为滑动距离,直到设置的折叠展开高度;

      maxExtent 折叠状态栏展开的最大高度;

      minExtent 折叠状态栏收起的最小高度(pinned=true);当 maxExtent=minExtent 时,状态栏不折叠;

      shouldRebuild 判断是否与旧的不同,是否需要重绘;

class MySliverAppBar extends SliverPersistentHeaderDelegate {
  final double expandedHeight;
  MySliverAppBar({@required this.expandedHeight});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Stack(fit: StackFit.expand, children: [
      Image.asset('images/icon_header.jpg', fit: BoxFit.cover),
      Center(
          child: Opacity(
              opacity: 1 - shrinkOffset / expandedHeight,
              child: Offstage(
                  child: _listHeaderWid(),
                  offstage: shrinkOffset <= 20.0 ? false : true))),
      Positioned(
          top: 20.0,
          child: Container(
              height: 45.0,
              width: MediaQuery.of(context).size.width,
              child: Opacity(
                  opacity: 1,
                  child: Padding(
                      padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0),
                      child: Row(children: <Widget>[
                        Expanded( child: Text('测试应用', style: TextStyle( color: Color(0xFF333333), fontSize: 18.0))),
                        GestureDetector(
                            onTap: () {},
                            child: Padding(
                                padding: EdgeInsets.fromLTRB(0.0, 0.0, 20.0, 0.0),
                                child: Image.asset('images/icon_shelf_search.png', width: 22.0, height: 22.0))),
                        GestureDetector(
                            onTap: () async {},
                            child: Image.asset('images/icon_shelf_more.png', width: 22.0, height: 22.0))
                      ])))))
    ]);
  }

  Widget _listHeaderWid() {
    return Container(
        height: 84.0,
        margin: EdgeInsets.only(top: 75.0),
        child: Padding(
            padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0),
            child: Row(children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text('精彩世界', style: TextStyle(color: Colors.white, fontSize: 18.0)),
                        Padding(
                            padding: EdgeInsets.fromLTRB(0.0, 4.0, 0.0, 4.0),
                            child: Text('点击兑换奖励', style: TextStyle( color: Colors.white, fontSize: 12.0)))
                      ])),
              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                        height: 32.0, width: 84.0,
                        decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            gradient: LinearGradient(colors: <Color>[
                              Colors.orange, Colors.deepOrange ]),
                            borderRadius: BorderRadius.circular(50.0)),
                        child: Center( child: Text('签到有奖', style: TextStyle( color: Colors.white, fontSize: 14.0))))
                  ])
            ])));
  }

  @override
  double get maxExtent => expandedHeight;

  @override
  double get minExtent => 75.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}


      小菜对折叠状态栏的认知还不够深入,如有问题请多多指教!

来源:阿策小和尚

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。