滚动到带有 Flutter 的 NestedScrollView 内 TabView 内的 ListView 结束答案

【问题标题】：Scroll to end with a ListView inside TabView inside NestedScrollView with Flutter滚动到带有 Flutter 的 NestedScrollView 内 TabView 内的 ListView 结束
【发布时间】：2021-05-15 15:59:37
【问题描述】：

我有一个简单的问题：如何初始化 ListView 小部件的滚动位置，NestedScrollView 中 TabView 的子级？

我的应用程序有不同的部分：

一个带有 SliverAppBar 的 NestedScrollView，其中包含一个 TabBar
body 包含带有两个选项卡的 TabView
第一个选项卡是一个包含 100 个项目的 ListView
第二个选项卡是一个包含 100 个项目 + 1 个文本字段的 ListView 的列（类似于聊天应用程序）

我正在尝试初始化第二个选项卡的 ListView 的滚动位置以显示最后一个项目。但是：

我无法使用 ListView 控制器变量（保持 NestedScrollView 小部件的同步）
如果我在 Tab2 的 initState 中访问 PrimaryScrollController，则会出现此错误：“ScrollController 附加到多个滚动视图。”
我无法使用 ListView 小部件的“reverse:true”参数，因为它在 NestedScrollView 中不起作用

帮帮我！！请！

这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyPage(),
    );
  }
}

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [
              SliverAppBar(
                pinned: true,
                title: Text("Test Application"),
                expandedHeight: 200,
                bottom: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.info), text: 'Tab 1'),
                    Tab(icon: Icon(Icons.chat), text: 'Tab 2'),
                  ],
                ),
              ),
            ],

            body: TabBarView(
              children: [
                ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context, index) => Text("ITEM $index FROM TAB 1"),
                ),
                Tab2(),
              ],
            ),
          ),
        )
    );
  }
}

class Tab2 extends StatefulWidget {
  @override
  _Tab2State createState() => _Tab2State();
}

class _Tab2State extends State<Tab2> {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
            child: ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) => Text("ITEM $index FROM TAB 2"),
            )
        ),
        TextField()
      ],
    );
  }

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      ScrollController controller = PrimaryScrollController.of(context);
      controller.jumpTo(controller.position.maxScrollExtent);
    });
  }
}

【问题讨论】：

标签： flutter listview tabview nestedscrollview

【解决方案1】：

我想我找到了解决方案：我只需要替换这个字符串：

controller.jumpTo(controller.position.maxScrollExtent)

通过这个字符串：

controller.jumpTo(controller.positions.last.maxScrollExtent)

【讨论】：

【解决方案2】：

在这种情况下，您可以添加监听器。让我知道这是否有效。

 double _lastEndOfScroll = 0;   

 controller.addListener(() {

   double maxScroll = controller.position.maxScrollExtent;
   double currentScroll = controller.position.pixels;
   if (maxScroll == currentScroll) {
     _lastEndOfScroll = maxScroll;  
   }
 });

controller.jumpTo(_lastEndOfScroll);

【讨论】：