在 setState 渲染后执行函数答案

【问题标题】：Execute function after setState has rendered在 setState 渲染后执行函数
【发布时间】：2023-04-01 23:30:01
【问题描述】：

在我的应用程序中，我想在添加项目后滚动到 ListView 的底部。问题是它在添加项目之前向下滚动，因此隐藏了一个项目。有没有办法在项目渲染后调用滚动函数？

示例代码：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _items = [];
  var _counter = 0;

  final _listViewController = ScrollController();

  void _addItem() {
    setState(() {
      _items.add(++_counter);
    });
    _listViewController.jumpTo(_listViewController.position.maxScrollExtent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        controller: _listViewController,
        children: [
          ..._items.map((i) => ListTile(title: Text(i.toString()))),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: Icon(Icons.add),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

使用 WidgetsBinding.instance.addPersistentFrameCallback ：

https://api.flutter.dev/flutter/scheduler/SchedulerBinding/addPersistentFrameCallback.html

  bool added = false;

  void initState() {
    WidgetsBinding.instance.addPersistentFrameCallback(jumpToDown);

    super.initState();
  }

  void _addItem() {
    setState(() {
      _items.add(++_counter);
      added = true;
    });
  }

  void jumpToDown([nothing]) {
    if (added) {
      _listViewController.jumpTo(_listViewController.position.maxScrollExtent);
    }
    added = false;
  }

【讨论】：

这会一直向下滚动，我只想在添加项目后向下滚动一次。
可以检查是否添加了item然后跳转。

【解决方案2】：

经过一番搜索，我找到了答案：

void _addItem() {
   setState(() {
     _items.add(++_counter);
   });
   SchedulerBinding.instance.addPostFrameCallback((_) {
     _listViewController.jumpTo(_listViewController.position.maxScrollExtent);
   });
}

来源： https://*.com/a/44142234/8722652

【讨论】：