Flutter中嵌套ListView评论回复系统滚动定位异常问题

我基于Flutter实现了评论与回复系统，回复和对应评论关联。需求是添加新回复后，嵌套ListView自动滚动至最新回复底部，但目前只能滚动到倒数第二个回复，无法定位到刚添加的最新回复。

问题原因 #

调用setState更新回复列表后立即执行滚动操作时，Widget还未完成重建，新回复的布局信息尚未更新，导致滚动计算基于旧的列表高度，无法定位到最新回复。

修复步骤 #

1. 使用WidgetsBinding.instance.addPostFrameCallback等待Widget重建完成后再执行滚动，确保获取最新布局信息。
2. 给每个回复Item添加唯一Key，直接滚动到最新回复的Item节点，提升定位准确性。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
      home: CommentScreen(),
    ));

class Comment {
  int id;
  String text;
  List<String> replies;

  Comment(this.id, this.text, {this.replies = const []});
}

class CommentScreen extends StatefulWidget {
  const CommentScreen({super.key});

  @override
  _CommentScreenState createState() => _CommentScreenState();
}

class _CommentScreenState extends State<CommentScreen> {
  List<Comment> comments = [
    Comment(1, "First comment", replies: ["Reply 1", "Reply 2"]),
    Comment(2, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(3, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(4, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(5, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(6, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(7, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(8, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(9, "Second comment", replies: ["Reply 1", "Reply 2"]),
    Comment(10, "Second comment", replies: ["Reply 1", "Reply 2"]),
  ];

  void addReply(int commentIndex, String reply, int commentId) {
    setState(() {
      comments[commentIndex].replies.add(reply);
    });
    // 等待Widget重建完成后执行滚动
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final latestReplyKey = ValueKey("${commentId}_${comments[commentIndex].replies.length - 1}");
      final context = latestReplyKey.currentContext;
      if (context != null) {
        Scrollable.ensureVisible(
          context,
          duration: const Duration(milliseconds: 300),
          alignment: 1.0,
          curve: Curves.easeInOutCubic,
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Comments"),
      ),
      body: ListView.builder(
        itemCount: comments.length,
        physics: const AlwaysScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          Comment comment = comments[index];
          return Column(
            children: [
              ListTile(
                title: Text(comment.text),
                trailing: ElevatedButton(
                  onPressed: () {
                    addReply(
                      index,
                      """Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.""",
                      comment.id,
                    );
                  },
                  child: const Text("Reply"),
                ),
              ),
              // 回复列表
              ListView.builder(
                shrinkWrap: true,
                physics: const ClampingScrollPhysics(),
                itemCount: comment.replies.length,
                itemBuilder: (BuildContext context, int replyIndex) {
                  String reply = comment.replies[replyIndex];
                  return ListTile(
                    key: ValueKey("${comment.id}_$replyIndex"),
                    title: Text(reply),
                  );
                },
              ),
            ],
          );
        },
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Muhammad Ibrahim