Flutter中ExpansionPanelList无ScrollController时滚动加载更多解决方案

方案1：用NotificationListener监听滚动通知 #

ExpansionPanelList的滚动事件可以通过NotificationListener捕获，无需额外的ScrollController。通过监听滚动结束通知，判断是否到达底部即可触发加载逻辑。

代码示例：

bool _isLoading = false;

void _loadMoreItems() async {
  if (_isLoading) return;
  _isLoading = true;
  // 模拟异步加载数据
  await Future.delayed(const Duration(seconds: 1));
  // 添加新列表项到_panelItems
  setState(() {
    _panelItems.addAll(newItems);
    _isLoading = false;
  });
}

@override
Widget build(BuildContext context) {
  return NotificationListener<ScrollNotification>(
    onNotification: (notification) {
      if (notification is ScrollEndNotification && !_isLoading) {
        final scrollMetrics = notification.metrics;
        // 预留20像素的阈值，避免因精度问题频繁触发
        if (scrollMetrics.pixels >= scrollMetrics.maxScrollExtent - 20) {
          _loadMoreItems();
        }
      }
      return false; // 允许通知继续传递，不影响组件原有行为
    },
    child: ExpansionPanelList(
      expansionCallback: (index, isExpanded) {
        setState(() {
          _panelItems[index].isExpanded = !isExpanded;
        });
      },
      children: _panelItems.map((item) {
        return ExpansionPanel(
          headerBuilder: (context, isExpanded) => ListTile(title: Text(item.title)),
          body: ListTile(title: Text(item.content)),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    ),
  );
}

方案2：将ExpansionPanelList放入带ScrollController的滚动容器 #

如果更习惯使用ScrollController的方式，可以把ExpansionPanelList包裹在SingleChildScrollView或ListView中，给外层容器绑定ScrollController来监听滚动位置。

代码示例：

final ScrollController _scrollController = ScrollController();
bool _isLoading = false;

@override
void initState() {
  super.initState();
  _scrollController.addListener(_onScroll);
}

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

void _onScroll() {
  if (_isLoading) return;
  final position = _scrollController.position;
  if (position.pixels >= position.maxScrollExtent - 20) {
    _loadMoreItems();
  }
}

void _loadMoreItems() async {
  _isLoading = true;
  await Future.delayed(const Duration(seconds: 1));
  setState(() {
    _panelItems.addAll(newItems);
    _isLoading = false;
  });
}

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    controller: _scrollController,
    child: ExpansionPanelList(
      expansionCallback: (index, isExpanded) {
        setState(() {
          _panelItems[index].isExpanded = !isExpanded;
        });
      },
      children: _panelItems.map((item) {
        return ExpansionPanel(
          headerBuilder: (context, isExpanded) => ListTile(title: Text(item.title)),
          body: ListTile(title: Text(item.content)),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    ),
  );
}

注意事项 #

• 务必添加_isLoading状态标记，防止滚动到底部时重复发起加载请求。
• 展开/折叠面板会改变滚动容器的总高度，可能导致滚动位置偏移，建议在展开操作后延迟100-200毫秒再恢复滚动监听，或者在判断条件中增加滚动状态的校验（如仅在ScrollEndNotification时触发）。

内容的提问来源于stack exchange，提问作者Amir Hossein Ohadi