Flutter滑动吸顶tab实现

已于 2023-02-22 18:04:00 修改
阅读量1.3k 收藏
点赞数
分类专栏： Flutter 文章标签： flutter android ios
于 2023-02-21 19:35:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46527751/article/details/129148427
版权
NestedScrollView实现
import 'package:flutter/material.dart';
import 'package:meowfront/constant/constant.dart';
import 'package:meowfront/pages/usertabs/LikePage.dart';
import 'package:meowfront/pages/usertabs/PostPage.dart';

class UserPage extends StatefulWidget {
  @override
  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage>
    with SingleTickerProviderStateMixin {
  ScrollController scrollController = ScrollController();

  bool isShowBlackTitle = false;

  TabController? _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, initialIndex: 0, length: 3);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController?.dispose();
  }

  //判断滚动改变透明度
  void _onScroll(offset) {
    if (offset > 100) {
      setState(() {
        isShowBlackTitle = true;
      });
    } else {
      setState(() {
        isShowBlackTitle = false;
      });
    }
  }

  Column _timeSelection() {
    return Column(
      children: <Widget>[
        Stack(
          alignment: Alignment.topLeft,
          children: <Widget>[
            Container(
              height: 50,
              color: Colors.white,
            ),
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 70),
              child: TabBar(
                tabs: [
                  Tab(text: '帖子'),
                  Tab(text: '点赞'),
                  Tab(text: '收藏'),
                ],
                controller: _tabController,
                isScrollable: true, //如果多个按钮可以滑动
                indicatorColor: Colors.blue, //指示器颜色
                labelColor: Colors.black, //指示器文字颜色
                unselectedLabelColor: Colors.black, //未选中的指示器文字颜色
                indicatorSize: TabBarIndicatorSize.label,
              ),
            )
          ],
        ),
        Container(
          height: 0.5,
          color: Colors.black12,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          backgroundColor: Colors.white,
          body: Stack(children: [
            NotificationListener(
                onNotification: (scrollNotification) {
                  if (scrollNotification is ScrollUpdateNotification &&
                      scrollNotification.depth == 0) {
                    //滚动并且是列表滚动的时候
                    _onScroll(scrollNotification.metrics.pixels);
                  }
                  return true;
                },
                child: Stack(
                  children: <Widget>[
                    NestedScrollView(
                      headerSliverBuilder:
                          (BuildContext context, bool innerBoxIsScrolled) {
                        return <Widget>[
                          SliverOverlapAbsorber(
                            handle:
                                NestedScrollView.sliverOverlapAbsorberHandleFor(
                                    context),
                            sliver: SliverAppBar(
                              leading: new Container(
                                margin: EdgeInsets.only(top: 20, bottom: 10),
                                child: isShowBlackTitle
                                    ? Image.asset(
                                        Constant.ASSETS_IMG +
                                            'userinfo_icon_back_black.png',
                                        fit: BoxFit.fitHeight,
                                      )
                                    : Image.asset(
                                        Constant.ASSETS_IMG +
                                            'userinfo_icon_back_white.png',
                                        fit: BoxFit.fitHeight,
                                      ),
                              ),
                              title: isShowBlackTitle ? Text('名字') : Text(''),
                              centerTitle: true,
                              pinned: true,
                              floating: false,
                              snap: false,
                              primary: true,
                              expandedHeight: 210.0,
                              backgroundColor: Color(0xffF8F8F8),
                              elevation: 0,
                              //是否显示阴影，直接取值innerBoxIsScrolled，展开不显示阴影，合并后会显示
                              forceElevated: innerBoxIsScrolled,
                              actions: <Widget>[
                                new Container(
                                  margin: EdgeInsets.only(
                                      right: 10, top: 20, bottom: 10),
                                  child: isShowBlackTitle
                                      ? Image.asset(
                                          Constant.ASSETS_IMG +
                                              'userinfo_search_black.png',
                                          width: 30,
                                          height: 30,
                                          fit: BoxFit.cover,
                                        )
                                      : Image.asset(
                                          Constant.ASSETS_IMG +
                                              'userinfo_search_white.png',
                                          width: 30,
                                          height: 30,
                                          fit: BoxFit.cover,
                                        ),
                                ),
                                new Container(
                                  margin: EdgeInsets.only(
                                      right: 10, top: 20, bottom: 10),
                                  child: isShowBlackTitle
                                      ? Image.asset(
                                          Constant.ASSETS_IMG +
                                              'userinfo_more_black.png',
                                          width: 30,
                                          height: 30,
                                          fit: BoxFit.cover,
                                        )
                                      : Image.asset(
                                          Constant.ASSETS_IMG +
                                              'userinfo_more_white.png',
                                          width: 30,
                                          height: 30,
                                          fit: BoxFit.cover,
                                        ),
                                ),
                              ],

                              flexibleSpace: FlexibleSpaceBar(
                                collapseMode: CollapseMode.pin,
                                background: new Column(
                                  children: <Widget>[
                                    new Container(
                                      height: 210,
                                      decoration: BoxDecoration(
                                        image: DecorationImage(
                                          image: AssetImage(
                                            Constant.ASSETS_IMG +
                                                'ic_personinfo_bg4.png',
                                          ),
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                      child: new Column(
                                        children: <Widget>[
                                          Container(
                                            margin: EdgeInsets.only(top: 25),
                                            child: new Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.start,
                                              children: <Widget>[
                                                Expanded(
                                                  child: Container(
                                                    alignment: Alignment.center,
                                                    child: new CircleAvatar(
                                                      backgroundImage:
                                                          new NetworkImage(
                                                              "https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg"),
                                                      radius: 33.0,
                                                    ),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: <Widget>[
                                              Container(
                                                margin:
                                                    EdgeInsets.only(top: 15),
                                                child: Text(
                                                  "名字",
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 17),
                                                ),
                                              ),
                                            ],
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                          SliverPersistentHeader(
                            delegate: _SliverAppBarDelegate2(_timeSelection()),
                            pinned: true,
                          ),
                        ];
                      },
                      body: Container(
                        margin: EdgeInsets.all(0),
                        child: TabBarView(
                          controller: _tabController,
                          children: [
                            PostPage(),
                            LikePage(),
                            PostPage(),
                          ],
                        ),
                      ),
                    ),
                  ],
                )),
          ]),
        ));
  }
}

class _SliverAppBarDelegate2 extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate2(this._tabBar);

  final Column _tabBar;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return _tabBar;
  }

  @override
  double get maxExtent => 52;

  @override
  double get minExtent => 52;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

存在的问题：body部分顶部会被header遮挡

在这里插入图片描述
在这里插入图片描述

ExtendedNestedScrollView实现
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:meowfront/constant/constant.dart';
import 'package:meowfront/pages/usertabs/CollectPage.dart';
import 'package:meowfront/pages/usertabs/LikePage.dart';
import 'package:meowfront/pages/usertabs/PostPage.dart';
import 'package:meowfront/util/ScreenAdapter.dart';

class UserPage extends StatefulWidget {
  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> with TickerProviderStateMixin {
  late TabController _tabC;
  bool isShowBlackTitle = false;
  List<String> pageTitles = ['帖子', '点赞', '收藏'];
  List<Widget> pageList = [PostPage(), LikePage(), CollectPage()];
  @override
  void initState() {
    super.initState();
    _tabC = TabController(
      length: 3,
      initialIndex: 0,
      vsync: this,
    );
  }

//判断滚动改变透明度
  void _onScroll(offset) {
    if (offset > ScreenAdapter.heigth(100)) {
      setState(() {
        isShowBlackTitle = true;
      });
    } else {
      setState(() {
        isShowBlackTitle = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Stack(
      children: [
        NotificationListener(
            onNotification: (scrollNotification) {
              if (scrollNotification is ScrollUpdateNotification &&
                  scrollNotification.depth == 0) {
                //滚动并且是列表滚动的时候
                _onScroll(scrollNotification.metrics.pixels);
              }
              return true;
            },
            child: _contentView(context))
      ],
    )));
  }

  _contentView(context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double pinnedHeaderHeight = kToolbarHeight;
    return ExtendedNestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            automaticallyImplyLeading: false,
            // leading: new Container(
            //     margin: EdgeInsets.only(top: 20, bottom: 10),
            //     child: InkWell(
            //       onTap: () {

            //       },
            //       child: isShowBlackTitle
            //           ? Image.asset(
            //               Constant.ASSETS_IMG + 'userinfo_icon_back_black.png',
            //               fit: BoxFit.fitHeight,
            //             )
            //           : Image.asset(
            //               Constant.ASSETS_IMG + 'userinfo_icon_back_white.png',
            //               fit: BoxFit.fitHeight,
            //             ),
            //     )),
            title: isShowBlackTitle ? Text('名字') : Text(''),
            centerTitle: true,
            pinned: true,
            floating: false,
            snap: false,
            primary: true,
            expandedHeight: ScreenAdapter.heigth(300),
            backgroundColor: Color(0xffF8F8F8),
            elevation: 0,
            //是否显示阴影，直接取值innerBoxIsScrolled，展开不显示阴影，合并后会显示
            forceElevated: innerBoxIsScrolled,
            actions: <Widget>[
              Container(
                margin: EdgeInsets.only(right: 10, top: 20, bottom: 10),
                child: isShowBlackTitle
                    ? Image.asset(
                        Constant.ASSETS_IMG + 'userinfo_search_black.png',
                        width: 30,
                        height: 30,
                        fit: BoxFit.cover,
                      )
                    : Image.asset(
                        Constant.ASSETS_IMG + 'userinfo_search_white.png',
                        width: 30,
                        height: 30,
                        fit: BoxFit.cover,
                      ),
              ),
              Container(
                margin: EdgeInsets.only(right: 10, top: 20, bottom: 10),
                child: isShowBlackTitle
                    ? Image.asset(
                        Constant.ASSETS_IMG + 'userinfo_more_black.png',
                        width: 30,
                        height: 30,
                        fit: BoxFit.cover,
                      )
                    : Image.asset(
                        Constant.ASSETS_IMG + 'userinfo_more_white.png',
                        width: 30,
                        height: 30,
                        fit: BoxFit.cover,
                      ),
              ),
            ],

            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: Column(
                children: <Widget>[
                  Container(
                    height: ScreenAdapter.heigth(300),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(
                          Constant.ASSETS_IMG + 'user_bg.png',
                        ),
                        fit: BoxFit.cover,
                      ),
                    ),
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding:
                              EdgeInsets.only(top: ScreenAdapter.heigth(25)),
                          child: new Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Expanded(
                                child: Container(
                                  alignment: Alignment.center,
                                  child: new CircleAvatar(
                                    backgroundImage: new NetworkImage(
                                        "https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg"),
                                    radius: 33.0,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.only(top: 15),
                              child: Text(
                                "名字",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 17),
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 0,
              child: Row(
                children: [Text('')],
              ),
            ),
          )
        ];
      },
      pinnedHeaderSliverHeightBuilder: () {
        return pinnedHeaderHeight;
      },
      onlyOneScrollInBody: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TabBar(
              isScrollable: true, //如果多个按钮可以滑动
              indicatorColor: Colors.blue, //指示器颜色
              labelColor: Colors.black, //指示器文字颜色
              unselectedLabelColor: Colors.black, //未选中的指示器文字颜色
              indicatorSize: TabBarIndicatorSize.label,

              controller: _tabC,
              tabs: pageTitles.map((e) => Tab(text: '$e')).toList(),
            ),
            Container(
              height: 0.5,
              color: Colors.black12,
            ),
            Expanded(
              child: TabBarView(
                  controller: _tabC,
                  physics: NeverScrollableScrollPhysics(),
                  children: pageList),
            ),
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述
在这里插入图片描述

s－010101
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 扩展NestedScrollView （二）列表滚动同步解决
m0_60388216的博客
03-19 462
override@override// }//// }然后在刚才attach方法中通过先祖NestedScrollViewInnerScrollPositionKeyWidget@override@override= null) {if (key!});
淘宝、京东首页浏览效果、tab悬浮吸顶
09-01
实现淘宝、京东首页效果，完整demo可运行CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+Fragment
Flutter 页面滚动吸顶详解（NestedScrollView）
热门推荐
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
11-15 1万+
前言 在业务开发中我们经常会有滚动吸顶的效果，目前Flutter也有很多种实现方式，这里介绍一下本人在开发中使用到的基于NestedScrollView实现的滚动吸顶组件；以及中间涉及的各种定位的布局操作； 效果 NestedScrollView 首先了解一下NestedScrollView滚动组件； NestedScrollView：支持嵌套滑动的ScrollView； 属性 属性 说明 默认值 controller 滚动监听 无 scrollDirection 滚动方向 Axis.
Flutter 开源库推荐：ExtendedNestedScrollView —— 动态与高效的嵌套滚动视图解决方案...
最新发布
gitblog_00012的博客
05-20 417
Flutter 开源库推荐：ExtendedNestedScrollView —— 动态与高效的嵌套滚动视图解决方案 项目地址:https://gitcode.com/fluttercandies/extended_nested_scroll_view 1、项目介绍 ExtendedNestedScrollView 是一个针对 Flutter 平台的高级滚动视图组件，专为解决 NestedScro...
flutter使用NestedScrollView实现滑动联动吸顶
10-14
flutter使用NestedScrollView实现滑动联动吸顶
flutter中tabbar吸顶效果，NestedScrollView结合tabbar
六一首席
03-31 2309
前言：有这样一个业务场景，tabbar在中间，向上滑动时，tabbar需要有吸顶效果
flutter 上滑悬浮吸顶
androidhyf的博客
11-14 2209
使用 ：RefreshIndicator+NestedScrollView+(TabBar、TabView)+SmartRefresher打造可下拉刷新和上拉加载的tab吸顶效果。
flutter使用ExtendedNestedScrollView结合Tabar实现吸顶效果
qq_43589991的博客
03-04 7143
先上图： 在你的项目的pubspec中导入 extended_nested_scroll_view: ^5.0.0 页面代码： import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart'; import 'package:flutter/material.dart'; import 'Image.dart'; void main() { runApp(const MyApp()); } class
Flutter 可冻结的侧滑表格 sticky-headers-table 结合 NestedScrollView 吸顶悬浮的使用实践
pengbo6665631的博客
05-26 2188
一个类似云文档中表格固定顶部栏和左侧栏的需求，也就是冻结表格的功能。
flutter 中监听滑动事件
08-25
Flutter 中监听滑动事件 Flutter 中监听滑动事件是移动应用程序中非常重要的一部分，对用户交互体验有着直接的影响。在 Flutter 中，可以使用 Listener widget 来监听原始触摸事件，它也是一个功能性 widget。...
flutter PageView实现左右滑动切换视图
08-25
Flutter PageView实现左右滑动切换视图 Flutter 是一个跨平台的移动应用程序开发框架，使用 Dart 语言编写。Flutter 提供了丰富的 Widget 库，可以快速构建漂亮的移动应用程序。PageView 是 Flutter 中的一个重要 ...
extended_nested_scroll_view:扩展的嵌套滚动视图可解决以下问题。 1.固定的银头问题2.tabview同步中的内部滚动条问题3.拉动刷新不起作用。 4.在NestedScrollView的主体中不使用ScrollController
05-06
extended_nested_scroll_view 语言：| NestedScrollView：扩展的嵌套滚动视图，可解决以下问题。 1. 2. 3.拉动刷新不起作用。 4.在NestedScrollView的主体中不使用ScrollController 第2步 NestedScrollView拉动刷新的示例 在NestedScrollView的主体中不使用ScrollController 问题1的示例 在pinnedHeaderSliv​​erHeightBuilder回调中给出固定的条头的总高度 var tabBarHeight = primaryTabBar.preferredSize.height; var pinnedHeaderHeight = //statusBar height statusBarHeig
flutter页面滚动联动实现
03-25
flutter 页面滚动联动实现,解决NestedScrollView问题.可配合EasyRefresh和CustomScrollView实现页面滚动联动,自定义下拉刷新等操作
Flutter实战项目-第九篇 吸顶及滚动条嵌套
Javon_huang的博客
05-08 3159
滚动条嵌套 吸顶 CustomScrollView、SliverList
Fultter - NestedScrollView 如何实现吸顶效果以及遇到的问题
光法v3的博客
09-07 540
在Flutter中，你可以使用NestedScrollView和SliverAppBar来实现吸顶效果。
Flutter-吸顶式表格组名TableView
qq_40586973的博客
08-16 2340
class newlyProject extends StatefulWidget { @override _newlyProjectState createState() => _newlyProjectState(); } class _newlyProjectState extends State<newlyProject> { @override //表单...
Flutter 解决NestedScrollView与TabBar双列表滚动位置同步问题
smileKH的博客
04-06 715
最近写flutter项目，遇到NestedScrollView与TabBar双列表滚动位置同步问题，下面是解决方案，希望帮助到大家。这就是Flutter解决NestedScrollView与TabBar双列表滚动位置同步问题相关代码，希望能帮助到你！
flutter实现tab
07-28
在Flutter中实现底部Tab切换可以使用Scaffold的bottomNavigationBar属性，该属性接受一个BottomNavigationBar类型的对象。BottomNavigationBar是底部导航条，可以帮助我们实现底部Tab切换。\[1\] 下面是一个示例代码，展示了如何定义底部导航条的按钮集合和当前展示的tab页面索引： ```dart List<BottomNavigationBarItem> _barItem = \[ BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')), BottomNavigationBarItem(icon: Icon(Icons.list), title: Text('任务')), BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('计划')), \]; int _currentIndex = 0; // 当前展示的tab页面索引 ``` 在Scaffold的bottomNavigationBar属性中，我们可以设置items为_barItem，currentIndex为_currentIndex，以及onTap回调函数来处理点击导航栏子项的事件。例如： ```dart Scaffold( // ... bottomNavigationBar: BottomNavigationBar( items: _barItem, currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex = index; }); }, ), // ... ) ``` 这样就可以实现底部Tab切换的功能了。 #### 引用[.reference_title] - *1* *2* *3* [Flutter 底部导航栏（Tab 页）的快速实现](https://blog.csdn.net/u011578734/article/details/110523298)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值