Flutter如何给Dropdown绑定Scroll Controller实现滚动到底加载更多？

官方原生的DropdownButton和PopupMenuButton确实未对外暴露内部滚动控制器的参数，无法直接监听滚动事件实现加载更多逻辑，可通过以下两种方案实现需求：

方案1：自定义弹出下拉层（可控性最高） #

完全自主实现下拉弹出逻辑，可灵活控制所有交互细节：

• 用普通按钮模拟下拉框的显示样式与点击触发逻辑
• 点击按钮时通过showMenu或者自定义PopupRoute弹出浮层，浮层内部自行实现ListView组件，此时可给ListView绑定自定义的ScrollController
• 给ScrollController添加滚动监听，判断滚动位置是否接近底部，触发加载更多逻辑

核心实现代码示例：

import 'package:flutter/material.dart';

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

  @override
  State<CustomDropdownDemo> createState() => _CustomDropdownDemoState();
}

class _CustomDropdownDemoState extends State<CustomDropdownDemo> {
  final ScrollController _scrollController = ScrollController();
  List<String> dataList = List.generate(20, (index) => "选项 ${index + 1}");
  String? currentSelected;
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() async {
      // 预留200px提前量触发加载，提升使用流畅度
      if (_scrollController.position.pixels >= 
          _scrollController.position.maxScrollExtent - 200 && !_isLoading) {
        setState(() => _isLoading = true);
        // 模拟异步加载更多数据
        await Future.delayed(const Duration(seconds: 1));
        final newData = List.generate(10, (index) => "选项 ${dataList.length + index + 1}");
        setState(() {
          dataList.addAll(newData);
          _isLoading = false;
        });
      }
    });
  }

  void _showCustomDropdown(BuildContext context) async {
    final RenderBox button = context.findRenderObject() as RenderBox;
    final Offset position = button.localToGlobal(Offset.zero);
    // 弹出自定义下拉菜单
    final selectedValue = await showMenu(
      context: context,
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      position: RelativeRect.fromLTRB(
        position.dx, 
        position.dy + button.size.height, 
        position.dx + button.size.width, 
        position.dy + button.size.height + 400
      ),
      items: [
        PopupMenuItem(
          enabled: false,
          padding: EdgeInsets.zero,
          child: Container(
            height: 400,
            width: button.size.width,
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: ListView.builder(
              controller: _scrollController,
              padding: EdgeInsets.zero,
              itemCount: dataList.length + (_isLoading ? 1 : 0),
              itemBuilder: (context, index) {
                if (index == dataList.length) {
                  return const Padding(
                    padding: EdgeInsets.symmetric(vertical: 16),
                    child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
                  );
                }
                return InkWell(
                  onTap: () => Navigator.pop(context, dataList[index]),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                    child: Text(
                      dataList[index],
                      style: const TextStyle(fontSize: 14, color: Colors.black87),
                    ),
                  ),
                );
              },
            ),
          ),
        )
      ],
    );
    if (selectedValue != null) {
      setState(() => currentSelected = selectedValue);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () => _showCustomDropdown(context),
          child: Container(
            width: 200,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey.shade300),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  currentSelected ?? "请选择选项",
                  style: TextStyle(
                    fontSize: 14,
                    color: currentSelected == null ? Colors.grey.shade600 : Colors.black87,
                  ),
                ),
                const Icon(Icons.arrow_drop_down, size: 20, color: Colors.grey)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

方案2：使用扩展下拉组件 #

可直接使用对原生DropdownButton做了功能扩展的组件，这类组件已经对外暴露了滚动控制器参数，开发成本更低，只需要给滚动控制器添加监听即可实现加载更多逻辑。

核心实现代码示例：

// 引入扩展组件后实现
DropdownButton2(
  value: currentSelected,
  scrollController: _scrollController,
  buttonWidth: 200,
  itemHeight: 48,
  dropdownMaxHeight: 400,
  hint: const Text("请选择选项"),
  items: dataList.map((item) {
    return DropdownMenuItem(
      value: item,
      child: Text(item),
    );
  }).toList() + [
    if (_isLoading)
      const DropdownMenuItem(
        enabled: false,
        child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
      )
  ],
  onChanged: (value) {
    setState(() => currentSelected = value);
  },
)

注意事项 #

• 滚动监听判断底部时可预留适当提前量，无需完全滚动到底部再触发加载，提升交互流畅度
• 添加_isLoading防抖标记，避免滚动过程中重复触发加载请求
• 页面销毁时必须销毁ScrollController实例，避免内存泄漏

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