如何实现类似谷歌应用的Account Chooser与用户设置功能？

关于你的判断 #

你的猜测是对的：谷歌地图、Gmail这类应用的Account Chooser，本质就是完全自定义的DialogFragment（或Dialog），配合Material You风格的UI组件实现的——官方并没有提供开箱即用的同款组件，需要基于基础组件定制或借助第三方库扩展。

可用资源与实现思路 #

非Compose方案（优先推荐） #

1. 官方基础组件与API

• 容器用DialogFragment，搭配Material Design 3组件（MaterialCardView、RecyclerView、Chip等）构建UI，通过继承Theme.Material3.DayNight主题，利用colorScheme自动适配Material You的动态配色。
• 账号数据可通过**Google Identity Services (GIS)**的GoogleSignInClient获取已登录账号列表，再渲染到自定义Dialog中；如果是自有账号体系，可结合androidx.accounts:accounts-authenticator库管理账号信息。
• 头像加载推荐用Glide，方便实现圆形裁剪、占位图等Material风格效果。

2. 示例代码片段

DialogFragment实现：

class AccountChooserDialog : DialogFragment() {
    private lateinit var binding: DialogAccountChooserBinding
    private val accountAdapter = AccountAdapter()

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        binding = DialogAccountChooserBinding.inflate(layoutInflater)
        val dialog = MaterialAlertDialogBuilder(requireContext())
            .setView(binding.root)
            .create()

        binding.rvAccounts.adapter = accountAdapter
        // 实际场景替换为从GIS/AccountManager获取真实账号列表
        accountAdapter.submitList(getSampleAccounts())

        return dialog
    }

    private fun getSampleAccounts(): List<AccountItem> {
        return listOf(
            AccountItem("user1@example.com", R.drawable.avatar_default),
            AccountItem("user2@example.com", R.drawable.avatar_default)
        )
    }
}

账号列表Adapter：

class AccountAdapter : ListAdapter<AccountItem, AccountAdapter.ViewHolder>(DiffCallback()) {
    inner class ViewHolder(private val binding: ItemAccountBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(item: AccountItem) {
            binding.tvEmail.text = item.email
            Glide.with(itemView)
                .load(item.avatarRes)
                .circleCrop()
                .into(binding.ivAvatar)
            
            itemView.setOnClickListener {
                // 处理账号选择后的逻辑（如切换登录态、跳转设置）
            }
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val binding = ItemAccountBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return ViewHolder(binding)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(getItem(position))
    }

    class DiffCallback : DiffUtil.ItemCallback<AccountItem>() {
        override fun areItemsTheSame(oldItem: AccountItem, newItem: AccountItem): Boolean {
            return oldItem.email == newItem.email
        }

        override fun areContentsTheSame(oldItem: AccountItem, newItem: AccountItem): Boolean {
            return oldItem == newItem
        }
    }
}

data class AccountItem(val email: String, val avatarRes: Int)

Compose方案 #

用Compose的Dialog组件包裹Material 3的Card、LazyColumn构建UI，配合谷歌身份认证库获取账号数据：

@Composable
fun AccountChooserDialog(
    accounts: List<AccountItem>,
    onAccountSelected: (AccountItem) -> Unit,
    onDismiss: () -> Unit
) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.width(320.dp),
            shape = MaterialTheme.shapes.extraLarge
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text(
                    text = "选择账号",
                    style = MaterialTheme.typography.headlineSmall
                )
                Spacer(modifier = Modifier.height(16.dp))
                LazyColumn {
                    items(accounts) { account ->
                        AccountItemRow(account) {
                            onAccountSelected(account)
                            onDismiss()
                        }
                        Spacer(modifier = Modifier.height(8.dp))
                    }
                }
                Spacer(modifier = Modifier.height(16.dp))
                TextButton(onClick = onDismiss) {
                    Text("取消")
                }
            }
        }
    }
}

@Composable
fun AccountItemRow(account: AccountItem, onClick: () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .padding(12.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = account.avatarRes),
            contentDescription = "账号头像",
            modifier = Modifier
                .size(48.dp)
                .clip(CircleShape)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = account.email,
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

UI实现提示（Material You风格） #

• 配色：直接使用MaterialTheme.colorScheme中的primary、surface、onSurface等颜色，自动适配深浅模式。
• 形状：Dialog的Card使用extraLarge圆角，贴合谷歌应用的视觉风格。
• 交互：账号列表项添加点击涟漪效果（非Compose可在布局中设置android:foreground="?attr/selectableItemBackground"）。
• 头像：统一用圆形裁剪，加载失败时显示默认占位图，保证视觉一致性。

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