在NestedScrollView体内的TabBarView中使用jumpTo或animateTo

如下面的示例代码所示,我创建了一个nestedScrollView,其主体中带有TabBarView。在其中一个标签中,我创建了一个ListView。我想在单击FloatingactionButton跳到列表底部时使用滚动控制器。但是,从代码中可以看出,我决不能跳过nestedScrollView headerSliv​​erBuilder主体的范围。我尝试使用CustomScrollView来实现这一点,并且获得了相同的UI,但是ScrollControllers对于嵌套的ListView和CustomScrollView变得脱节,并且其滚动效果与我将在此处发布的示例没有相同。

请让我知道如何滚动到此源代码中包含的列表视图。我很茫然。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),));

class MyApp extends StatefulWidget {
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  ScrollController _scrollController;
  TabController _tabController;
  FloatingactionButton floatingactionButton;

  @override
  void initState() {
    _scrollController = ScrollController();
    _tabController = TabController(length: 2,vsync: this);
    floatingactionButton = FloatingactionButton(
      onpressed: () {
        // TODO: figure out how to jump to the bottom of the listView
        _scrollController.jumpTo(10000);
      },);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            floatingactionButton: floatingactionButton,body: nestedScrollView(
              controller: _scrollController,headerSliverBuilder: (BuildContext context,bool boxIsScrolled) {
                return <Widget>[
                  SliverAppBar(
                    flexibleSpace: FlexibleSpaceBar(
                      collapseMode: CollapseMode.pin,),floating: false,pinned: false,snap: false,expandedHeight: 180,SliverPersistentHeader(
                    pinned: true,floating: true,delegate: _SliverAppBarDelegate(
                      TabBar(
                        indicatorColor: Colors.grey,tabs: <Widget>[
                          Tab(child: Text("Tab 1")),Tab(child: Text("Tab 2"))
                        ],controller: _tabController,)
                ];
              },body: _buildnestedScrollViewBody(),)));
  }

  Widget _buildnestedScrollViewBody() {
    return TabBarView(
      controller: _tabController,children: <Widget>[
        Center(child: Text("Stuff Goes Here")),_buildListView()
      ],);
  }

  Widget _buildListView() {
    // TODO: this is the list view I want to scroll to the bottom of
    return ListView.builder(
        shrinkWrap: true,physics: AlwaysScrollableScrollPhysics(),itemCount: 100,itemBuilder: (BuildContext conext,int position) {
          return Text("$position text");
        });
  }
}

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

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context,double shrinkOffset,bool overlapsContent) {
    return new Container(
      child: _tabBar,decoration: BoxDecoration(
        color: Colors.grey,);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}
shangguan1 回答:在NestedScrollView体内的TabBarView中使用jumpTo或animateTo

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3155590.html

大家都在问