Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在使用ExtendedNestedScrollView嵌套ExtendedTabBarView的时候,使用回到顶部的功能,只有最后一个tab起效。 #158

Open
gdmec07120836 opened this issue Aug 7, 2024 · 0 comments
Assignees

Comments

@gdmec07120836
Copy link

Content

测试代码用的是example/lib/pages/complex/scroll_to_top.dart,就把TabBarView换成了ExtendedTabBarView,如果TabView有4个tab,那么前3个tab执行回到顶部的操作都无法正常回去(ListView没有回到顶部),只有最后一个tab是正常的,具体效果看视频

ExtendedNestedScrollView.ExtendedTabBarView.mp4
import 'package:common_module/shelf.dart';
import 'package:flutter/material.dart';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:extended_tabs/extended_tabs.dart';

class ExtendedTestWidget extends StatefulWidget {
  const ExtendedTestWidget({super.key});

  @override
  State<ExtendedTestWidget> createState() => _ExtendedTestWidgetState();
}

class _ExtendedTestWidgetState extends State<ExtendedTestWidget> with TickerProviderStateMixin{
  late final TabController primaryTC;
  TabController? mainTabController;
  final GlobalKey<ExtendedNestedScrollViewState> _key =
  GlobalKey<ExtendedNestedScrollViewState>();

  @override
  void initState() {
    super.initState();
    // primaryTC = TabController(length: 4, vsync: this);
    mainTabController = TabController(length: 4, initialIndex: 0, vsync: this);
  }

  @override
  void dispose() {
    // primaryTC.dispose();
    mainTabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildScaffoldBody(),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.file_upload),
        onPressed: () {
          ///scroll current tab list
          _key.currentState?.outerController.animateTo(
            0.0,
            duration: const Duration(seconds: 1),
            curve: Curves.easeIn,
          );

          ///scroll all tab list
          // _key.currentState.innerScrollPositions.forEach((position) {
          //   position.animateTo(0.0,
          //       duration: Duration(seconds: 1), curve: Curves.easeIn);
          // });
        },
      ),
    );
  }

  Widget _buildScaffoldBody() {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    final double pinnedHeaderHeight =
    //statusBar height
    statusBarHeight +
        //pinned SliverAppBar height in header
        kToolbarHeight;
    return ExtendedNestedScrollView(
      key: _key,
      onlyOneScrollInBody: true,
      headerSliverBuilder: (BuildContext c, bool f) {
        return <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 200.0,
            title: const Text('scroll to top'),
            flexibleSpace: FlexibleSpaceBar(
              //centerTitle: true,
              collapseMode: CollapseMode.pin,
              background: Image.asset('assets/images/bg_common_dialog.png',
                  package: CommonModuleConstant.PACKAGE_NAME,
                  fit: BoxFit.fill),
            ),
          ),
        ];
      },
      //1.[pinned sliver header issue](https://github.com/flutter/flutter/issues/22393)
      pinnedHeaderSliverHeightBuilder: () {
        return pinnedHeaderHeight;
      },

      body: Column(
        children: <Widget>[
          TabBar(
            // controller: primaryTC,
            controller: mainTabController,
            labelColor: Colors.blue,
            indicatorColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 2.0,
            isScrollable: false,
            unselectedLabelColor: Colors.grey,
            tabs: const <Tab>[
              Tab(text: 'Tab0'),
              Tab(text: 'Tab1'),
              Tab(text: 'Tab2'),
              Tab(text: 'Tab3'),
            ],
          ),

          Expanded(
            child: ExtendedTabBarView(
              // controller: primaryTC,
              physics: null,
              cacheExtent: 4,
              controller: mainTabController,
              children: <Widget>[
                ListView.builder(
                  //store Page state
                  key: const PageStorageKey<String>('Tab0'),
                  physics: const ClampingScrollPhysics(),
                  itemBuilder: (BuildContext c, int i) {
                    return Container(
                      alignment: Alignment.center,
                      height: 60.0,
                      child:
                      Text(const Key('Tab0').toString() + ': ListView$i'),
                    );
                  },
                  itemCount: 50,
                ),
                ListView.builder(
                  //store Page state
                  key: const PageStorageKey<String>('Tab1'),
                  physics: const ClampingScrollPhysics(),
                  itemBuilder: (BuildContext c, int i) {
                    return Container(
                      alignment: Alignment.center,
                      height: 60.0,
                      child:
                      Text(const Key('Tab1').toString() + ': ListView$i'),
                    );
                  },
                  itemCount: 50,
                ),
                ListView.builder(
                  //store Page state
                  key: const PageStorageKey<String>('Tab2'),
                  physics: const ClampingScrollPhysics(),
                  itemBuilder: (BuildContext c, int i) {
                    return Container(
                      alignment: Alignment.center,
                      height: 60.0,
                      child:
                      Text(const Key('Tab2').toString() + ': ListView$i'),
                    );
                  },
                  itemCount: 50,
                ),
                ListView.builder(
                  //store Page state
                  key: const PageStorageKey<String>('Tab3'),
                  physics: const ClampingScrollPhysics(),
                  itemBuilder: (BuildContext c, int i) {
                    return Container(
                      alignment: Alignment.center,
                      height: 60.0,
                      child:
                      Text(const Key('Tab3').toString() + ': ListView$i'),
                    );
                  },
                  itemCount: 50,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants