如何基于用户列表数据实现可折叠的expansion view展示效果

核心逻辑通用，不受开发平台限制，分为2步判断：

1. 先获取用户列表的长度userList.length
2. 按照长度走不同渲染分支：
   • 长度 == 1：直接渲染单条用户信息卡片，不需要添加展开/收起交互控件
   • 长度 > 1：渲染支持展开/收起的容器组件，默认可设置为收起状态，仅展示头部提示/前1条用户信息，点击后切换为展开状态展示全部列表内容，再次点击切回收起状态。

1. Flutter 实现 #

可以直接用官方自带的ExpansionTile组件配合条件判断实现，核心代码示例：

Widget buildUserCard(List<User> userList) {
  if (userList.length == 1) {
    // 单条数据直接渲染用户项
    return UserItem(user: userList.first);
  } else {
    // 多条数据用可展开容器包裹
    return ExpansionTile(
      title: Text("共${userList.length}位用户"),
      // 收起状态的头部也可以自定义为展示第一条用户信息
      children: userList.map((user) => UserItem(user: user)).toList(),
    );
  }
}

如果需要自定义展开收起的样式、动画效果，也可以自己用AnimatedContainer配合状态变量isExpanded控制容器高度实现。

2. Android Jetpack Compose 实现 #

用自带的可展开卡片组件或者自定义布局配合状态判断即可，核心代码示例：

@Composable
fun UserCard(userList: List<User>) {
    val isExpanded = remember { mutableStateOf(false) }
    if (userList.size == 1) {
        UserItem(user = userList.first())
    } else {
        Card {
            Column {
                // 头部点击切换展开状态
                Row(modifier = Modifier.clickable { isExpanded.value = !isExpanded.value }) {
                    Text(text = "共${userList.size}位用户")
                    // 展开收起状态箭头
                    Icon(
                        imageVector = if (isExpanded.value) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
                        contentDescription = null
                    )
                }
                // 展开时展示全部用户列表
                if (isExpanded.value) {
                    Column {
                        userList.forEach { user ->
                            UserItem(user = user)
                        }
                    }
                }
            }
        }
    }
}

3. 前端（React/Vue）实现 #

逻辑完全一致，用一个状态变量控制展开收起状态，通过列表长度判断走不同渲染分支即可，这里给出React示例：

import { useState } from 'react'

const UserCard = ({ userList }) => {
  const [isExpanded, setIsExpanded] = useState(false)
  
  if (userList.length === 1) {
    return <UserItem user={userList[0]} />
  }

  return (
    <div className="user-card">
      <div className="card-header" onClick={() => setIsExpanded(!isExpanded)}>
        <span>共{userList.length}位用户</span>
        <span>{isExpanded ? '收起' : '展开'}</span>
      </div>
      {isExpanded && (
        <div className="user-list">
          {userList.map(user => <UserItem key={user.id} user={user} />)}
        </div>
      )}
    </div>
  )
}

• 如果需要在收起状态也展示部分内容（比如前1条用户信息+“还有X位用户”提示），可以在长度>1的分支下，自定义收起状态的头部内容即可
• 展开收起的动画可以直接用对应平台自带的动画API实现，不需要额外编写复杂逻辑
• 如果用户列表数据量很大（几十上百条），建议展开时用懒加载或者分页渲染，避免一次性渲染太多组件导致页面卡顿

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