Flutter：滚动ListView时如何隐藏图片并保留文本显示？

可以通过ScrollController监听列表的滚动状态，动态控制图片组件的显示与隐藏，具体实现步骤如下：

1. 在State类中定义滚动控制器和滚动状态变量：

late ScrollController _scrollController;
bool _isScrolling = false;

2. 在initState中初始化控制器并添加滚动监听：

@override
void initState() {
  super.initState();
  _scrollController = ScrollController();
  // 监听滚动开始与结束
  _scrollController.addListener(() {
    if (_scrollController.position.isScrollingNotifier.value) {
      if (!_isScrolling) {
        setState(() {
          _isScrolling = true;
        });
      }
    } else {
      if (_isScrolling) {
        setState(() {
          _isScrolling = false;
        });
      }
    }
  });
}

3. 在dispose中销毁控制器，避免内存泄漏：

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

4. 修改原ListView.builder代码，关联控制器并根据滚动状态控制图片显示：

ListView.builder(
  controller: _scrollController,
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) {
    return Column(
      children: [
        // 用Visibility控制图片显示，滚动时隐藏
        Visibility(
          visible: !_isScrolling,
          child: Image.network("你的图片URL"),
        ),
        Text("你的文本内容"),
      ],
    );
  },
  itemCount: 你的数据长度,
),

补充说明 #

• 如果希望图片有渐隐渐显的过渡效果，可以把Visibility换成AnimatedOpacity组件，实现平滑动画：

AnimatedOpacity(
  opacity: _isScrolling ? 0 : 1,
  duration: const Duration(milliseconds: 200),
  child: Image.network("你的图片URL"),
),

• 滚动状态的判断依赖isScrollingNotifier，它能准确捕捉滚动的开始与结束事件，比监听滚动位置变化更精准。

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