Flutter：如何让ListView在流更新时始终聚焦当前项底部

核心问题分析 #

你之前的实现存在两个关键问题：

1. ScrollController 在 GetBuilder 的 builder 方法内创建，每次控制器更新都会重建新实例，导致滚动状态丢失
2. 当前项内容动态更新时，布局尚未完成就触发滚动，无法获取最新的滚动范围

方案一：优化原生 ListView + ScrollController #

将 ScrollController 移到状态类中持有，确保状态不丢失，同时等待布局完成后再执行滚动：

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

  @override
  State<OpenAIChat> createState() => _OpenAIChatState();
}

class _OpenAIChatState extends State<OpenAIChat> {
  late final ScrollController _scrollController;
  late final OpenAIChatController _controller;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _controller = OpenAIChatController();
    // 监听列表所有变化（新项添加/当前项更新）
    ever(_controller.responses, (_) => _scrollToBottom());
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _scrollToBottom() {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      if (!_scrollController.hasClients) return;
      
      final maxExtent = _scrollController.position.maxScrollExtent;
      final currentPosition = _scrollController.position.pixels;
      
      // 仅当当前位置远离底部时执行动画滚动，避免不必要的卡顿
      if (currentPosition < maxExtent - 80) {
        _scrollController.animateTo(
          maxExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      } else {
        _scrollController.jumpTo(maxExtent);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<OpenAIChatController>(
      init: _controller,
      builder: (controller) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Expanded(
              child: ListView.builder(
                controller: _scrollController,
                itemCount: controller.responses.length,
                itemBuilder: (context, index) {
                  return SelectionArea(
                    child: MarkdownBody(
                      data: controller.responses[index],
                      styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)).copyWith(
                        p: Theme.of(context).textTheme.bodyLarge?.apply(
                          color: Colors.white,
                          fontSizeFactor: 1.3,
                        ),
                        code: const TextStyle(
                          fontFamily: 'RobotoMono',
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      },
    );
  }
}

方案二：使用 scrollable_positioned_list 精准控制对齐 #

如果原生 ListView 仍无法满足需求，推荐使用 scrollable_positioned_list 包，它支持直接指定项的对齐位置：

1. 添加依赖：

dependencies:
  scrollable_positioned_list: ^0.3.8

2. 实现代码：

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

  @override
  State<OpenAIChat> createState() => _OpenAIChatState();
}

class _OpenAIChatState extends State<OpenAIChat> {
  late final ItemScrollController _itemScrollController;
  late final OpenAIChatController _controller;

  @override
  void initState() {
    super.initState();
    _itemScrollController = ItemScrollController();
    _controller = OpenAIChatController();
    ever(_controller.responses, (_) => _scrollToLastItem());
  }

  void _scrollToLastItem() {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      if (_controller.responses.isEmpty) return;
      
      _itemScrollController.scrollTo(
        index: _controller.responses.length - 1,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
        alignment: 1.0, // 强制最后一项底部对齐视口底部
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<OpenAIChatController>(
      init: _controller,
      builder: (controller) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Expanded(
              child: ScrollablePositionedList.builder(
                itemScrollController: _itemScrollController,
                itemCount: controller.responses.length,
                itemBuilder: (context, index) {
                  return SelectionArea(
                    child: MarkdownBody(
                      data: controller.responses[index],
                      styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)).copyWith(
                        p: Theme.of(context).textTheme.bodyLarge?.apply(
                          color: Colors.white,
                          fontSizeFactor: 1.3,
                        ),
                        code: const TextStyle(
                          fontFamily: 'RobotoMono',
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      },
    );
  }
}

额外注意事项 #

• 确保 OpenAIChatController 中的 responses 是 RxList，或者在内容更新时调用 update() 通知 GetBuilder 重建
• 若使用普通 List，修改当前项内容后需手动调用 controller.update() 触发UI更新

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