Skip to content

Commit 7de20c3

Browse files
YuKongAYuKongA
committed
remake
1 parent cba8cad commit 7de20c3

File tree

6 files changed

+444
-264
lines changed

6 files changed

+444
-264
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ fun ThirdPagePreview() {
6161
{},
6262
7,
6363
{},
64+
0,
65+
{},
6466
false,
6567
{},
6668
2,

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

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import androidx.compose.animation.AnimatedVisibility
2+
import androidx.compose.foundation.layout.Column
23
import androidx.compose.foundation.layout.PaddingValues
34
import androidx.compose.foundation.layout.height
45
import androidx.compose.foundation.layout.padding
@@ -38,6 +39,8 @@ fun ThirdPage(
3839
onUseFloatingToolbarChange: (Boolean) -> Unit,
3940
floatingToolbarPosition: Int,
4041
onFloatingToolbarPositionChange: (Int) -> Unit,
42+
floatingToolbarOrientation: Int,
43+
onFloatingToolbarOrientationChange: (Int) -> Unit,
4144
showFloatingActionButton: Boolean,
4245
onShowFloatingActionButtonChange: (Boolean) -> Unit,
4346
fabPosition: Int,
@@ -71,7 +74,7 @@ fun ThirdPage(
7174
)
7275
SuperSwitch(
7376
title = "Show Bottom Bar",
74-
checked = showBottomBar,
77+
checked = if (useFloatingToolbar) false else showBottomBar,
7578
onCheckedChange = onShowBottomBarChange
7679
)
7780
SuperSwitch(
@@ -82,22 +85,29 @@ fun ThirdPage(
8285
AnimatedVisibility(
8386
visible = useFloatingToolbar
8487
) {
85-
SuperDropdown(
86-
title = "Floating Toolbar Position",
87-
items = listOf(
88-
"LeftTop",
89-
"LeftCenter",
90-
"LeftBottom",
91-
"RightTop",
92-
"RightCenter",
93-
"RightBottom",
94-
"BottomLeft",
95-
"BottomCenter",
96-
"BottomRight"
97-
),
98-
selectedIndex = floatingToolbarPosition,
99-
onSelectedIndexChange = onFloatingToolbarPositionChange
100-
)
88+
Column {
89+
SuperDropdown(
90+
title = "Floating Toolbar Position",
91+
items = listOf(
92+
"TopStart",
93+
"CenterStart",
94+
"BottomStart",
95+
"TopEnd",
96+
"CenterEnd",
97+
"BottomEnd",
98+
"TopCenter",
99+
"BottomCenter"
100+
),
101+
selectedIndex = floatingToolbarPosition,
102+
onSelectedIndexChange = onFloatingToolbarPositionChange
103+
)
104+
SuperDropdown(
105+
title = "Floating Toolbar Orientation",
106+
items = listOf("Horizontal", "Vertical"),
107+
selectedIndex = floatingToolbarOrientation,
108+
onSelectedIndexChange = onFloatingToolbarOrientationChange
109+
)
110+
}
101111
}
102112
SuperSwitch(
103113
title = "Show Floating Action Button",

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

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.imePadding
1818
import androidx.compose.foundation.layout.navigationBars
1919
import androidx.compose.foundation.layout.only
2020
import androidx.compose.foundation.layout.padding
21-
import androidx.compose.foundation.layout.size
2221
import androidx.compose.foundation.layout.statusBarsPadding
2322
import androidx.compose.foundation.layout.windowInsetsPadding
2423
import androidx.compose.foundation.pager.HorizontalPager
@@ -34,6 +33,7 @@ import androidx.compose.runtime.rememberCoroutineScope
3433
import androidx.compose.runtime.setValue
3534
import androidx.compose.ui.Modifier
3635
import androidx.compose.ui.graphics.Color
36+
import androidx.compose.ui.graphics.vector.ImageVector
3737
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
3838
import androidx.compose.ui.platform.LocalHapticFeedback
3939
import androidx.compose.ui.platform.LocalUriHandler
@@ -44,14 +44,16 @@ import dev.chrisbanes.haze.HazeTint
4444
import dev.chrisbanes.haze.hazeEffect
4545
import dev.chrisbanes.haze.hazeSource
4646
import kotlinx.coroutines.launch
47+
import top.yukonga.miuix.kmp.basic.FabPosition
4748
import top.yukonga.miuix.kmp.basic.FloatingActionButton
4849
import top.yukonga.miuix.kmp.basic.FloatingToolbar
50+
import top.yukonga.miuix.kmp.basic.FloatingToolbarItem
51+
import top.yukonga.miuix.kmp.basic.FloatingToolbarOrientation
4952
import top.yukonga.miuix.kmp.basic.Icon
5053
import top.yukonga.miuix.kmp.basic.IconButton
5154
import top.yukonga.miuix.kmp.basic.ListPopup
5255
import top.yukonga.miuix.kmp.basic.ListPopupColumn
5356
import top.yukonga.miuix.kmp.basic.ListPopupDefaults
54-
import top.yukonga.miuix.kmp.basic.FabPosition
5557
import top.yukonga.miuix.kmp.basic.MiuixScrollBehavior
5658
import top.yukonga.miuix.kmp.basic.NavigationBar
5759
import top.yukonga.miuix.kmp.basic.NavigationItem
@@ -63,7 +65,6 @@ import top.yukonga.miuix.kmp.basic.ToolbarPosition
6365
import top.yukonga.miuix.kmp.basic.TopAppBar
6466
import top.yukonga.miuix.kmp.extra.DropdownImpl
6567
import top.yukonga.miuix.kmp.icon.MiuixIcons
66-
import top.yukonga.miuix.kmp.icon.icons.basic.Check
6768
import top.yukonga.miuix.kmp.icon.icons.other.GitHub
6869
import top.yukonga.miuix.kmp.icon.icons.useful.ImmersionMore
6970
import top.yukonga.miuix.kmp.icon.icons.useful.NavigatorSwitch
@@ -81,6 +82,7 @@ data class UIState(
8182
val floatingToolbarPosition: Int = 7,
8283
val showFloatingActionButton: Boolean = true,
8384
val floatingActionButtonPosition: Int = 2,
85+
val floatingToolbarOrientation: Int = 0,
8486
val enablePageUserScroll: Boolean = false,
8587
val isTopPopupExpanded: Boolean = false
8688
)
@@ -95,12 +97,23 @@ fun UITest(
9597
val selectedPage by remember { derivedStateOf { pagerState.currentPage } }
9698
val currentScrollBehavior = topAppBarScrollBehaviorList[selectedPage]
9799

98-
val items = remember {
99-
listOf(
100-
NavigationItem("HomePage", MiuixIcons.Useful.NavigatorSwitch),
101-
NavigationItem("DropDown", MiuixIcons.Useful.Order),
102-
NavigationItem("Settings", MiuixIcons.Useful.Settings)
103-
)
100+
101+
@Composable
102+
fun rememberCommonItems(): List<Pair<String, ImageVector>> {
103+
return remember {
104+
listOf(
105+
"HomePage" to MiuixIcons.Useful.NavigatorSwitch,
106+
"DropDown" to MiuixIcons.Useful.Order,
107+
"Settings" to MiuixIcons.Useful.Settings
108+
)
109+
}
110+
}
111+
112+
val navigationItem = rememberCommonItems().map { (label, icon) ->
113+
NavigationItem(label, icon)
114+
}
115+
val floatingToolbarItem = rememberCommonItems().map { (label, icon) ->
116+
FloatingToolbarItem(label, icon)
104117
}
105118

106119
var uiState by remember { mutableStateOf(UIState()) }
@@ -127,7 +140,7 @@ fun UITest(
127140
hazeState = hazeState,
128141
hazeStyle = hazeStyle,
129142
currentScrollBehavior = currentScrollBehavior,
130-
items = items,
143+
items = navigationItem,
131144
isTopPopupExpanded = uiState.isTopPopupExpanded,
132145
showTopPopup = showTopPopup,
133146
onPopupExpandedChange = { uiState = uiState.copy(isTopPopupExpanded = it) },
@@ -152,10 +165,10 @@ fun UITest(
152165
blurRadius = 25.dp
153166
noiseFactor = 0f
154167
},
155-
items = items,
168+
items = navigationItem,
156169
selected = selectedPage,
157170
onClick = { index ->
158-
if (index in 0..items.lastIndex) {
171+
if (index in 0..navigationItem.lastIndex) {
159172
coroutineScope.launch {
160173
pagerState.animateScrollToPage(index)
161174
}
@@ -184,6 +197,44 @@ fun UITest(
184197
1 -> FabPosition.Center
185198
2 -> FabPosition.End
186199
else -> FabPosition.EndOverlay
200+
},
201+
floatingToolbar = {
202+
AnimatedVisibility(
203+
visible = uiState.useFloatingToolbar,
204+
enter = fadeIn() + slideInVertically(initialOffsetY = { it }) + expandVertically(),
205+
exit = fadeOut() + slideOutVertically(targetOffsetY = { it }) + shrinkVertically()
206+
) {
207+
FloatingToolbar(
208+
items = floatingToolbarItem,
209+
selected = selectedPage,
210+
onClick = { index ->
211+
coroutineScope.launch {
212+
pagerState.animateScrollToPage(index)
213+
}
214+
},
215+
modifier = Modifier
216+
.hazeEffect(hazeState) {
217+
style = hazeStyle
218+
blurRadius = 25.dp
219+
noiseFactor = 0f
220+
},
221+
color = Color.Transparent,
222+
targetState = when (uiState.floatingToolbarOrientation) {
223+
0 -> FloatingToolbarOrientation.Horizontal
224+
else -> FloatingToolbarOrientation.Vertical
225+
},
226+
)
227+
}
228+
},
229+
floatingToolbarPosition = when (uiState.floatingToolbarPosition) {
230+
0 -> ToolbarPosition.TopStart
231+
1 -> ToolbarPosition.CenterStart
232+
2 -> ToolbarPosition.BottomStart
233+
3 -> ToolbarPosition.TopEnd
234+
4 -> ToolbarPosition.CenterEnd
235+
5 -> ToolbarPosition.BottomEnd
236+
6 -> ToolbarPosition.TopCenter
237+
else -> ToolbarPosition.BottomCenter
187238
}
188239
) { padding ->
189240
AppHorizontalPager(
@@ -200,55 +251,6 @@ fun UITest(
200251
colorMode = colorMode,
201252
)
202253
}
203-
204-
AnimatedVisibility(
205-
visible = uiState.useFloatingToolbar,
206-
enter = fadeIn() + slideInVertically(initialOffsetY = { it }) + expandVertically(),
207-
exit = fadeOut() + slideOutVertically(targetOffsetY = { it }) + shrinkVertically()
208-
) {
209-
FloatingToolbar(
210-
position = when (uiState.floatingToolbarPosition) {
211-
0 -> ToolbarPosition.LeftTop
212-
1 -> ToolbarPosition.LeftCenter
213-
2 -> ToolbarPosition.LeftBottom
214-
3 -> ToolbarPosition.RightTop
215-
4 -> ToolbarPosition.RightCenter
216-
5 -> ToolbarPosition.RightBottom
217-
6 -> ToolbarPosition.BottomLeft
218-
7 -> ToolbarPosition.BottomCenter
219-
8 -> ToolbarPosition.BottomRight
220-
else -> ToolbarPosition.BottomCenter
221-
},
222-
modifier = Modifier.hazeEffect(hazeState) {
223-
style = hazeStyle
224-
blurRadius = 25.dp
225-
noiseFactor = 0f
226-
},
227-
color = MiuixTheme.colorScheme.background.copy(0.67f)
228-
) {
229-
listOf(
230-
MiuixIcons.Useful.NavigatorSwitch to 0,
231-
MiuixIcons.Useful.Order to 1,
232-
MiuixIcons.Useful.Settings to 2
233-
).forEach { (icon, pageIndex) ->
234-
IconButton(
235-
modifier = Modifier.size(48.dp),
236-
onClick = {
237-
coroutineScope.launch {
238-
pagerState.animateScrollToPage(pageIndex)
239-
}
240-
}
241-
) {
242-
Icon(
243-
icon,
244-
contentDescription = null,
245-
tint = if (selectedPage == pageIndex) MiuixTheme.colorScheme.onSurfaceContainer else MiuixTheme.colorScheme.onSurfaceContainerVariant
246-
)
247-
}
248-
}
249-
}
250-
}
251-
252254
AnimatedVisibility(
253255
visible = uiState.showFPSMonitor,
254256
enter = fadeIn() + expandHorizontally(),
@@ -419,6 +421,8 @@ fun AppHorizontalPager(
419421
onUseFloatingToolbarChange = { onUiStateChange(uiState.copy(useFloatingToolbar = it)) },
420422
floatingToolbarPosition = uiState.floatingToolbarPosition,
421423
onFloatingToolbarPositionChange = { onUiStateChange(uiState.copy(floatingToolbarPosition = it)) },
424+
floatingToolbarOrientation = uiState.floatingToolbarOrientation,
425+
onFloatingToolbarOrientationChange = { onUiStateChange(uiState.copy(floatingToolbarOrientation = it)) },
422426
showFloatingActionButton = uiState.showFloatingActionButton,
423427
onShowFloatingActionButtonChange = { onUiStateChange(uiState.copy(showFloatingActionButton = it)) },
424428
fabPosition = uiState.floatingActionButtonPosition,

‎example/src/desktopMain/kotlin/Preview.desktop.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ fun ThirdPagePreview() {
5656
{},
5757
7,
5858
{},
59+
0,
60+
{},
5961
false,
6062
{},
6163
2,

0 commit comments

Comments
 (0)