如何在Android中创建类似WhatsApp的应用语言选择布局？

核心布局结构拆解 #

参考图里的语言选择界面核心元素包括：

• 顶部导航栏：带返回按钮和"App Language"标题
• 搜索栏：支持实时筛选语言，带搜索图标和占位提示
• 语言列表：每个条目包含英文语言名称+原生语言名称，选中项右侧显示对勾标记

分平台实现示例 #

Android（Jetpack Compose） #

@Composable
fun LanguageSelectionScreen(
    currentLanguage: String,
    languages: List<Pair<String, String>>, // Pair<英文名称, 原生名称>
    onLanguageSelected: (String) -> Unit,
    onBackPressed: () -> Unit
) {
    var searchQuery by remember { mutableStateOf("") }
    // 同时匹配英文和原生名称的筛选逻辑
    val filteredLanguages = languages.filter {
        it.first.contains(searchQuery, ignoreCase = true) || it.second.contains(searchQuery, ignoreCase = true)
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("App Language") },
                navigationIcon = {
                    IconButton(onClick = onBackPressed) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                    }
                }
            )
        }
    ) { paddingValues ->
        Column(modifier = Modifier.padding(paddingValues)) {
            // 搜索栏
            TextField(
                value = searchQuery,
                onValueChange = { searchQuery = it },
                leadingIcon = { Icon(Icons.Default.Search, contentDescription = "搜索") },
                placeholder = { Text("搜索语言") },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 8.dp),
                singleLine = true
            )

            // 语言列表
            LazyColumn {
                items(filteredLanguages) { (englishName, nativeName) ->
                    val isSelected = englishName == currentLanguage
                    ListItem(
                        headlineContent = { Text(englishName) },
                        supportingContent = { Text(nativeName) },
                        trailingContent = {
                            if (isSelected) {
                                Icon(Icons.Default.Check, contentDescription = "已选中")
                            }
                        },
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { onLanguageSelected(englishName) }
                            .padding(vertical = 4.dp)
                    )
                }
            }
        }
    }
}

iOS（SwiftUI） #

struct LanguageSelectionView: View {
    let currentLanguage: String
    let languages: [(englishName: String, nativeName: String)]
    var onLanguageSelected: (String) -> Void
    var onBackPressed: () -> Void
    
    @State private var searchQuery = ""
    
    // 实时筛选逻辑
    private var filteredLanguages: [(englishName: String, nativeName: String)] {
        languages.filter {
            $0.englishName.localizedCaseInsensitiveContains(searchQuery) ||
            $0.nativeName.localizedCaseInsensitiveContains(searchQuery)
        }
    }
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                // 搜索栏
                TextField("搜索语言", text: $searchQuery)
                    .padding(12)
                    .background(Color(.systemGray6))
                    .cornerRadius(8)
                    .padding(horizontal: 16)
                    .padding(vertical: 8)
                
                // 语言列表
                List(filteredLanguages, id: \.englishName) { language in
                    HStack {
                        VStack(alignment: .leading, spacing: 4) {
                            Text(language.englishName)
                                .font(.headline)
                            Text(language.nativeName)
                                .font(.subheadline)
                                .foregroundColor(.secondary)
                        }
                        Spacer()
                        // 选中状态标记
                        if language.englishName == currentLanguage {
                            Image(systemName: "checkmark")
                                .foregroundColor(.blue)
                        }
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        onLanguageSelected(language.englishName)
                    }
                }
                .listStyle(.plain)
            }
            .navigationTitle("App Language")
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: onBackPressed) {
                        Image(systemName: "arrow.left")
                    }
                }
            }
        }
    }
}

关键细节优化 #

• 数据源准备：可以从系统Locale类批量获取语言的英文和原生名称，也可以自定义静态列表适配需求
• 筛选体验：同时匹配英文和原生名称，覆盖不同用户的查找习惯
• 交互反馈：列表项整行可点击，避免无效点击区域；选中状态用对勾直观标记
• 性能优化：使用懒加载列表（LazyColumn/List），避免大量语言条目导致的卡顿

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