Skip to content

Commit 23ffb1b

Browse files
YuKongAYuKongA
committed
3
1 parent bd97184 commit 23ffb1b

File tree

4 files changed

+134
-137
lines changed

4 files changed

+134
-137
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ fun ThirdPagePreview() {
6565
{},
6666
false,
6767
{},
68-
7,
68+
1,
6969
{},
70-
0,
70+
1,
7171
{},
7272
false,
7373
{},

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import androidx.compose.animation.fadeIn
55
import androidx.compose.animation.fadeOut
66
import androidx.compose.animation.shrinkHorizontally
77
import androidx.compose.animation.shrinkVertically
8-
import androidx.compose.animation.slideInVertically
9-
import androidx.compose.animation.slideOutVertically
108
import androidx.compose.foundation.layout.BoxWithConstraints
119
import androidx.compose.foundation.layout.PaddingValues
1210
import androidx.compose.foundation.layout.WindowInsets
@@ -86,10 +84,10 @@ data class UIState(
8684
val floatingBottomBarShowMode: Int = 0,
8785
val floatingBottomBarPosition: Int = 0,
8886
val showFloatingToolbar: Boolean = false,
89-
val floatingToolbarPosition: Int = 7,
87+
val floatingToolbarPosition: Int = 1,
88+
val floatingToolbarOrientation: Int = 1,
9089
val showFloatingActionButton: Boolean = true,
9190
val floatingActionButtonPosition: Int = 2,
92-
val floatingToolbarOrientation: Int = 0,
9391
val enablePageUserScroll: Boolean = false,
9492
val isTopPopupExpanded: Boolean = false
9593
)
@@ -165,7 +163,11 @@ fun UITest(
165163
enter = fadeIn() + expandVertically(),
166164
exit = fadeOut() + shrinkVertically()
167165
) {
168-
AnimatedVisibility(!uiState.useFloatingBottomBar) {
166+
AnimatedVisibility(
167+
visible = !uiState.useFloatingBottomBar,
168+
enter = fadeIn() + expandVertically(expandFrom = Alignment.Top),
169+
exit = fadeOut() + shrinkVertically(shrinkTowards = Alignment.Top)
170+
) {
169171
NavigationBar(
170172
modifier = Modifier
171173
.hazeEffect(hazeState) {
@@ -176,15 +178,17 @@ fun UITest(
176178
items = navigationItem,
177179
selected = selectedPage,
178180
onClick = { index ->
179-
if (index in 0..navigationItem.lastIndex) {
180-
coroutineScope.launch {
181-
pagerState.animateScrollToPage(index)
182-
}
181+
coroutineScope.launch {
182+
pagerState.animateScrollToPage(index)
183183
}
184184
}
185185
)
186186
}
187-
AnimatedVisibility(uiState.useFloatingBottomBar) {
187+
AnimatedVisibility(
188+
visible = uiState.useFloatingBottomBar,
189+
enter = fadeIn() + expandVertically(expandFrom = Alignment.Top),
190+
exit = fadeOut() + shrinkVertically(shrinkTowards = Alignment.Top)
191+
) {
188192
FloatingNavigationBar(
189193
modifier = Modifier
190194
.hazeEffect(hazeState) {
@@ -202,14 +206,11 @@ fun UITest(
202206
horizontalAlignment = when (uiState.floatingBottomBarPosition) {
203207
0 -> CenterHorizontally
204208
1 -> Alignment.Start
205-
2 -> Alignment.End
206-
else -> CenterHorizontally
209+
else -> Alignment.End
207210
},
208211
onClick = { index ->
209-
if (index in 0..navigationItem.lastIndex) {
210-
coroutineScope.launch {
211-
pagerState.animateScrollToPage(index)
212-
}
212+
coroutineScope.launch {
213+
pagerState.animateScrollToPage(index)
213214
}
214215
}
215216
)
@@ -240,8 +241,8 @@ fun UITest(
240241
floatingToolbar = {
241242
AnimatedVisibility(
242243
visible = uiState.showFloatingToolbar,
243-
enter = fadeIn() + slideInVertically(initialOffsetY = { it }) + expandVertically(),
244-
exit = fadeOut() + slideOutVertically(targetOffsetY = { it }) + shrinkVertically()
244+
enter = fadeIn(),
245+
exit = fadeOut(),
245246
) {
246247
FloatingToolbar(
247248
items = floatingToolbarItem,

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,18 @@ fun ThirdPagePreview() {
5454
{},
5555
false,
5656
{},
57-
7,
57+
0,
5858
{},
5959
0,
6060
{},
6161
false,
6262
{},
63+
1,
64+
{},
65+
1,
66+
{},
67+
false,
68+
{},
6369
2,
6470
{},
6571
false,

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/NavigationBar.kt‎

Lines changed: 106 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import androidx.compose.foundation.background
88
import androidx.compose.foundation.gestures.detectTapGestures
99
import androidx.compose.foundation.layout.Arrangement
1010
import androidx.compose.foundation.layout.Column
11-
import androidx.compose.foundation.layout.PaddingValues
1211
import androidx.compose.foundation.layout.Row
1312
import androidx.compose.foundation.layout.Spacer
1413
import androidx.compose.foundation.layout.WindowInsets
@@ -111,7 +110,7 @@ fun NavigationBar(
111110
val fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal
112111
Column(
113112
modifier = Modifier
114-
.height(NavigationBarHeight)
113+
.height(if (platform() != Platform.IOS) 64.dp else 48.dp)
115114
.weight(1f / items.size)
116115
.pointerInput(Unit) {
117116
detectTapGestures(
@@ -123,7 +122,7 @@ fun NavigationBar(
123122
onTap = { onClick(index) }
124123
)
125124
},
126-
horizontalAlignment = Alignment.CenterHorizontally
125+
horizontalAlignment = CenterHorizontally
127126
) {
128127
Image(
129128
modifier = Modifier.size(32.dp).padding(top = 6.dp),
@@ -157,131 +156,125 @@ fun NavigationBar(
157156
/**
158157
* A floating navigation bar that supports 2 to 5 items.
159158
*
160-
* @param items The list of items to display in the [NavigationBar].
161-
* @param selected The index of the currently selected item in the [NavigationBar].
159+
* @param items The list of items to display in the [FloatingNavigationBar].
160+
* @param selected The index of the currently selected item in the [FloatingNavigationBar].
162161
* @param onClick A callback function that is invoked when an item is clicked. It receives the selected item's index.
163-
* @param modifier A [Modifier] to be applied to the [NavigationBar] for additional customization.
164-
* @param color The background color of the [NavigationBar].
165-
* @param defaultWindowInsetsPadding Whether to apply default window insets padding (e.g., for status bars or navigation bars).
166-
* @param cornerRadius The corner radius of the [NavigationBar], used for rounded corners.
167-
* @param outSidePadding The padding applied outside the [NavigationBar].
168-
* @param horizontalAlignment The alignment of the [NavigationBar] within its parent, typically used to center it horizontally.
169-
* @param showBorder Whether to display a border around the [NavigationBar].
170-
* @param showMode The mode for displaying items in the [NavigationBar]. It can show icons, text, or both.
162+
* @param modifier A [Modifier] to be applied to the [FloatingNavigationBar] for additional customization.
163+
* @param color The background color of the [FloatingNavigationBar].
164+
* @param cornerRadius The corner radius of the [FloatingNavigationBar], used for rounded corners.
165+
* @param horizontalAlignment The alignment of the [FloatingNavigationBar] within its parent, typically used to center it horizontally.
166+
* @param showBorder Whether to display a border around the [FloatingNavigationBar].
167+
* @param defaultWindowInsetsPadding whether to apply default window insets padding to the [FloatingNavigationBar].
168+
* @param showMode The mode for displaying items in the [FloatingNavigationBar]. It can show icons, text or both.
171169
*/
172170
@Composable
173171
fun FloatingNavigationBar(
174-
cornerRadius: Dp = FloatingToolbarDefaults.CornerRadius,
172+
items: List<NavigationItem>,
173+
selected: Int,
174+
onClick: (Int) -> Unit,
175175
modifier: Modifier = Modifier,
176176
color: Color = MiuixTheme.colorScheme.surfaceContainer,
177-
outSidePadding: PaddingValues = FloatingToolbarDefaults.OutSidePadding,
177+
cornerRadius: Dp = FloatingToolbarDefaults.CornerRadius,
178178
horizontalAlignment: Alignment.Horizontal = CenterHorizontally,
179179
showBorder: Boolean = true,
180180
defaultWindowInsetsPadding: Boolean = true,
181-
items: List<NavigationItem>,
182-
selected: Int,
183-
onClick: (Int) -> Unit,
184181
showMode: FloatingNavigationBarShowMode = FloatingNavigationBarShowMode.IconOnly
185182
) {
186-
require(items.size in 2..5) { "BottomBar must have between 2 and 5 items" }
187-
Surface(
188-
color = Color.Transparent
183+
require(items.size in 2..5) { "FloatingNavigationBar must have between 2 and 5 items" }
184+
Column(
185+
modifier = Modifier.fillMaxWidth()
189186
) {
190-
Column(
191-
modifier = Modifier.fillMaxWidth()
192-
) {
193-
Row(
194-
modifier = Modifier
195-
.padding(outSidePadding)
196-
.then(
197-
if (defaultWindowInsetsPadding) {
198-
Modifier
199-
.windowInsetsPadding(WindowInsets.statusBars.only(WindowInsetsSides.Vertical))
200-
.windowInsetsPadding(WindowInsets.captionBar.only(WindowInsetsSides.Vertical))
201-
.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal))
202-
.windowInsetsPadding(WindowInsets.navigationBars)
203-
} else Modifier
204-
)
205-
.then(
206-
if (showBorder) {
207-
Modifier
208-
.background(
209-
color = MiuixTheme.colorScheme.dividerLine,
210-
shape = SmoothRoundedCornerShape(cornerRadius)
211-
)
212-
.padding(0.75.dp) // 边框内边距
213-
} else Modifier
214-
)
215-
.clip(SmoothRoundedCornerShape(cornerRadius))
216-
.background(color)
217-
.then(modifier)
218-
.padding(horizontal = 12.dp)
219-
.align(horizontalAlignment),
220-
horizontalArrangement = Arrangement.spacedBy(12.dp),
221-
verticalAlignment = Alignment.CenterVertically
222-
) {
223-
items.forEachIndexed { index, item ->
224-
val isSelected = selected == index
225-
var isPressed by remember { mutableStateOf(false) }
226-
val tint by animateColorAsState(
227-
targetValue = when {
228-
isPressed -> if (isSelected) {
229-
MiuixTheme.colorScheme.onSurfaceContainer.copy(alpha = 0.6f)
230-
} else {
231-
MiuixTheme.colorScheme.onSurfaceContainerVariant.copy(alpha = 0.6f)
232-
}
233-
234-
isSelected -> MiuixTheme.colorScheme.onSurfaceContainer
235-
else -> MiuixTheme.colorScheme.onSurfaceContainerVariant
236-
}
237-
)
238-
val fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal
239-
Column(
240-
modifier = Modifier
241-
.pointerInput(Unit) {
242-
detectTapGestures(
243-
onPress = {
244-
isPressed = true
245-
tryAwaitRelease()
246-
isPressed = false
247-
},
248-
onTap = { onClick(index) }
249-
)
250-
},
251-
horizontalAlignment = Alignment.CenterHorizontally
252-
) {
253-
if (showMode == FloatingNavigationBarShowMode.IconAndText) {
254-
Image(
255-
modifier = Modifier.size(32.dp).padding(top = 6.dp),
256-
imageVector = item.icon,
257-
contentDescription = item.label,
258-
colorFilter = ColorFilter.tint(tint)
259-
)
260-
Text(
261-
modifier = Modifier.padding(bottom = if (platform() != Platform.IOS) 12.dp else 0.dp),
262-
text = item.label,
263-
color = tint,
264-
textAlign = TextAlign.Center,
265-
fontSize = 12.sp,
266-
fontWeight = fontWeight
267-
)
268-
} else if (showMode == FloatingNavigationBarShowMode.TextOnly) {
269-
Text(
270-
modifier = Modifier.padding(vertical = 12.dp),
271-
text = item.label,
272-
color = tint,
273-
textAlign = TextAlign.Center,
274-
fontSize = 14.sp,
275-
fontWeight = fontWeight
187+
Row(
188+
modifier = Modifier
189+
.padding(bottom = if (platform() != Platform.IOS) 40.dp else 34.dp)
190+
.then(
191+
if (defaultWindowInsetsPadding) {
192+
Modifier
193+
.windowInsetsPadding(WindowInsets.statusBars.only(WindowInsetsSides.Bottom))
194+
.windowInsetsPadding(WindowInsets.captionBar.only(WindowInsetsSides.Bottom))
195+
.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal))
196+
.windowInsetsPadding(WindowInsets.navigationBars)
197+
} else Modifier
198+
)
199+
.then(
200+
if (showBorder) {
201+
Modifier
202+
.background(
203+
color = MiuixTheme.colorScheme.dividerLine,
204+
shape = SmoothRoundedCornerShape(cornerRadius)
276205
)
206+
.padding(0.75.dp)
207+
} else Modifier
208+
)
209+
.clip(SmoothRoundedCornerShape(cornerRadius))
210+
.background(color)
211+
.then(modifier)
212+
.padding(horizontal = 12.dp)
213+
.align(horizontalAlignment),
214+
horizontalArrangement = Arrangement.spacedBy(12.dp),
215+
verticalAlignment = Alignment.CenterVertically
216+
) {
217+
items.forEachIndexed { index, item ->
218+
val isSelected = selected == index
219+
var isPressed by remember { mutableStateOf(false) }
220+
val tint by animateColorAsState(
221+
targetValue = when {
222+
isPressed -> if (isSelected) {
223+
MiuixTheme.colorScheme.onSurfaceContainer.copy(alpha = 0.6f)
277224
} else {
278-
Image(
279-
modifier = Modifier.padding(vertical = 8.dp).size(32.dp),
280-
imageVector = item.icon,
281-
contentDescription = item.label,
282-
colorFilter = ColorFilter.tint(tint)
283-
)
225+
MiuixTheme.colorScheme.onSurfaceContainerVariant.copy(alpha = 0.6f)
284226
}
227+
228+
isSelected -> MiuixTheme.colorScheme.onSurfaceContainer
229+
else -> MiuixTheme.colorScheme.onSurfaceContainerVariant
230+
}
231+
)
232+
val fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal
233+
Column(
234+
modifier = Modifier
235+
.pointerInput(Unit) {
236+
detectTapGestures(
237+
onPress = {
238+
isPressed = true
239+
tryAwaitRelease()
240+
isPressed = false
241+
},
242+
onTap = { onClick(index) }
243+
)
244+
},
245+
horizontalAlignment = CenterHorizontally
246+
) {
247+
if (showMode == FloatingNavigationBarShowMode.IconAndText) {
248+
Image(
249+
modifier = Modifier.padding(top = 6.dp).size(24.dp),
250+
imageVector = item.icon,
251+
contentDescription = item.label,
252+
colorFilter = ColorFilter.tint(tint)
253+
)
254+
Text(
255+
modifier = Modifier.padding(bottom = 6.dp),
256+
text = item.label,
257+
color = tint,
258+
textAlign = TextAlign.Center,
259+
fontSize = 12.sp,
260+
fontWeight = fontWeight
261+
)
262+
} else if (showMode == FloatingNavigationBarShowMode.TextOnly) {
263+
Text(
264+
modifier = Modifier.padding(vertical = 16.dp, horizontal = 2.dp),
265+
text = item.label,
266+
color = tint,
267+
textAlign = TextAlign.Center,
268+
fontSize = 14.sp,
269+
fontWeight = fontWeight
270+
)
271+
} else {
272+
Image(
273+
modifier = Modifier.padding(vertical = 12.dp, horizontal = 12.dp).size(28.dp),
274+
imageVector = item.icon,
275+
contentDescription = item.label,
276+
colorFilter = ColorFilter.tint(tint)
277+
)
285278
}
286279
}
287280
}
@@ -305,9 +298,6 @@ enum class FloatingNavigationBarShowMode {
305298
TextOnly
306299
}
307300

308-
/** The default expanded height of a [NavigationBar]. */
309-
val NavigationBarHeight: Dp = if (platform() != Platform.IOS) 64.dp else 48.dp
310-
311301
/**
312302
* The data class for [NavigationBar].
313303
*

0 commit comments

Comments
 (0)