Question

如下面的示例代码所示，我创建了一个NestedScrollView，其主体中带有TabBarView。在其中一个标签中，我创建了一个ListView。我想在单击FloatingActionButton跳到列表底部时使用滚动控制器。但是，从代码中可以看出，我决不能跳过NestedScrollView headerSliverBuilder主体的范围。我尝试使用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;
  }
}

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

0 个答案: