add search function in setting page v1
This commit is contained in:
parent
7937c0be97
commit
4b4f90837f
2 changed files with 40 additions and 13 deletions
|
|
@ -16,7 +16,8 @@ data class SettingItem(
|
|||
val title: String,
|
||||
val description: String? = null,
|
||||
val setting_icon: ImageVector,
|
||||
val iconKey: String
|
||||
val iconKey: String,
|
||||
val keywords: List<String> = emptyList()
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -28,10 +29,10 @@ class SettingViewModel : ViewModel() {
|
|||
|
||||
init {
|
||||
_settings.value = listOf(
|
||||
SettingItem("profile", "Profile", "Manage your account", Icons.Filled.Person, "profile"),
|
||||
SettingItem("theme", "Theme", "Customize app appearance", Icons.Filled.Palette, "theme"),
|
||||
SettingItem("devices", "Devices", "Manage connected devices", Icons.Filled.Devices, "devices"),
|
||||
SettingItem("subscription", "Subscription", "View or update your plan", Icons.Filled.Subscriptions, "subscribetion")
|
||||
SettingItem("profile", "Profile", "Manage your account", Icons.Filled.Person, "profile", listOf("個人資料", "頭像", "名稱")),
|
||||
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", listOf("裝置", "登入紀錄")),
|
||||
SettingItem("subscription", "Subscription", "View or update your plan", Icons.Filled.Subscriptions, "subscribetion", listOf("訂閱", "方案"))
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
package com.example.login_v3.home.setting
|
||||
|
||||
import android.R
|
||||
import android.net.Uri
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.animation.AnimatedVisibilityScope
|
||||
|
|
@ -26,6 +25,7 @@ import androidx.compose.foundation.lazy.itemsIndexed
|
|||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.ListItem
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.SearchBar
|
||||
import androidx.compose.material3.Text
|
||||
|
|
@ -59,32 +59,58 @@ fun SharedTransitionScope.setting_list_Screen(
|
|||
var query by remember { mutableStateOf("") }
|
||||
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
|
||||
.fillMaxSize()
|
||||
) {
|
||||
|
||||
val settings by viewModel.settings.collectAsState()
|
||||
|
||||
|
||||
Spacer(modifier = Modifier.height(46.dp))
|
||||
|
||||
SearchBar(
|
||||
query = query,
|
||||
onQueryChange = { query = it },
|
||||
onSearch = { /* 執行搜尋邏輯 */ },
|
||||
onSearch = { active = false },
|
||||
active = active,
|
||||
shape = RoundedCornerShape(12.dp),
|
||||
onActiveChange = { active = it },
|
||||
placeholder = { Text("搜尋設定") },
|
||||
placeholder = { Text("搜尋設定 (例如: dark, profile...)") },
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 8.dp)
|
||||
|
||||
) {
|
||||
// 這裡是 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
|
||||
|
||||
Spacer(modifier = Modifier.height(14.dp))
|
||||
|
|
@ -95,7 +121,7 @@ fun SharedTransitionScope.setting_list_Screen(
|
|||
verticalArrangement = Arrangement.spacedBy(2.dp), // 每個 item 之間 8.dp
|
||||
contentPadding = PaddingValues(vertical = 2.dp)
|
||||
) {
|
||||
itemsIndexed(settings){ index, item ->
|
||||
itemsIndexed(filteredSettings){ index, item ->
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
|
|
|
|||
Loading…
Reference in a new issue