Skip to content

Commit 37bff1b

Browse files
committed
完善手机布局
1 parent 1a642fb commit 37bff1b

File tree

9 files changed

+649
-393
lines changed

9 files changed

+649
-393
lines changed

app/src/main/kotlin/dev/aaa1115910/bv/mobile/activities/MainActivity.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import android.os.Bundle
44
import androidx.activity.ComponentActivity
55
import androidx.activity.compose.setContent
66
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
7-
import dev.aaa1115910.bv.mobile.screen.HomeScreen
7+
import dev.aaa1115910.bv.mobile.screen.MobileMainScreen
88
import dev.aaa1115910.bv.mobile.theme.BVMobileTheme
99

1010
class MainActivity : ComponentActivity() {
@@ -13,7 +13,7 @@ class MainActivity : ComponentActivity() {
1313
super.onCreate(savedInstanceState)
1414
setContent {
1515
BVMobileTheme {
16-
HomeScreen()
16+
MobileMainScreen()
1717
}
1818
}
1919
}
Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
package dev.aaa1115910.bv.mobile.componment.home
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.Spacer
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.material.icons.Icons
13+
import androidx.compose.material.icons.filled.Menu
14+
import androidx.compose.material.icons.filled.Search
15+
import androidx.compose.material.icons.filled.Star
16+
import androidx.compose.material3.DockedSearchBar
17+
import androidx.compose.material3.ExperimentalMaterial3Api
18+
import androidx.compose.material3.Icon
19+
import androidx.compose.material3.IconButton
20+
import androidx.compose.material3.MaterialTheme
21+
import androidx.compose.material3.SearchBar
22+
import androidx.compose.material3.Tab
23+
import androidx.compose.material3.TabRow
24+
import androidx.compose.material3.Text
25+
import androidx.compose.runtime.Composable
26+
import androidx.compose.runtime.getValue
27+
import androidx.compose.runtime.mutableStateOf
28+
import androidx.compose.runtime.remember
29+
import androidx.compose.runtime.setValue
30+
import androidx.compose.ui.Modifier
31+
import androidx.compose.ui.semantics.isContainer
32+
import androidx.compose.ui.semantics.semantics
33+
import androidx.compose.ui.text.style.TextOverflow
34+
import androidx.compose.ui.unit.dp
35+
import androidx.compose.ui.zIndex
36+
37+
@Composable
38+
fun HomeSearchTopBarCompact(
39+
modifier: Modifier = Modifier,
40+
query: String,
41+
active: Boolean,
42+
onQueryChange: (String) -> Unit,
43+
onActiveChange: (Boolean) -> Unit,
44+
onOpenNavDrawer: () -> Unit
45+
) {
46+
var state by remember { mutableStateOf(0) }
47+
val titles = listOf("Tab 1", "Tab 2", "Tab 3 with lots of text")
48+
49+
Box(modifier = modifier) {
50+
Column {
51+
Row(
52+
modifier = Modifier.fillMaxWidth(),
53+
horizontalArrangement = Arrangement.Center
54+
) {
55+
HomeSearchBar(
56+
query = query,
57+
active = active,
58+
onQueryChange = onQueryChange,
59+
onActiveChange = onActiveChange,
60+
onOpenNavDrawer = onOpenNavDrawer
61+
)
62+
}
63+
64+
TabRow(selectedTabIndex = state) {
65+
titles.forEachIndexed { index, title ->
66+
Tab(
67+
selected = state == index,
68+
onClick = { state = index },
69+
text = {
70+
Text(
71+
text = title,
72+
maxLines = 2,
73+
overflow = TextOverflow.Ellipsis
74+
)
75+
}
76+
)
77+
}
78+
}
79+
}
80+
}
81+
}
82+
83+
@OptIn(ExperimentalMaterial3Api::class)
84+
@Composable
85+
fun HomeSearchTopBarExpanded(
86+
modifier: Modifier = Modifier,
87+
query: String,
88+
active: Boolean,
89+
onQueryChange: (String) -> Unit,
90+
onActiveChange: (Boolean) -> Unit,
91+
) {
92+
Box(
93+
modifier
94+
.semantics { isContainer = true }
95+
.zIndex(1f)
96+
.fillMaxWidth()
97+
) {
98+
Spacer(
99+
modifier = Modifier
100+
.fillMaxWidth()
101+
.height(60.dp)
102+
.background(MaterialTheme.colorScheme.surface)
103+
)
104+
Row {
105+
DockedSearchBar(
106+
modifier = Modifier.padding(vertical = 3.dp),
107+
query = query,
108+
onQueryChange = { onQueryChange(it) },
109+
onSearch = { onActiveChange(false) },
110+
active = active,
111+
onActiveChange = { onActiveChange(it) },
112+
placeholder = { Text("Hinted search text") },
113+
leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
114+
) {
115+
116+
}
117+
val titles = listOf("Tab 1", "Tab 2", "Tab 3 with lots of text")
118+
var state by remember { mutableStateOf(0) }
119+
TabRow(
120+
selectedTabIndex = state
121+
) {
122+
titles.forEachIndexed { index, title ->
123+
Tab(
124+
selected = state == index,
125+
onClick = { state = index },
126+
text = {
127+
Text(
128+
text = title,
129+
maxLines = 2,
130+
overflow = TextOverflow.Ellipsis
131+
)
132+
}
133+
)
134+
}
135+
}
136+
}
137+
}
138+
}
139+
140+
@OptIn(ExperimentalMaterial3Api::class)
141+
@Composable
142+
private fun HomeSearchBar(
143+
modifier: Modifier = Modifier,
144+
query: String,
145+
active: Boolean,
146+
onQueryChange: (String) -> Unit,
147+
onActiveChange: (Boolean) -> Unit,
148+
onOpenNavDrawer: () -> Unit
149+
) {
150+
SearchBar(
151+
modifier = modifier,
152+
query = query,
153+
onQueryChange = onQueryChange,
154+
onSearch = { onActiveChange(false) },
155+
active = active,
156+
onActiveChange = onActiveChange,
157+
leadingIcon = {
158+
if (!active) {
159+
IconButton(onClick = onOpenNavDrawer) {
160+
Icon(imageVector = Icons.Default.Menu, contentDescription = null)
161+
}
162+
} else {
163+
Icon(imageVector = Icons.Default.Search, contentDescription = null)
164+
}
165+
},
166+
trailingIcon = {
167+
if (!active) {
168+
Icon(imageVector = Icons.Default.Star, contentDescription = null)
169+
}
170+
},
171+
) { }
172+
}

0 commit comments

Comments
 (0)