更新搜索页面UI

- 搜索按钮更新为可点击
- 搜索框样式更新
- 新增取消按钮
- 发现页面背景颜色更新

app/src/main/java/com/aiosman/riderpro/ui/index/tabs/search/DiscoverScreen.kt

@@ -48,6 +48,7 @@ import com.aiosman.riderpro.LocalNavController
 import com.aiosman.riderpro.R
 import com.aiosman.riderpro.ui.NavigationRoute
 import com.aiosman.riderpro.ui.composables.CustomAsyncImage
+import com.aiosman.riderpro.ui.composables.StatusBarSpacer
 import com.aiosman.riderpro.ui.modifiers.noRippleClickable
 import com.aiosman.riderpro.ui.post.PostViewModel
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
@@ -74,15 +75,14 @@ fun DiscoverScreen() {
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(Color(0xFFF0F2F5))
+            .background(Color(0xFFF4F5F6))
             .pullRefresh(state)
             .padding(bottom = navigationBarPaddings)
     ) {
         Column(
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier.fillMaxWidth().background(Color.White).padding(bottom = 10.dp)
         ) {
-            Spacer(modifier = Modifier.height(statusBarPaddingValues.calculateTopPadding()))
-
+            StatusBarSpacer()
             SearchButton(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -95,7 +95,6 @@ fun DiscoverScreen() {
         Box(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(top = 16.dp)
                 .weight(1f)
         ) {
             DiscoverView()
@@ -114,7 +113,7 @@ fun SearchButton(
         modifier = modifier
             .clip(shape = RoundedCornerShape(8.dp))
             .background(Color(0xFFEEEEEE))
-            .padding(horizontal = 16.dp, vertical = 8.dp)
+            .padding(horizontal = 16.dp, vertical = 12.dp)
             .noRippleClickable {
                 clickAction()
             }
@@ -124,7 +123,8 @@ fun SearchButton(
         ) {
             Icon(
                 Icons.Default.Search,
-                contentDescription = null
+                contentDescription = null,
+                tint = Color(0xFF9E9E9E)
             )
             Box {
                 Text(

app/src/main/java/com/aiosman/riderpro/ui/index/tabs/search/SearchScreen.kt

@@ -43,6 +43,7 @@ import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
@@ -76,7 +77,7 @@ fun SearchScreen() {
     val navigationBarPaddings =
         WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
     val focusRequester = remember { FocusRequester() }
-
+    val navController = LocalNavController.current
     LaunchedEffect(Unit) {
         systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
     }
@@ -91,29 +92,43 @@ fun SearchScreen() {
             .padding(bottom = navigationBarPaddings)
     ) {
         Column(
-            modifier = Modifier.fillMaxWidth().background(Color.White).padding(bottom = 10.dp)
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.White)
+                .padding(bottom = 10.dp)
         ) {
             Spacer(modifier = Modifier.height(statusBarPaddingValues.calculateTopPadding()))
-            SearchInput(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 16.dp, start = 24.dp, end = 24.dp),
-                text = model.searchText,
-                onTextChange = {
-                    model.searchText = it
-                },
-                onSearch = {
-                    model.search()
-                    // hide ime
-                    keyboardController?.hide() // Hide the keyboard
-                },
-                focusRequester = focusRequester
-            )
+            Row(
+                modifier = Modifier.padding(top = 16.dp, start = 24.dp, end = 24.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                SearchInput(
+                    modifier = Modifier
+                        .weight(1f),
+                    text = model.searchText,
+                    onTextChange = {
+                        model.searchText = it
+                    },
+                    onSearch = {
+                        model.search()
+                        // hide ime
+                        keyboardController?.hide() // Hide the keyboard
+                    },
+                    focusRequester = focusRequester
+                )
+                Spacer(modifier = Modifier.size(16.dp))
+                Text(
+                    stringResource(R.string.cancel),
+                    fontSize = 16.sp,
+                    modifier = Modifier.noRippleClickable {
+                        navController.popBackStack()
+                    })
+            }
+
         }
 
         if (model.showResult) {
             Spacer(modifier = Modifier.padding(8.dp))
-
             TabRow(
                 selectedTabIndex = selectedTabIndex.value,
                 backgroundColor = Color.White,
@@ -130,7 +145,6 @@ fun SearchScreen() {
                     )
                 }
             }
-
             SearchPager(
                 pagerState = pagerState
             )
@@ -149,17 +163,17 @@ fun SearchInput(
     val context = LocalContext.current
     Box(
         modifier = modifier
-            .clip(shape = RoundedCornerShape(8.dp))
-
-            .background(Color(0xFFEEEEEE))
-            .padding(horizontal = 16.dp, vertical = 8.dp)
+            .clip(shape = RoundedCornerShape(16.dp))
+            .background(Color(0xFFF4F5F6))
+            .padding(horizontal = 16.dp, vertical = 12.dp)
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically
         ) {
             Icon(
                 Icons.Default.Search,
-                contentDescription = null
+                contentDescription = null,
+                tint = Color(0xFF9E9E9E)
             )
             Box {
                 if (text.isEmpty()) {

app/src/main/res/values-zh/strings.xml

@@ -50,4 +50,5 @@
     <string name="edit_profile">编辑个人资料</string>
     <string name="logout">登出</string>
     <string name="change_password">变更密码</string>
+    <string name="cancel">取消</string>
 </resources>

app/src/main/res/values/strings.xml

@@ -49,4 +49,5 @@
     <string name="edit_profile">Edit profile</string>
     <string name="logout">Logout</string>
     <string name="change_password">Change password</string>
+    <string name="cancel">Cancel</string>
 </resources>