带ListViews的NestedScrollView中的粘滞选项卡

Question

除以下之外，布局均按要求工作：

当我在一页上滚动时，第二页也会滚动。数量不多，但足以掩盖第一项。

我可以想象这与NestedScrollView有关，但是我不知道该怎么做。

import 'package:flutter/material.dart';

main(){
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: new Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              new SliverAppBar(
                title: const Text('Tabs and scrolling'),
                forceElevated: innerBoxIsScrolled,
                pinned: true,
                floating: true,
                bottom: new TabBar(
                  tabs: <Tab>[
                    new Tab(text: 'Page 1'),
                    new Tab(text: 'Page 2'),
                  ],
                ),
              ),
            ];
          },
          body: new TabBarView(
            children: <Widget>[
              _list(),
              _list(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _list(){
    return ListView.builder(
      padding: EdgeInsets.zero,
      itemCount: 250,
      itemBuilder: (context, index){
        return Container(
          color: Colors.grey[200].withOpacity((index % 2).toDouble()),
          child: ListTile(
            title: Text(index.toString()),
          ),
        );
      }
    );
  }
}

Answer 1

要使两个ListView滚动而不互相影响，它们需要定义控制器。

要使ListView在选项卡切换之间保持其滚动位置，您需要将它们放置在带有AutomaticKeepAliveClientMixin的小部件中。

这里是您可以代替_list方法执行的示例。定义了一个有状态的小部件，该状态小部件可以同时使用控制器和AutomaticKeepAliveClientMixin返回列表：

D

您可以像在TabBarView中的其他任何小部件一样正常调用它：

sum