https://juejin.cn/user/3913917127985240
开整之前先来放一下 Github 地址吧,别忘了是 main 分支哦。Github 地址:
https://github.com/zhujiang521/PlayAndroid
这是官方样例的下载地址:
https://github.com/android/compose-samples
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SwipeToRefreshLayout(
refreshingState: Boolean,
onRefresh: () -> Unit,
refreshIndicator: @Composable () -> Unit,
content: @Composable () -> Unit
) {}
refreshingState:刷新状态,为 true 时表示正在刷新,相反则不是正在刷新
onRefresh:下拉刷新时需要执行的操作
refreshIndicator:直译过来的意思是刷新指示器,但我理解的就是刷新时的控件,也就是上面转圈的 CircularProgressIndicator ,这个可以自己随便放,也可以加一些小动画等等。
content:这就是你想刷新的控件内容,没什么可解释的了。
val refreshDistance = with(LocalDensity.current) { RefreshDistance.toPx() }
val state = rememberSwipeableState(refreshingState) { newValue ->
if (newValue && !refreshingState) onRefresh()
true
}
Box(
modifier = Modifier
.nestedScroll(state.PreUpPostDownNestedScrollConnection)
.swipeable(
state = state,
anchors = mapOf(
-refreshDistance to false,
refreshDistance to true
),
thresholds = { _, _ -> FractionalThreshold(0.5f) },
orientation = Orientation.Vertical
)
) {
content()
Box(
Modifier
.align(Alignment.TopCenter)
.offset { IntOffset(0, state.offset.value.roundToInt()) }
) {
if (state.offset.value != -refreshDistance) {
refreshIndicator()
}
}
LaunchedEffect(refreshingState) { state.animateTo(refreshingState) }
}
val refreshDistance = with(LocalDensity.current) { RefreshDistance.toPx() }
val state = rememberSwipeableState(refreshingState) { newValue ->
if (newValue && !refreshingState) onRefresh()
true
}
@Composable
@ExperimentalMaterialApi
fun <T : Any> rememberSwipeableState(
initialValue: T,
animationSpec: AnimationSpec<Float> = AnimationSpec,
confirmStateChange: (newValue: T) -> Boolean = { true }
): SwipeableState<T> {
return rememberSaveable(
saver = SwipeableState.Saver(
animationSpec = animationSpec,
confirmStateChange = confirmStateChange
)
) {
SwipeableState(
initialValue = initialValue,
animationSpec = animationSpec,
confirmStateChange = confirmStateChange
)
}
}
initialValue:状态的初始值。
animationSpec:用于将动画设置为新状态的默认动画。
confirmStateChange:确认或否决状态的变更,上面 rememberSwipeableState 后面的大括号就是它,在 kotlin 中如果最后一个参数是一个函数对象的话可以不写在括号中。
Box(
modifier = Modifier
.nestedScroll(state.PreUpPostDownNestedScrollConnection)
.swipeable(
state = state,
anchors = mapOf(
-refreshDistance to false,
refreshDistance to true
),
thresholds = { _, _ -> FractionalThreshold(0.5f) },
orientation = Orientation.Vertical
)
) {
content()
Box(
Modifier
.align(Alignment.TopCenter)
.offset { IntOffset(0, state.offset.value.roundToInt()) }
) {
if (state.offset.value != -refreshDistance) {
refreshIndicator()
}
}
LaunchedEffect(refreshingState) { state.animateTo(refreshingState) }
}
state:这里将刚才的 state 传了进去,当检测到滑动时, state 的偏移将使用滑动增量来进行更新
anchors:成对的锚点和状态,用于将锚点映射到状态,反之亦然。
thresholds:指定状态之间的阈值所在的位置。阈值将用于确定滑动停止时要设置为哪个状态的动画。这表示为lambda,它接受两个状态并以 ThresholdConfig 的形式返回它们之间的阈值。这里要注意的是,状态顺序与滑动方向相对应。
orientation:可滑动的方向。
@ExperimentalMaterialApi
private val <T> SwipeableState<T>.PreUpPostDownNestedScrollConnection: NestedScrollConnection
get() = object : NestedScrollConnection {
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
val delta = available.toFloat()
return if (delta < 0 && source == NestedScrollSource.Drag) {
performDrag(delta).toOffset()
} else {
Offset.Zero
}
}
override fun onPostScroll(
consumed: Offset,
available: Offset,
source: NestedScrollSource
): Offset {
return if (source == NestedScrollSource.Drag) {
performDrag(available.toFloat()).toOffset()
} else {
Offset.Zero
}
}
override suspend fun onPreFling(available: Velocity): Velocity {
val toFling = Offset(available.x, available.y).toFloat()
return if (toFling < 0) {
performFling(velocity = toFling)
available
} else {
Velocity.Zero
}
}
override suspend fun onPostFling(
consumed: Velocity,
available: Velocity
): Velocity {
performFling(velocity = Offset(available.x, available.y).toFloat())
return Velocity.Zero
}
private fun Float.toOffset(): Offset = Offset(0f, this)
private fun Offset.toFloat(): Float = this.y
}
interface NestedScrollConnection {
fun onPreScroll(available: Offset, source: NestedScrollSource): Offset = Offset.Zero
fun onPostScroll(
consumed: Offset,
available: Offset,
source: NestedScrollSource
): Offset = Offset.Zero
suspend fun onPreFling(available: Velocity): Velocity = Velocity.Zero
suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
return Velocity.Zero
}
}
onPreScroll:预滚动事件链,由子控件来调用,以允许父母事先消耗部分拖动事件,参数最后说吧。
onPostScroll:滚动完成,当分派(滚动)后代进行消费并通知父控件可以消费的剩下的滚动事件时,就会调用此方法。
onPreFling:咱们注意到这是一个有 suspend 关键字的方法,所以只能在协程中进行调用。预发射事件链:当孩子们要发射的时候就会调用此方法,允许父控件拦截并消耗部分初始速度。
onPostFling:同样有 suspend 关键字,当完成发射的时候进行调用。
Offset:不可变的2D浮点偏移量。
NestedScrollSource:NestedScrollConnection 中滚动事件的可能来源
Velocity:以像素每秒为单位的二维速度。
Box(
Modifier
.align(Alignment.BottomCenter) // 修改成 bottom
.offset { IntOffset(0, loadRefreshState.offset.value.roundToInt()) }
) {
if (loadRefreshState.offset.value != loadDistance) {
refreshIndicator()
}
}
@ExperimentalMaterialApi
private val <T> SwipeableState<T>.LoadPreUpPostDownNestedScrollConnection: NestedScrollConnection
get() = object : NestedScrollConnection {
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
val delta = available.toFloat()
return if (delta > 0 && source == NestedScrollSource.Drag) {
performDrag(delta).toOffset()
} else {
Offset.Zero
}
}
override fun onPostScroll(
consumed: Offset,
available: Offset,
source: NestedScrollSource
): Offset {
return if (source == NestedScrollSource.Drag) {
performDrag(available.toFloat()).toOffset()
} else {
Offset.Zero
}
}
override suspend fun onPreFling(available: Velocity): Velocity {
val toFling = Offset(available.x, available.y).toFloat()
return if (toFling > 0) {
performFling(velocity = toFling)
available
} else {
Velocity.Zero
}
}
override suspend fun onPostFling(
consumed: Velocity,
available: Velocity
): Velocity {
performFling(velocity = Offset(available.x, available.y).toFloat())
return Velocity.Zero
}
}
@Composable
fun MessageList(messages: List<Message>) {
val listState = rememberLazyListState()
// Remember a CoroutineScope to be able to launch
val coroutineScope = rememberCoroutineScope()
LazyColumn(state = listState) {
// ...
}
ScrollToTopButton(
onClick = {
coroutineScope.launch {
// Animate scroll to the first item
listState.animateScrollToItem(index = 0)
}
}
)
}
Github 地址:
https://github.com/zhujiang521/PlayAndroid