如何获得ScrollController的完整大小

Rob*_*ker 13 flutter

我已经将ScrollController附加到[SliverAppBar,SliverList]的CustomScrollView

在默认情况下,我会使用reverse:true和animateTo(0.0)将滚动移动到添加的最后一个元素,但在这种情况下使用reverse也会反转SliverAppBar/SliverList顺序!

所以我想使用animateTo(sizeOfScrollableAfterElementAdded)但我找不到这个值.

谢谢 !

Col*_*son 42

您可以使用_scrollController.position.maxScrollExtent滚动到结尾.确保在后框架回调中执行此操作,以便它包含刚刚添加的新项目.

以下是添加更多项目时滚动到最后的条子列表的示例.

之前 后

import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

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

class MyHomePage extends StatefulWidget {
  State createState() => new MyHomePageState();
}


class MyHomePageState extends State<MyHomePage> {
  ScrollController _scrollController = new ScrollController();

  List<Widget> _items = new List.generate(40, (index) {
    return new Text("item $index");
  });

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.arrow_downward),
        onPressed: () {
          setState(() {
            _items.add(new Text("item ${_items.length}"));
          });
          SchedulerBinding.instance.addPostFrameCallback((_) {
            _scrollController.animateTo(
              _scrollController.position.maxScrollExtent,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeOut,
            );
          });
        },
      ),
      body: new CustomScrollView(
        controller: _scrollController,
        slivers: [
          new SliverAppBar(
            title: new Text('Sliver App Bar'),
          ),
          new SliverList(
            delegate: new SliverChildBuilderDelegate(
              (context, index) => _items[index],
              childCount: _items.length,
            ),
          ),
        ],
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 这个解决方案非常有效,但是在initState()中实现这个目标呢?例如,在聊天应用程序中,您可能希望在开始时滚动到列表的底部.怎么能实现这一目标? (5认同)
  • 谢谢让我发现这一点:`SchedulerBinding.instance.addPostFrameCallback((_){` (4认同)
  • @Lololooii 这就是调度程序绑定调用的用途。构建列表并且控制器实际附加到列表后,然后滚动到列表底部。 (2认同)
  • 正确的。你只需将其置于 initstate 即可。根据我的理解,它安排在当前小部件完成构建时调用它 (2认同)

小智 7

此外,如果您想在开始时立即滚动到列表的底部(在 initState() 中),您可以在第一次调用 setState() 之前放置来自 Collin 解决方案的以下代码块。

class ExampleState extends State<Example>{
    void initState(){
    super.initState();

    _scrollController = new ScrollController();

    void _getListItems() async{

        //get list items

        SchedulerBinding.instance.addPostFrameCallback((_) {
          _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 100),
        curve: Curves.ease,
         );
        });

      setState((){
      });
   }
 }
}
Run Code Online (Sandbox Code Playgroud)