Skip to content

Commit 8e4ccde

Browse files
YuKongAYuKongA
committed
example: Add colors preview page
1 parent 49f5985 commit 8e4ccde

File tree

5 files changed

+430
-204
lines changed

5 files changed

+430
-204
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
package top.yukonga.miuix.uitest
55

66
import App
7+
import FourthPage
78
import MainPage
89
import SecondPage
910
import ThirdPage
@@ -51,7 +52,17 @@ fun SecondPagePreview() {
5152
fun ThirdPagePreview() {
5253
AppTheme {
5354
Scaffold {
54-
ThirdPage(
55+
ThirdPage(MiuixScrollBehavior(), PaddingValues(), true)
56+
}
57+
}
58+
}
59+
60+
@Composable
61+
@Preview(device = "spec:width=1200px,height=2670px,dpi=480")
62+
fun FourthPagePreview() {
63+
AppTheme {
64+
Scaffold {
65+
FourthPage(
5566
MiuixScrollBehavior(),
5667
PaddingValues(),
5768
false,

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

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
// Copyright 2025, miuix-kotlin-multiplatform contributors
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import androidx.compose.animation.AnimatedVisibility
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.PaddingValues
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.height
9+
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.lazy.LazyColumn
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.runtime.MutableState
13+
import androidx.compose.runtime.getValue
14+
import androidx.compose.runtime.mutableStateOf
15+
import androidx.compose.runtime.remember
16+
import androidx.compose.runtime.rememberUpdatedState
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.input.nestedscroll.nestedScroll
19+
import androidx.compose.ui.platform.LocalUriHandler
20+
import androidx.compose.ui.unit.dp
21+
import misc.VersionInfo
22+
import top.yukonga.miuix.kmp.basic.Card
23+
import top.yukonga.miuix.kmp.basic.CardDefaults
24+
import top.yukonga.miuix.kmp.basic.ScrollBehavior
25+
import top.yukonga.miuix.kmp.basic.Text
26+
import top.yukonga.miuix.kmp.extra.SuperArrow
27+
import top.yukonga.miuix.kmp.extra.SuperDialog
28+
import top.yukonga.miuix.kmp.extra.SuperDropdown
29+
import top.yukonga.miuix.kmp.extra.SuperSwitch
30+
import top.yukonga.miuix.kmp.theme.MiuixTheme
31+
import top.yukonga.miuix.kmp.utils.getWindowSize
32+
import top.yukonga.miuix.kmp.utils.overScrollVertical
33+
import top.yukonga.miuix.kmp.utils.scrollEndHaptic
34+
35+
@Composable
36+
fun FourthPage(
37+
topAppBarScrollBehavior: ScrollBehavior,
38+
padding: PaddingValues,
39+
showFPSMonitor: Boolean,
40+
onShowFPSMonitorChange: (Boolean) -> Unit,
41+
showTopAppBar: Boolean,
42+
onShowTopAppBarChange: (Boolean) -> Unit,
43+
showNavigationBar: Boolean,
44+
onShowNavigationBarChange: (Boolean) -> Unit,
45+
useFloatingNavigationBar: Boolean,
46+
onUseFloatingNavigationBarChange: (Boolean) -> Unit,
47+
floatingNavigationBarMode: Int,
48+
onFloatingNavigationBarModeChange: (Int) -> Unit,
49+
floatingNavigationBarPosition: Int,
50+
onFloatingNavigationBarPositionChange: (Int) -> Unit,
51+
showFloatingToolbar: Boolean,
52+
onShowFloatingToolbarChange: (Boolean) -> Unit,
53+
floatingToolbarPosition: Int,
54+
onFloatingToolbarPositionChange: (Int) -> Unit,
55+
floatingToolbarOrientation: Int,
56+
onFloatingToolbarOrientationChange: (Int) -> Unit,
57+
showFloatingActionButton: Boolean,
58+
onShowFloatingActionButtonChange: (Boolean) -> Unit,
59+
fabPosition: Int,
60+
onFabPositionChange: (Int) -> Unit,
61+
enablePageUserScroll: Boolean,
62+
onEnablePageUserScrollChange: (Boolean) -> Unit,
63+
scrollEndHaptic: Boolean,
64+
onScrollEndHapticChange: (Boolean) -> Unit,
65+
isWideScreen: Boolean,
66+
colorMode: MutableState<Int>,
67+
) {
68+
val showDialog = remember { mutableStateOf(false) }
69+
val floatingNavigationBarModeOptions = remember {
70+
listOf("IconOnly", "IconAndText", "TextOnly")
71+
}
72+
val floatingNavigationBarPositionOptions = remember {
73+
listOf("Center", "Start", "End")
74+
}
75+
val floatingToolbarPositionOptions = remember {
76+
listOf("TopStart", "CenterStart", "BottomStart", "TopEnd", "CenterEnd", "BottomEnd", "TopCenter", "BottomCenter")
77+
}
78+
val floatingToolbarOrientationOptions = remember { listOf("Horizontal", "Vertical") }
79+
val fabPositionOptions = remember { listOf("Start", "Center", "End", "EndOverlay") }
80+
val colorModeOptions = remember { listOf("System", "Light", "Dark") }
81+
val windowSize by rememberUpdatedState(getWindowSize())
82+
LazyColumn(
83+
modifier = Modifier
84+
.then(
85+
if (scrollEndHaptic) Modifier.scrollEndHaptic() else Modifier
86+
)
87+
.overScrollVertical()
88+
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection)
89+
.height(windowSize.height.dp),
90+
contentPadding = PaddingValues(top = padding.calculateTopPadding()),
91+
overscrollEffect = null
92+
) {
93+
item {
94+
Card(
95+
modifier = Modifier.padding(12.dp)
96+
) {
97+
SuperSwitch(
98+
title = "Show FPS Monitor",
99+
checked = showFPSMonitor,
100+
onCheckedChange = onShowFPSMonitorChange
101+
)
102+
SuperSwitch(
103+
title = "Show TopAppBar",
104+
checked = showTopAppBar,
105+
onCheckedChange = onShowTopAppBarChange
106+
)
107+
SuperSwitch(
108+
title = "Show NavigationBar",
109+
checked = showNavigationBar,
110+
enabled = !isWideScreen,
111+
onCheckedChange = onShowNavigationBarChange
112+
)
113+
AnimatedVisibility(
114+
visible = showNavigationBar && !isWideScreen
115+
) {
116+
Column {
117+
SuperSwitch(
118+
title = "Use FloatingNavigationBar",
119+
checked = useFloatingNavigationBar,
120+
onCheckedChange = onUseFloatingNavigationBarChange
121+
)
122+
AnimatedVisibility(
123+
visible = useFloatingNavigationBar
124+
) {
125+
Column {
126+
SuperDropdown(
127+
title = "FloatingNavigationBar Mode",
128+
items = floatingNavigationBarModeOptions,
129+
selectedIndex = floatingNavigationBarMode,
130+
onSelectedIndexChange = onFloatingNavigationBarModeChange
131+
)
132+
SuperDropdown(
133+
title = "FloatingNavigationBar Position",
134+
items = floatingNavigationBarPositionOptions,
135+
selectedIndex = floatingNavigationBarPosition,
136+
onSelectedIndexChange = onFloatingNavigationBarPositionChange
137+
)
138+
}
139+
}
140+
}
141+
}
142+
SuperSwitch(
143+
title = "Show FloatingToolbar",
144+
checked = showFloatingToolbar,
145+
onCheckedChange = onShowFloatingToolbarChange
146+
)
147+
AnimatedVisibility(
148+
visible = showFloatingToolbar
149+
) {
150+
Column {
151+
SuperDropdown(
152+
title = "FloatingToolbar Position",
153+
items = floatingToolbarPositionOptions,
154+
selectedIndex = floatingToolbarPosition,
155+
onSelectedIndexChange = onFloatingToolbarPositionChange
156+
)
157+
SuperDropdown(
158+
title = "FloatingToolbar Orientation",
159+
items = floatingToolbarOrientationOptions,
160+
selectedIndex = floatingToolbarOrientation,
161+
onSelectedIndexChange = onFloatingToolbarOrientationChange
162+
)
163+
}
164+
}
165+
SuperSwitch(
166+
title = "Show FloatingActionButton",
167+
checked = showFloatingActionButton,
168+
onCheckedChange = onShowFloatingActionButtonChange
169+
)
170+
AnimatedVisibility(
171+
visible = showFloatingActionButton
172+
) {
173+
SuperDropdown(
174+
title = "FloatingActionButton Position",
175+
items = fabPositionOptions,
176+
selectedIndex = fabPosition,
177+
onSelectedIndexChange = { fabPosition ->
178+
onFabPositionChange(fabPosition)
179+
}
180+
)
181+
}
182+
SuperSwitch(
183+
title = "Enable Scroll End Haptic",
184+
checked = scrollEndHaptic,
185+
onCheckedChange = onScrollEndHapticChange
186+
)
187+
SuperSwitch(
188+
title = "Enable Page User Scroll",
189+
checked = enablePageUserScroll,
190+
onCheckedChange = onEnablePageUserScrollChange
191+
)
192+
SuperDropdown(
193+
title = "Color Mode",
194+
items = colorModeOptions,
195+
selectedIndex = colorMode.value,
196+
onSelectedIndexChange = { colorMode.value = it }
197+
)
198+
}
199+
Card(
200+
modifier = Modifier
201+
.padding(horizontal = 12.dp)
202+
.padding(bottom = 12.dp)
203+
) {
204+
SuperArrow(
205+
title = "About",
206+
summary = "About this app",
207+
onClick = {
208+
showDialog.value = true
209+
}
210+
)
211+
}
212+
Spacer(modifier = Modifier.height(padding.calculateBottomPadding()))
213+
}
214+
}
215+
Dialog(showDialog)
216+
}
217+
218+
@Composable
219+
fun Dialog(showDialog: MutableState<Boolean>) {
220+
SuperDialog(
221+
title = "About",
222+
show = showDialog,
223+
onDismissRequest = {
224+
showDialog.value = false
225+
},
226+
content = {
227+
val uriHandler = LocalUriHandler.current
228+
Text(
229+
modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 12.dp),
230+
text = "APP Version: " + VersionInfo.VERSION_NAME + " (" + VersionInfo.VERSION_CODE + ")"
231+
+ "\nJDK Version: " + VersionInfo.JDK_VERSION
232+
)
233+
Card(
234+
colors = CardDefaults.defaultColors(
235+
color = MiuixTheme.colorScheme.secondaryContainer,
236+
)
237+
) {
238+
SuperArrow(
239+
title = "View Source",
240+
rightText = "GitHub",
241+
onClick = {
242+
uriHandler.openUri("https://github.com/miuix-kotlin-multiplatform/miuix")
243+
}
244+
245+
)
246+
SuperArrow(
247+
title = "Join Group",
248+
rightText = "Telegram",
249+
onClick = {
250+
uriHandler.openUri("https://t.me/YuKongA13579")
251+
}
252+
)
253+
}
254+
}
255+
)
256+
}

0 commit comments

Comments
 (0)