Skip to content

Commit fbdc308

Browse files
YuKongAYuKongA
committed
example: refine pager padding
1 parent 68352b1 commit fbdc308

6 files changed

Lines changed: 35 additions & 24 deletions

File tree

‎example/shared/src/commonMain/kotlin/IconPage.kt‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
2222
import androidx.compose.foundation.shape.RoundedCornerShape
2323
import androidx.compose.runtime.Composable
2424
import androidx.compose.runtime.LaunchedEffect
25+
import androidx.compose.runtime.derivedStateOf
2526
import androidx.compose.runtime.getValue
2627
import androidx.compose.runtime.mutableIntStateOf
2728
import androidx.compose.runtime.mutableStateOf
@@ -66,6 +67,7 @@ import utils.SearchStatus
6667
import utils.pageContentPadding
6768
import utils.pageScrollModifiers
6869
import utils.rememberBlurBackdrop
70+
import kotlin.time.Duration.Companion.milliseconds
6971

7072
private val IconListTopShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
7173
private val IconListBottomShape = RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp)
@@ -77,6 +79,9 @@ fun IconsPage(
7779
val appState = LocalAppState.current
7880
val isWideScreen = LocalIsWideScreen.current
7981
val topAppBarScrollBehavior = MiuixScrollBehavior()
82+
val dynamicTopPadding by remember(topAppBarScrollBehavior) {
83+
derivedStateOf { 12.dp * (1f - topAppBarScrollBehavior.state.collapsedFraction) }
84+
}
8085

8186
// Search state
8287
var searchStatus by remember { mutableStateOf(SearchStatus(label = "Search icons")) }
@@ -160,7 +165,7 @@ fun IconsPage(
160165
},
161166
),
162167
) {
163-
SearchBarFake(searchStatus.label)
168+
SearchBarFake(searchStatus.label, dynamicTopPadding)
164169
}
165170
}
166171
}
@@ -196,7 +201,7 @@ fun IconsPage(
196201
current = SearchStatus.Status.COLLAPSING,
197202
)
198203
coroutineScope.launch {
199-
delay(350L)
204+
delay(350.milliseconds)
200205
// item 0 = header, icon rows start at item 1
201206
lazyListState.animateScrollToItem(index + 1)
202207
}

