SwiftUI如何实现支持部分展开收起的List列表

这个效果不需要依赖组件自带的Section折叠能力，核心靠响应式状态控制渲染的列表条目数就能实现，逻辑通用，不管是原生开发还是用React/Vue等框架都适用：

• 先定义两个基础变量：
  • 存储全量列表数据的数组
  • 标记「是否展开全部」的布尔状态，默认值为false
• 计算实际渲染的列表片段：未展开时只截取全量数据的前5条，展开时直接返回全量数据，核心逻辑代码：

  const renderListData = isExpanded ? fullListData : fullListData.slice(0, 5)
  

• 正常遍历renderListData渲染每一行列表项即可，原有列表项的样式、交互逻辑完全不需要改动。
• 追加展开/收起按钮：只有当全量列表长度大于5时才显示按钮，避免短列表出现多余控件；点击按钮时切换isExpanded的布尔值，同步更新按钮文案为「显示全部」/「收起」即可。

原生JS实现示例 #

可以直接运行的最简实现参考：

<ul id="listContainer"></ul>
<button id="toggleBtn" style="display:none;">显示全部</button>

<script>
// 模拟全量列表数据
const fullListData = Array.from({length: 10}, (_, idx) => `第${idx + 1}行列表内容`)
const DEFAULT_VISIBLE_COUNT = 5
let isExpanded = false

const listEl = document.querySelector('#listContainer')
const btnEl = document.querySelector('#toggleBtn')

function render() {
  // 计算要渲染的数据
  const showData = isExpanded ? fullListData : fullListData.slice(0, DEFAULT_VISIBLE_COUNT)
  // 渲染列表
  listEl.innerHTML = showData.map(content => `<li>${content}</li>`).join('')
  // 控制按钮状态
  if (fullListData.length > DEFAULT_VISIBLE_COUNT) {
    btnEl.style.display = 'block'
    btnEl.innerText = isExpanded ? '收起' : '显示全部'
  }
}

// 绑定按钮点击事件
btnEl.addEventListener('click', () => {
  isExpanded = !isExpanded
  render()
})

// 初始化渲染
render()
</script>

React框架实现片段 #

如果是用React开发，逻辑完全一致，只需要把状态换成框架自带的响应式状态即可：

import { useState } from 'react'

export default function ExpandableList({ fullListData }) {
  const [isExpanded, setIsExpanded] = useState(false)
  const showData = isExpanded ? fullListData : fullListData.slice(0, 5)

  return (
    <div className="list-wrapper">
      <ul className="list-content">
        {showData.map(item => (
          <li key={item.id} className="list-item">{item.content}</li>
        ))}
      </ul>
      {fullListData.length > 5 && (
        <button 
          className="toggle-btn"
          onClick={() => setIsExpanded(prev => !prev)}
        >
          {isExpanded ? '收起' : '显示全部'}
        </button>
      )}
    </div>
  )
}

如果你的列表接入了虚拟滚动、下拉加载等能力，只需要把对应组件接收的数据源替换成计算后的showData就行，不需要改动其他配置。

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