Question

我试图在一个选项卡中滚动而不影响其他选项卡的滚动位置。但是我不怎么实现它。同样在这段代码中，当您点击应用程序栏时，我添加了SliverAppBar来向上滚动。

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  TabController _tabController;
  ScrollController _scrollViewController;
  double scrollPosition;

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: DefaultTabController(
        length: 2,
        initialIndex: 0,
        child: Scaffold(
          body: NestedScrollView(
            controller: _scrollViewController,
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  title: InkWell(
                      onTap: () {
                        _scrollViewController.animateTo(
                          0.0,
                          curve: Curves.easeOut,
                          duration: const Duration(milliseconds: 300),
                        );
                      },
                      child: const Text(kCandice, style: kLogoText)),
                  centerTitle: true,
                  elevation: 0,
                  backgroundColor: Colors.white,
                  pinned: true,
                  floating: true,
                  snap: true,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    tabs: <Tab>[
                      Tab(
                        text:
                            AppLocalizations.of(context).translate('following'),
                      ),
                      Tab(
                        text:
                            AppLocalizations.of(context).translate('trending'),
                      )
                    ],
                    unselectedLabelColor: Colors.black54,
                    labelColor: kPink,
                    unselectedLabelStyle: kMediumBoldText,
                    labelStyle: kMediumBoldText,
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorColor: Colors.transparent,
                    controller: _tabController,
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: [
                PostSection(),
                PostSection(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

我不知道这是正确的方法，但是一个选择是：

  @override
  void initState() {
    _scrollViewController = ScrollController();
    _tabController = TabController(vsync: this, length: 2, initialIndex: 0)
      ..addListener(() => _scrollViewController.animateTo(
            0.0,
            curve: Curves.easeIn,
            duration: const Duration(milliseconds: 300),
          ));
    super.initState();
  }

在TabBarView中滚动而不影响其他选项卡

1 个答案: