Skip to content

Commit eca9410

Browse files
YuKongAYuKongA
committed
example: Refactor widescreen layout
1 parent 3e18765 commit eca9410

File tree

8 files changed

+530
-355
lines changed

8 files changed

+530
-355
lines changed

‎example/src/androidMain/kotlin/Preview.android.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ fun ThirdPagePreview() {
8080
{},
8181
true,
8282
{},
83+
false,
8384
remember { mutableIntStateOf(0) }
8485
)
8586
}

‎example/src/commonMain/kotlin/MainPage.kt‎

Lines changed: 55 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,10 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import androidx.compose.foundation.clickable
5-
import androidx.compose.foundation.layout.BoxWithConstraints
65
import androidx.compose.foundation.layout.Column
76
import androidx.compose.foundation.layout.PaddingValues
8-
import androidx.compose.foundation.layout.Row
9-
import androidx.compose.foundation.layout.Spacer
10-
import androidx.compose.foundation.layout.WindowInsets
11-
import androidx.compose.foundation.layout.WindowInsetsSides
12-
import androidx.compose.foundation.layout.displayCutout
13-
import androidx.compose.foundation.layout.fillMaxSize
14-
import androidx.compose.foundation.layout.fillMaxWidth
157
import androidx.compose.foundation.layout.height
16-
import androidx.compose.foundation.layout.navigationBars
17-
import androidx.compose.foundation.layout.only
188
import androidx.compose.foundation.layout.padding
19-
import androidx.compose.foundation.layout.windowInsetsPadding
209
import androidx.compose.foundation.lazy.LazyColumn
2110
import androidx.compose.runtime.Composable
2211
import androidx.compose.runtime.derivedStateOf
@@ -190,158 +179,70 @@ fun MainPage(
190179
}
191180

192181
val windowSize by rememberUpdatedState(getWindowSize())
182+
val focusManager = LocalFocusManager.current
193183

