FlatList问题：展开行内容时如何保持该行在视口原位置？

我来帮你搞定这个问题！这个需求其实挺常见的——点击FlatList的行展开内容时，希望该行稳稳待在用户点击的屏幕位置，展开的内容往下铺，而不是把原有内容挤上去。核心思路就是记住点击行的屏幕位置，等展开/收起完成后手动调整FlatList的滚动偏移量，让该行精准回到原来的位置。下面是具体的实现步骤和可直接运行的代码：

1. 先理清楚要用到的状态和引用 #

首先得准备几个关键的东西：

• expandedRows：一个对象，用来记录哪一行是展开状态（键是行的ID，值是布尔值，true就是展开）。
• rowLayouts：存储每行的布局信息，比如行在FlatList内容里的坐标、高度这些，靠onLayout事件获取。
• scrollY：实时记录FlatList当前滚动了多少距离，方便计算行的屏幕位置。
• flatListRef：FlatList的引用，用来调用滚动的方法。
• targetScreenY：用useRef存的变量，记录用户点击行时，该行在屏幕上的Y坐标，避免状态更新导致的重新渲染。

2. 关键函数怎么写 #

记录行的布局和滚动位置 #

• handleRowLayout：每一行渲染完成后，通过onLayout事件拿到它的布局信息，存在rowLayouts里，这样我们随时能知道某一行在内容里的位置。
• handleScroll：监听FlatList的滚动事件，实时更新scrollY，这样能准确计算行在屏幕上的位置。

点击行的处理逻辑 #

1. 点击行时，先算出该行在屏幕上的Y坐标——用行在内容里的Y坐标减去当前的滚动偏移量，得到的就是它相对于屏幕顶部的位置，把这个值存在targetScreenY里。
2. 切换该行的展开状态（展开变收起，收起变展开）。
3. 等FlatList重新布局完成后，计算需要滚动的偏移量，调用scrollToOffset让该行回到原来的屏幕位置。

3. 完整的代码示例 #

import React, { useState, useRef, useEffect } from 'react';
import { FlatList, View, Text, TouchableOpacity, Dimensions } from 'react-native';

const { height: screenHeight } = Dimensions.get('window');

const ExpandableFlatList = () => {
  const flatListRef = useRef(null);
  const targetScreenY = useRef(0);
  const prevExpandedRows = useRef({});
  const [expandedRows, setExpandedRows] = useState({});
  const [scrollY, setScrollY] = useState(0);
  const [rowLayouts, setRowLayouts] = useState({});

  // 模拟20条列表数据，你可以换成自己的业务数据
  const data = Array.from({ length: 20 }).map((_, idx) => ({
    id: String(idx + 1),
    title: `Item ${idx + 1}`,
    content: `这是Item ${idx + 1}的展开内容～\n\n可以放多行文字，甚至嵌套其他组件。关键是展开时这一行要留在你点击的位置，不会乱跑。`
  }));

  // 记录每行的布局信息
  const handleRowLayout = (id, e) => {
    const { x, y, width, height } = e.nativeEvent.layout;
    setRowLayouts(prev => ({ ...prev, [id]: { x, y, width, height } }));
  };

  // 实时记录滚动偏移量
  const handleScroll = (e) => {
    setScrollY(e.nativeEvent.contentOffset.y);
  };

  // 点击行切换展开/收起
  const handleRowPress = (item) => {
    const isExpanded = !!expandedRows[item.id];
    const currentRowLayout = rowLayouts[item.id];
    if (!currentRowLayout) return;

    // 计算点击行在屏幕上的Y坐标
    targetScreenY.current = currentRowLayout.y - scrollY;
    // 更新展开状态
    setExpandedRows(prev => ({ ...prev, [item.id]: !isExpanded }));
    // 保存之前的展开状态，方便后续找到哪一行变了
    prevExpandedRows.current = { ...expandedRows };
  };

  // 展开/收起后自动调整滚动位置
  useEffect(() => {
    // 找到状态变化的那一行ID
    const updatedItemId = Object.keys(expandedRows).find(
      id => expandedRows[id] !== prevExpandedRows.current[id]
    );
    if (!updatedItemId) return;

    const currentRowLayout = rowLayouts[updatedItemId];
    if (!currentRowLayout) return;

    // 计算需要滚动的偏移量，让行回到原来的屏幕位置
    const requiredScrollOffset = currentRowLayout.y - targetScreenY.current;
    flatListRef.current?.scrollToOffset({
      offset: requiredScrollOffset,
      animated: true // 要不要动画，你可以自己调false
    });
  }, [expandedRows, rowLayouts]);

  // 渲染每一行
  const renderItem = ({ item }) => {
    const isExpanded = !!expandedRows[item.id];
    return (
      <TouchableOpacity
        onPress={() => handleRowPress(item)}
        onLayout={(e) => handleRowLayout(item.id, e)}
        style={{
          padding: 16,
          borderBottomWidth: 1,
          borderBottomColor: '#eee',
          backgroundColor: '#fff'
        }}
      >
        <Text style={{ fontSize: 18, fontWeight: '600' }}>{item.title}</Text>
        {isExpanded && (
          <Text style={{ marginTop: 12, fontSize: 16, color: '#666', lineHeight: 24 }}>
            {item.content}
          </Text>
        )}
      </TouchableOpacity>
    );
  };

  return (
    <FlatList
      ref={flatListRef}
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      onScroll={handleScroll}
      scrollEventThrottle={16} // 确保滚动事件实时更新，不卡顿
    />
  );
};

export default ExpandableFlatList;

4. 几个关键细节要注意 #

• 布局更新的时机：用useEffect监听expandedRows的变化，确保在FlatList重新布局完成后再调整滚动位置，比用setTimeout靠谱多了，不会因为设备性能差异出问题。
• 精确的滚动计算：通过行的内容Y坐标减去目标屏幕Y坐标，得到的偏移量能让行精准回到原来的位置，不管展开内容有多高。
• 自适应高度支持：不管你的展开内容是固定高度还是自适应高度，onLayout都会拿到真实的布局信息，计算依然有效。
• 收起时也生效：收起行的时候，同样的逻辑会自动调整滚动位置，让行依然保持在用户点击的位置，体验一致。

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