‎example/shared/src/commonMain/kotlin/NavigateTestPage.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,10 @@ fun NavTestPage(
108108
val contentPadding = pageContentPadding(
109109
innerPadding,
110110
padding,
111-
isWideScreen,
111+
true,
112112
extraStart = WindowInsets.displayCutout.asPaddingValues().calculateLeftPadding(LayoutDirection.Ltr),
113113
extraEnd = WindowInsets.displayCutout.asPaddingValues().calculateRightPadding(LayoutDirection.Ltr),
114+
extraBottom = 12.dp,
114115
)
115116
Box(modifier = if (backdrop != null) Modifier.layerBackdrop(backdrop) else Modifier) {
116117
LazyColumn(
@@ -137,8 +138,7 @@ fun NavTestPage(
137138
item(key = "nav_layout") {
138139
Card(
139140
modifier = Modifier
140-
.padding(horizontal = 12.dp)
141-
.padding(bottom = 12.dp),
141+
.padding(horizontal = 12.dp),
142142
) {
143143
ArrowPreference(
144144
title = "Long Long Long Long Long Title",

‎example/shared/src/commonMain/kotlin/PullToRefreshPage.kt‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import androidx.compose.foundation.layout.PaddingValues
99
import androidx.compose.foundation.layout.Spacer
1010
import androidx.compose.foundation.layout.WindowInsets
1111
import androidx.compose.foundation.layout.asPaddingValues
12+
import androidx.compose.foundation.layout.displayCutout
1213
import androidx.compose.foundation.layout.fillMaxHeight
1314
import androidx.compose.foundation.layout.fillMaxWidth
1415
import androidx.compose.foundation.layout.height
15-
import androidx.compose.foundation.layout.navigationBars
1616
import androidx.compose.foundation.layout.padding
1717
import androidx.compose.foundation.lazy.LazyColumn
1818
import androidx.compose.foundation.lazy.rememberLazyListState
@@ -30,6 +30,7 @@ import androidx.compose.ui.Modifier
3030
import androidx.compose.ui.draw.clip
3131
import androidx.compose.ui.graphics.Color
3232
import androidx.compose.ui.graphics.RectangleShape
33+
import androidx.compose.ui.unit.LayoutDirection
3334
import androidx.compose.ui.unit.dp
3435
import component.BackNavigationIcon
3536
import kotlinx.coroutines.delay
@@ -98,23 +99,24 @@ fun PullToRefreshPage(
9899
}
99100
},
100101
) { innerPadding ->
102+
val contentPadding = pageContentPadding(
103+
innerPadding,
104+
padding,
105+
true,
106+
extraTop = 12.dp,
107+
extraStart = WindowInsets.displayCutout.asPaddingValues().calculateLeftPadding(LayoutDirection.Ltr),
108+
extraEnd = WindowInsets.displayCutout.asPaddingValues().calculateRightPadding(LayoutDirection.Ltr),
109+
extraBottom = 12.dp,
110+
)
101111
Box(modifier = if (backdrop != null) Modifier.layerBackdrop(backdrop) else Modifier) {
102112
PullToRefresh(
103113
isRefreshing = isRefreshing,
104114
onRefresh = { isRefreshing = true },
105115
pullToRefreshState = pullToRefreshState,
106116
topAppBarScrollBehavior = if (appState.showTopAppBar) topAppBarScrollBehavior else null,
107-
contentPadding = PaddingValues(
108-
top = innerPadding.calculateTopPadding() + 12.dp,
109-
bottom = if (isWideScreen) {
110-
WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
111-
} else {
112-
0.dp
113-
},
114-
),
117+
contentPadding = contentPadding,
115118
) {
116119
val lazyListState = rememberLazyListState()
117-
val contentPadding = pageContentPadding(innerPadding, padding, isWideScreen, extraTop = 12.dp)
118120
Box {
119121
LazyColumn(
120122
state = lazyListState,
@@ -164,7 +166,6 @@ fun PullToRefreshPage(
164166
}
165167
}
166168
}
167-
item { Spacer(modifier = Modifier.height(12.dp)) }
168169
}
169170
VerticalScrollBar(
170171
adapter = rememberScrollBarAdapter(lazyListState),

‎example/shared/src/commonMain/kotlin/SettingsPage.kt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import top.yukonga.miuix.kmp.basic.Card
2424
import top.yukonga.miuix.kmp.basic.MiuixScrollBehavior
2525
import top.yukonga.miuix.kmp.basic.Scaffold
2626
import top.yukonga.miuix.kmp.basic.ScrollBehavior
27+
import top.yukonga.miuix.kmp.basic.SmallTitle
2728
import top.yukonga.miuix.kmp.basic.VerticalScrollBar
2829
import top.yukonga.miuix.kmp.basic.rememberScrollBarAdapter
2930
import top.yukonga.miuix.kmp.blur.LayerBackdrop
@@ -41,7 +42,6 @@ import utils.BlurredBar
4142
import utils.pageContentPadding
4243
import utils.pageScrollModifiers
4344
import utils.rememberBlurBackdrop
44-
import kotlin.random.Random
4545

4646
private val NavigationBarDisplayModeOptions = listOf("IconAndText", "IconOnly", "TextOnly", "IconWithSelectedLabel")
4747
private val NavigationRailDisplayModeOptions = listOf("IconAndText", "IconOnly", "TextOnly", "IconWithSelectedLabel")
@@ -270,6 +270,7 @@ private fun SettingsContent(
270270
}
271271
}
272272
item(key = "settingsTransition") {
273+
SmallTitle("Navigation3")
273274
Card(
274275
modifier = Modifier.padding(horizontal = 12.dp).padding(bottom = 12.dp),
275276
) {
@@ -300,6 +301,7 @@ private fun SettingsContent(
300301
}
301302
}
302303
item(key = "settingsAbout") {
304+
SmallTitle("Other")
303305
Card(
304306
modifier = Modifier.padding(horizontal = 12.dp),
305307
) {

‎example/shared/src/commonMain/kotlin/component/SuperSearchBar.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,7 @@ fun SearchBar(
284284
@Composable
285285
fun SearchBarFake(
286286
label: String,
287+
searchBarTopPadding: Dp = 12.dp,
287288
) {
288289
InputField(
289290
query = "",
@@ -302,7 +303,7 @@ fun SearchBarFake(
302303
modifier = Modifier
303304
.fillMaxWidth()
304305
.padding(horizontal = 12.dp)
305-
.padding(bottom = 6.dp),
306+
.padding(top = searchBarTopPadding, bottom = 6.dp),
306307
onSearch = { },
307308
enabled = false,
308309
expanded = false,

‎example/shared/src/commonMain/kotlin/utils/PageUtils.kt‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.PaddingValues
99
import androidx.compose.foundation.layout.RowScope
1010
import androidx.compose.foundation.layout.WindowInsets
1111
import androidx.compose.foundation.layout.asPaddingValues
12+
import androidx.compose.foundation.layout.captionBar
1213
import androidx.compose.foundation.layout.fillMaxHeight
1314
import androidx.compose.foundation.layout.navigationBars
1415
import androidx.compose.runtime.Composable
@@ -50,14 +51,15 @@ fun pageContentPadding(
5051
extraTop: Dp = 0.dp,
5152
extraStart: Dp = 0.dp,
5253
extraEnd: Dp = 0.dp,
54+
extraBottom: Dp = 0.dp,
5355
): PaddingValues {
5456
val topPadding = innerPadding.calculateTopPadding() + extraTop
55-
val bottomPadding = if (isWideScreen) {
56-
WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() + outerPadding.calculateBottomPadding()
57-
} else {
58-
outerPadding.calculateBottomPadding()
59-
}
60-
return remember(topPadding, bottomPadding, extraStart, extraEnd) {
57+
val bottomPadding = outerPadding.calculateBottomPadding() + extraBottom + if (isWideScreen) {
58+
WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()+ WindowInsets.captionBar.asPaddingValues()
59+
.calculateBottomPadding()
60+
} else 0.dp
61+
62+
return remember(topPadding, bottomPadding, extraStart, extraEnd, extraBottom) {
6163
PaddingValues(
6264
top = topPadding,
6365
start = extraStart,

0 commit comments

Comments
 (0)
⚡