Skip to content

Commit 9a1a198

Browse files
YuKongAYuKongA
committed
library: PullToRefresh: Add contentPadding param
* This allows the content under the PullToRefresh wrapper to scroll correctly to the top bar position for blur processing
1 parent ad9f0dd commit 9a1a198

File tree

4 files changed

+48
-41
lines changed

4 files changed

+48
-41
lines changed

‎docs/components/pulltorefresh.md

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ val pullToRefreshState = rememberPullToRefreshState()
1818
var items by remember { mutableStateOf(1) }
1919
val scope = rememberCoroutineScope()
2020

21-
Surface{
21+
Surface {
2222
PullToRefresh(
2323
pullToRefreshState = pullToRefreshState,
2424
onRefresh = {
@@ -79,6 +79,7 @@ if (pullToRefreshState.isRefreshing) {
7979
| pullToRefreshState | PullToRefreshState | Refresh state controller | - | Yes |
8080
| onRefresh | () -> Unit | Refresh callback function | {} | Yes |
8181
| modifier | Modifier | Container modifier | Modifier | No |
82+
| contentPadding | PaddingValues | Content padding | PaddingValues(0.dp) | No |
8283
| color | Color | Indicator color | PullToRefreshDefaults.color | No |
8384
| circleSize | Dp | Indicator circle size | PullToRefreshDefaults.circleSize | No |
8485
| refreshTexts | List\<String> | Text list for different states | PullToRefreshDefaults.refreshTexts | No |
@@ -91,29 +92,29 @@ PullToRefreshState controls the refresh state and can be created using `remember
9192

9293
#### Properties
9394

94-
| Property Name | Type | Description | Default Value | Required |
95-
| --------------------------- | ------------ | ---------------------- | ------------- | -------- |
96-
| refreshState | RefreshState | Current refresh state | - | Yes |
97-
| isRefreshing | Boolean | Is refreshing | - | Yes |
98-
| pullProgress | Float | Pull progress (0-1) | - | Yes |
99-
| refreshCompleteAnimProgress | Float | Complete anim progress | - | Yes |
95+
| Property Name | Type | Description | Required |
96+
| --------------------------- | ------------ | ---------------------- | -------- |
97+
| refreshState | RefreshState | Current refresh state | Yes |
98+
| isRefreshing | Boolean | Is refreshing | Yes |
99+
| pullProgress | Float | Pull progress (0-1) | Yes |
100+
| refreshCompleteAnimProgress | Float | Complete anim progress | Yes |
100101

101102
#### Methods
102103

103-
| Method Name | Parameters | Type | Description | Default Value | Required |
104-
| ------------------ | -------------------- | ---- | ------------------------------ | ------------- | -------- |
105-
| completeRefreshing | (suspend () -> Unit) | - | Complete refresh with callback | - | Yes |
104+
| Method Name | Parameters | Description | Required |
105+
| ------------------ | -------------------- | ------------------------------ | -------- |
106+
| completeRefreshing | (suspend () -> Unit) | Complete refresh with callback | Yes |
106107

107108
### PullToRefreshDefaults Object
108109

109110
PullToRefreshDefaults provides default values for the component.
110111

111-
| Property Name | Type | Description | Default Value |
112-
| ---------------- | ------------- | ----------------------- | --------------------------------------------------- |
113-
| color | Color | Default indicator color | Color.Gray |
114-
| circleSize | Dp | Default indicator size | 20.dp |
115-
| refreshTexts | List\<String> | Default text list | ["Pull down to refresh", "Release to refresh", ...] |
116-
| refreshTextStyle | TextStyle | Default text style | TextStyle(fontSize = 14.sp, fontWeight = Bold, ...) |
112+
| Property Name | Type | Description | Default Value |
113+
| ---------------- | ------------- | ----------------------- | ----------------------------------------------------------------------------------------- |
114+
| color | Color | Default indicator color | Color.Gray |
115+
| circleSize | Dp | Default indicator size | 20.dp |
116+
| refreshTexts | List\<String> | Default text list | ["Pull down to refresh", "Release to refresh", "Refreshing...", "Refreshed successfully"] |
117+
| refreshTextStyle | TextStyle | Default text style | TextStyle(fontSize = 14.sp, fontWeight = Bold, color = color) |
117118

118119
## Advanced Usage
119120

‎docs/zh_CN/components/pulltorefresh.md

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ val pullToRefreshState = rememberPullToRefreshState()
1818
var items by remember { mutableStateOf(1) }
1919
val scope = rememberCoroutineScope()
2020

21-
Surface{
21+
Surface {
2222
PullToRefresh(
2323
pullToRefreshState = pullToRefreshState,
2424
onRefresh = {
@@ -79,6 +79,7 @@ if (pullToRefreshState.isRefreshing) {
7979
| pullToRefreshState | PullToRefreshState | 下拉刷新状态控制器 | - | 是 |
8080
| onRefresh | () -> Unit | 刷新触发时的回调函数 | {} | 是 |
8181
| modifier | Modifier | 应用于容器的修饰符 | Modifier | 否 |
82+
| contentPadding | PaddingValues | 内容区的内边距 | PaddingValues(0.dp) | 否 |
8283
| color | Color | 刷新指示器的颜色 | PullToRefreshDefaults.color | 否 |
8384
| circleSize | Dp | 刷新指示器圆圈的大小 | PullToRefreshDefaults.circleSize | 否 |
8485
| refreshTexts | List\<String> | 不同状态下显示的文本列表 | PullToRefreshDefaults.refreshTexts | 否 |
@@ -87,33 +88,33 @@ if (pullToRefreshState.isRefreshing) {
8788

8889
### PullToRefreshState 类
8990

90-
PullToRefreshState 是控制下拉刷新状态的类，可以通过 `rememberPullToRefreshState()` 创建。
91+
PullToRefreshState 用于控制下拉刷新状态，可通过 `rememberPullToRefreshState()` 创建。
9192

9293
#### 属性
9394

94-
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
95-
| --------------------------- | ------------ | ------------------- | ------ | -------- |
96-
| refreshState | RefreshState | 当前刷新状态 | - | 是 |
97-
| isRefreshing | Boolean | 是否正在刷新 | - | 是 |
98-
| pullProgress | Float | 下拉进度（0-1之间） | - | 是 |
99-
| refreshCompleteAnimProgress | Float | 刷新完成动画进度 | - | 是 |
95+
| 属性名 | 类型 | 说明 | 是否必须 |
96+
| --------------------------- | ------------ | ------------------- | -------- |
97+
| refreshState | RefreshState | 当前刷新状态 | 是 |
98+
| isRefreshing | Boolean | 是否正在刷新 | 是 |
99+
| pullProgress | Float | 下拉进度（0-1之间） | 是 |
100+
| refreshCompleteAnimProgress | Float | 刷新完成动画进度 | 是 |
100101

101102
#### 方法
102103

103-
| 方法名 | 参数 | 类型 | 说明 | 默认值 | 是否必须 |
104-
| ------------------ | -------------------- | ---- | ------------------------ | ------ | -------- |
105-
| completeRefreshing | (suspend () -> Unit) | - | 完成刷新并执行提供的操作 | - | 是 |
104+
| 方法名 | 参数 | 说明 | 是否必须 |
105+
| ------------------ | -------------------- | ------------------------ | -------- |
106+
| completeRefreshing | (suspend () -> Unit) | 完成刷新并执行提供的操作 | 是 |
106107

107108
### PullToRefreshDefaults 对象
108109

109-
PullToRefreshDefaults 对象提供了下拉刷新组件的默认值。
110+
PullToRefreshDefaults 提供下拉刷新组件的默认值。
110111

111-
| 属性名 | 类型 | 说明 | 默认值 |
112-
| ---------------- | ------------- | -------------------- | --------------------------------------------------- |
113-
| color | Color | 刷新指示器的默认颜色 | Color.Gray |
114-
| circleSize | Dp | 指示器圆圈的默认大小 | 20.dp |
115-
| refreshTexts | List\<String> | 默认的刷新文本列表 | ["Pull down to refresh", "Release to refresh", ...] |
116-
| refreshTextStyle | TextStyle | 默认的文本样式 | TextStyle(fontSize = 14.sp, fontWeight = Bold, ...) |
112+
| 属性名 | 类型 | 说明 | 默认值 |
113+
| ---------------- | ------------- | -------------------- | ----------------------------------------------------------------------------------------- |
114+
| color | Color | 刷新指示器的默认颜色 | Color.Gray |
115+
| circleSize | Dp | 指示器圆圈的默认大小 | 20.dp |
116+
| refreshTexts | List\<String> | 默认的刷新文本列表 | ["Pull down to refresh", "Release to refresh", "Refreshing...", "Refreshed successfully"] |
117+
| refreshTextStyle | TextStyle | 默认的文本样式 | TextStyle(fontSize = 14.sp, fontWeight = Bold, color = color) |
117118

118119
## 进阶用法
119120

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import androidx.compose.foundation.layout.PaddingValues
22
import androidx.compose.foundation.layout.Spacer
3-
import androidx.compose.foundation.layout.fillMaxSize
43
import androidx.compose.foundation.layout.height
54
import androidx.compose.foundation.layout.padding
65
import androidx.compose.foundation.lazy.LazyColumn
@@ -19,6 +18,7 @@ import top.yukonga.miuix.kmp.basic.PullToRefresh
1918
import top.yukonga.miuix.kmp.basic.ScrollBehavior
2019
import top.yukonga.miuix.kmp.basic.rememberPullToRefreshState
2120
import top.yukonga.miuix.kmp.extra.SuperDropdown
21+
import top.yukonga.miuix.kmp.utils.getWindowSize
2222
import top.yukonga.miuix.kmp.utils.overScrollVertical
2323

2424
@Composable
@@ -44,17 +44,16 @@ fun SecondPage(
4444
}
4545

4646
PullToRefresh(
47-
modifier = Modifier.padding(
48-
top = padding.calculateTopPadding()
49-
),
5047
pullToRefreshState = pullToRefreshState,
51-
onRefresh = { ii.value++ }
48+
onRefresh = { ii.value++ },
49+
contentPadding = PaddingValues(top = padding.calculateTopPadding())
5250
) {
5351
LazyColumn(
5452
modifier = Modifier
5553
.overScrollVertical()
5654
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection)
57-
.fillMaxSize(),
55+
.height(getWindowSize().height.dp),
56+
contentPadding = PaddingValues(top = padding.calculateTopPadding()),
5857
) {
5958
item {
6059
Card(

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ import androidx.compose.foundation.Canvas
1313
import androidx.compose.foundation.layout.Arrangement
1414
import androidx.compose.foundation.layout.Box
1515
import androidx.compose.foundation.layout.Column
16+
import androidx.compose.foundation.layout.PaddingValues
1617
import androidx.compose.foundation.layout.fillMaxSize
1718
import androidx.compose.foundation.layout.fillMaxWidth
1819
import androidx.compose.foundation.layout.height
20+
import androidx.compose.foundation.layout.offset
1921
import androidx.compose.foundation.layout.padding
2022
import androidx.compose.foundation.layout.size
2123
import androidx.compose.runtime.Composable
@@ -69,7 +71,9 @@ import kotlin.math.sin
6971
* modified from the example provided by @sd086.
7072
*
7173
* @param modifier The modifier to be applied to the [PullToRefresh].
72-
* @param pullToRefreshState pullToRefreshState
74+
* @param pullToRefreshState The state of the pull-to-refresh.
75+
* @param contentPadding The padding to be applied to the content.
76+
* Only [PaddingValues.calculateTopPadding] is required.
7377
* @param color The color of the refresh indicator.
7478
* @param circleSize The size of the refresh indicator circle.
7579
* @param refreshTexts The texts to show when refreshing.
@@ -81,6 +85,7 @@ import kotlin.math.sin
8185
fun PullToRefresh(
8286
modifier: Modifier = Modifier,
8387
pullToRefreshState: PullToRefreshState,
88+
contentPadding: PaddingValues = PaddingValues(0.dp),
8489
color: Color = PullToRefreshDefaults.color,
8590
circleSize: Dp = PullToRefreshDefaults.circleSize,
8691
refreshTexts: List<String> = PullToRefreshDefaults.refreshTexts,
@@ -119,6 +124,7 @@ fun PullToRefresh(
119124
) {
120125
Column {
121126
RefreshHeader(
127+
modifier = Modifier.offset(y = contentPadding.calculateTopPadding()),
122128
pullToRefreshState = pullToRefreshState,
123129
circleSize = circleSize,
124130
color = color,

0 commit comments

Comments
 (0)