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 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("訂閱", "方案"))
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue