add search function in setting page v1

This commit is contained in:
eric 2026-07-12 15:35:01 +08:00
parent 7937c0be97
commit 4b4f90837f
2 changed files with 40 additions and 13 deletions

View file

@ -16,7 +16,8 @@ data class SettingItem(
val title: String, val title: String,
val description: String? = null, val description: String? = null,
val setting_icon: ImageVector, val setting_icon: ImageVector,
val iconKey: String val iconKey: String,
val keywords: List<String> = emptyList()
) )
@ -28,10 +29,10 @@ class SettingViewModel : ViewModel() {
init { init {
_settings.value = listOf( _settings.value = listOf(
SettingItem("profile", "Profile", "Manage your account", Icons.Filled.Person, "profile"), SettingItem("profile", "Profile", "Manage your account", Icons.Filled.Person, "profile", listOf("個人資料", "頭像", "名稱")),
SettingItem("theme", "Theme", "Customize app appearance", Icons.Filled.Palette, "theme"), SettingItem("theme", "Theme", "Customize app appearance", Icons.Filled.Palette, "theme", listOf("dark", "light", "wallpaper", "mode", "主題", "深色", "淺色", "背景")),
SettingItem("devices", "Devices", "Manage connected devices", Icons.Filled.Devices, "devices"), SettingItem("devices", "Devices", "Manage connected devices", Icons.Filled.Devices, "devices", listOf("裝置", "登入紀錄")),
SettingItem("subscription", "Subscription", "View or update your plan", Icons.Filled.Subscriptions, "subscribetion") SettingItem("subscription", "Subscription", "View or update your plan", Icons.Filled.Subscriptions, "subscribetion", listOf("訂閱", "方案"))
) )
} }
} }

View file

@ -1,6 +1,5 @@
package com.example.login_v3.home.setting package com.example.login_v3.home.setting
import android.R
import android.net.Uri import android.net.Uri
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.AnimatedVisibilityScope import androidx.compose.animation.AnimatedVisibilityScope
@ -26,6 +25,7 @@ import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SearchBar import androidx.compose.material3.SearchBar
import androidx.compose.material3.Text import androidx.compose.material3.Text
@ -59,32 +59,58 @@ fun SharedTransitionScope.setting_list_Screen(
var query by remember { mutableStateOf("") } var query by remember { mutableStateOf("") }
var active by remember { mutableStateOf(false) } var active by remember { mutableStateOf(false) }
val settings by viewModel.settings.collectAsState()
// 搜尋過濾邏輯
val filteredSettings = remember(query, settings) {
if (query.isEmpty()) {
settings
} else {
settings.filter { item ->
item.title.contains(query, ignoreCase = true) ||
(item.description?.contains(query, ignoreCase = true) ?: false) ||
item.keywords.any { it.contains(query, ignoreCase = true) }
}
}
}
Column(modifier = Modifier Column(modifier = Modifier
.fillMaxSize() .fillMaxSize()
) { ) {
val settings by viewModel.settings.collectAsState()
Spacer(modifier = Modifier.height(46.dp)) Spacer(modifier = Modifier.height(46.dp))
SearchBar( SearchBar(
query = query, query = query,
onQueryChange = { query = it }, onQueryChange = { query = it },
onSearch = { /* 執行搜尋邏輯 */ }, onSearch = { active = false },
active = active, active = active,
shape = RoundedCornerShape(12.dp), shape = RoundedCornerShape(12.dp),
onActiveChange = { active = it }, onActiveChange = { active = it },
placeholder = { Text("搜尋設定") }, placeholder = { Text("搜尋設定 (例如: dark, profile...)") },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 8.dp) .padding(horizontal = 8.dp)
) { ) {
// 這裡是 SearchBar 展開後的內容 // 這裡是 SearchBar 展開後的內容
Text("搜尋結果: $query") LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
itemsIndexed(filteredSettings) { index, item ->
ListItem(
headlineContent = { Text(item.title) },
supportingContent = { item.description?.let { Text(it) } },
leadingContent = { Icon(item.setting_icon, contentDescription = null) },
modifier = Modifier.clickable {
onItemClick(item.title, item.iconKey)
active = false
}
)
}
}
} // ← 注意這個大括號要結束 SearchBar } // ← 注意這個大括號要結束 SearchBar
Spacer(modifier = Modifier.height(14.dp)) Spacer(modifier = Modifier.height(14.dp))
@ -95,7 +121,7 @@ fun SharedTransitionScope.setting_list_Screen(
verticalArrangement = Arrangement.spacedBy(2.dp), // 每個 item 之間 8.dp verticalArrangement = Arrangement.spacedBy(2.dp), // 每個 item 之間 8.dp
contentPadding = PaddingValues(vertical = 2.dp) contentPadding = PaddingValues(vertical = 2.dp)
) { ) {
itemsIndexed(settings){ index, item -> itemsIndexed(filteredSettings){ index, item ->
Box( Box(
modifier = Modifier modifier = Modifier