194-
BoxWithConstraints(
195-
modifier = Modifier.fillMaxSize()
184+
LazyColumn(
185+
modifier = Modifier
186+
.then(
187+
if (scrollEndHaptic) Modifier.scrollEndHaptic() else Modifier
188+
)
189+
.overScrollVertical()
190+
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection)
191+
.height(windowSize.height.dp),
192+
contentPadding = PaddingValues(top = padding.calculateTopPadding()),
193+
overscrollEffect = null,
196194
) {
197-
val focusManager = LocalFocusManager.current
198-
if (maxWidth < 840.dp) {
199-
LazyColumn(
200-
modifier = Modifier
201-
.then(
202-
if (scrollEndHaptic) Modifier.scrollEndHaptic() else Modifier
195+
item(key = "searchbar") {
196+
SmallTitle(text = "SearchBar")
197+
SearchBar(
198+
inputField = {
199+
InputField(
200+
query = searchValue,
201+
onQueryChange = { searchValue = it },
202+
onSearch = { expanded = false },
203+
expanded = expanded,
204+
onExpandedChange = { expanded = it },
205+
label = "Search"
203206
)
204-
.overScrollVertical()
205-
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection)
206-
.height(windowSize.height.dp),
207-
contentPadding = PaddingValues(top = padding.calculateTopPadding()),
208-
overscrollEffect = null,
207+
},
208+
outsideRightAction = {
209+
Text(
210+
modifier = Modifier
211+
.padding(end = 12.dp)
212+
.clickable(
213+
interactionSource = null,
214+
indication = null
215+
) {
216+
expanded = false
217+
searchValue = ""
218+
},
219+
text = "Cancel",
220+
style = TextStyle(fontSize = 17.sp, fontWeight = FontWeight.Bold),
221+
color = MiuixTheme.colorScheme.primary
222+
)
223+
},
224+
expanded = expanded,
225+
onExpandedChange = { expanded = it }
209226
) {
210-
item(key = "searchbar") {
211-
SmallTitle(text = "SearchBar")
212-
SearchBar(
213-
inputField = {
214-
InputField(
215-
query = searchValue,
216-
onQueryChange = { searchValue = it },
217-
onSearch = { expanded = false },
218-
expanded = expanded,
219-
onExpandedChange = { expanded = it },
220-
label = "Search"
221-
)
222-
},
223-
outsideRightAction = {
224-
Text(
225-
modifier = Modifier
226-
.padding(end = 12.dp)
227-
.clickable(
228-
interactionSource = null,
229-
indication = null
230-
) {
231-
expanded = false
232-
searchValue = ""
233-
},
234-
text = "Cancel",
235-
style = TextStyle(fontSize = 17.sp, fontWeight = FontWeight.Bold),
236-
color = MiuixTheme.colorScheme.primary
237-
)
238-
},
239-
expanded = expanded,
240-
onExpandedChange = { expanded = it }
241-
) {
242-
Column {
243-
repeat(4) { idx ->
244-
val resultText = "Suggestion $idx"
245-
BasicComponent(
246-
title = resultText,
247-
onClick = {
248-
searchValue = resultText
249-
expanded = false
250-
}
251-
)
227+
Column {
228+
repeat(4) { idx ->
229+
val resultText = "Suggestion $idx"
230+
BasicComponent(
231+
title = resultText,
232+
onClick = {
233+
searchValue = resultText
234+
expanded = false
252235
}
253-
}
236+
)
254237
}
255238
}
256-
if (notExpanded) {
257-
item(key = "textComponent") {
258-
textComponent()
259-
}
260-
otherComponent(miuixIcons, focusManager, padding)
261-
}
262239
}
263-
} else {
264-
Row(
265-
modifier = Modifier
266-
.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal))
267-
.windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal))
268-
) {
269-
LazyColumn(
270-
modifier = Modifier
271-
.overScrollVertical()
272-
.scrollEndHaptic()
273-
.weight(0.5f),
274-
contentPadding = PaddingValues(top = padding.calculateTopPadding())
275-
) {
276-
item(key = "searchbar-wide") {
277-
SmallTitle(text = "SearchBar")
278-
SearchBar(
279-
inputField = {
280-
InputField(
281-
query = searchValue,
282-
onQueryChange = { searchValue = it },
283-
onSearch = { expanded = false },
284-
expanded = expanded,
285-
onExpandedChange = { expanded = it },
286-
label = "Search"
287-
)
288-
},
289-
outsideRightAction = {
290-
Text(
291-
modifier = Modifier
292-
.clickable(
293-
interactionSource = null,
294-
indication = null
295-
) {
296-
expanded = false
297-
searchValue = ""
298-
},
299-
text = "Cancel",
300-
color = MiuixTheme.colorScheme.primary
301-
)
302-
},
303-
expanded = expanded,
304-
onExpandedChange = { expanded = it }
305-
) {
306-
Column(
307-
Modifier.fillMaxSize()
308-
) {
309-
repeat(4) { idx ->
310-
val resultText = "Suggestion $idx"
311-
BasicComponent(
312-
title = resultText,
313-
modifier = Modifier
314-
.fillMaxWidth(),
315-
onClick = {
316-
searchValue = resultText
317-
expanded = false
318-
}
319-
)
320-
}
321-
}
322-
}
323-
}
324-
if (notExpanded) {
325-
otherComponent(miuixIcons, focusManager, padding)
326-
item(key = "spacer-wide") {
327-
Spacer(modifier = Modifier.height(6.dp))
328-
}
329-
}
330-
}
331-
LazyColumn(
332-
modifier = Modifier
333-
.overScrollVertical()
334-
.scrollEndHaptic()
335-
.padding(end = 12.dp, bottom = 12.dp)
336-
.weight(0.5f),
337-
contentPadding = PaddingValues(top = padding.calculateTopPadding())
338-
) {
339-
item(key = "textComponent-wide") {
340-
textComponent()
341-
Spacer(modifier = Modifier.height(padding.calculateBottomPadding()))
342-
}
343-
}
240+
}
241+
if (notExpanded) {
242+
item(key = "textComponent") {
243+
textComponent()
344244
}
245+
otherComponent(miuixIcons, focusManager, padding)
345246
}
346247
}
347248
}

‎example/src/commonMain/kotlin/ThirdPage.kt‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ fun ThirdPage(
6262
onEnablePageUserScrollChange: (Boolean) -> Unit,
6363
scrollEndHaptic: Boolean,
6464
onScrollEndHapticChange: (Boolean) -> Unit,
65-
colorMode: MutableState<Int>
65+
isWideScreen: Boolean,
66+
colorMode: MutableState<Int>,
6667
) {
6768
val showDialog = remember { mutableStateOf(false) }
6869
val floatingNavigationBarModeOptions = remember {
@@ -106,10 +107,11 @@ fun ThirdPage(
106107
SuperSwitch(
107108
title = "Show NavigationBar",
108109
checked = showNavigationBar,
110+
enabled = !isWideScreen,
109111
onCheckedChange = onShowNavigationBarChange
110112
)
111113
AnimatedVisibility(
112-
visible = showNavigationBar
114+
visible = showNavigationBar && !isWideScreen
113115
) {
114116
Column {
115117
SuperSwitch(

0 commit comments

Comments
 (0)