flutter:tabbar嵌套时滑动

一,代码:

import 'package:flutter/material.dart';

class MyviewDemo extends StatefulWidget {
  @override
  State<MyviewDemo> createState() => _MyviewDemoState();
}

class _MyviewDemoState extends State<MyviewDemo> with TickerProviderStateMixin {

  final List<Tab> myTabs = <Tab>[
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ];

  final List<Tab> myNestedTabs = <Tab>[
    Tab(text: 'Nested Tab 1'),
    Tab(text: 'Nested Tab 2'),
    Tab(text: 'Nested Tab 3'),
  ];

  late TabController _controllerTop;
  late TabController _controllerNested;

  @override
  void initState() {
    super.initState();
    _controllerTop = TabController(
      length: 3,
      vsync: this,
    );
    _controllerNested = TabController(
      length: 3,
      vsync: this,
    );
  }


  @override
  void dispose() {
    _controllerTop.dispose();
    _controllerNested.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TabBarView Example'),
          bottom: TabBar(
            controller: _controllerTop,
            tabs: myTabs,
          ),
        ),
        body: TabBarView(
          controller: _controllerTop,
          children: <Widget>[
               Scaffold(
                appBar: AppBar(
                  automaticallyImplyLeading: false,
                  toolbarHeight: 0, // 将内嵌的 AppBar 的高度设置为 0,以隐藏它
                  bottom: TabBar(
                    controller: _controllerNested,
                    tabs: myNestedTabs,
                  ),
                ),
                body: NotificationListener<ScrollNotification>(
                  onNotification: (ScrollNotification notification) {
                    if (notification is OverscrollNotification) {
                      if (_controllerNested.index == 2) {
                        _controllerTop.animateTo(1,duration: Duration(milliseconds: 500));
                      }
                    }
                    return true;
                  },
                  child: TabBarView(
                      controller: _controllerNested,
                      children: [
                        Center(
                          child: Text('嵌套 Tab 1'),
                        ),
                        Center(
                          child: Text('嵌套 Tab 2'),
                        ),
                        Center(
                          child: Text('嵌套 Tab 3'),
                        ),
                      ]
                  ),
                ),
              ),
            Center(
              child: Text('Tab 2'),
            ),
            Center(
              child: Text('Tab 3'),
            ),
          ],
        ),
      );
    //);
  }
}

跳转功能的实现:

body: NotificationListener<ScrollNotification>(
                  onNotification: (ScrollNotification notification) {
                    if (notification is OverscrollNotification) {
                      if (_controllerNested.index == 2) {
                        _controllerTop.animateTo(1,duration: Duration(milliseconds: 500));
                      }
                    }
                    return true;
                  },

二,测试效果:

在滑动到第三个嵌套view后,再滑动时跳到第二个tabbarview:

posted @ 2025-04-19 10:15  刘宏缔的架构森林  阅读(160)  评论(0)    收藏  举报