flutter,SliverPersistentHeader实现Tab顶部吸附固定效果

直接上代码啦

import 'package:flutter/material.dart';

class StickyDemo extends StatefulWidget {
 
  @override
  _StickyDemoState createState() => _StickyDemoState();
}

class _StickyDemoState extends State<StickyDemo>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    this.tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            elevation: 0,
            expandedHeight: 250,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver-sticky效果'),
              background: Image.network(
                'http://img1.m
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值