用Jetpack Compose做一个侧滑控件的功能

最新推荐文章于 2023-09-07 09:28:51 发布

掩耳偷铃铛

最新推荐文章于 2023-09-07 09:28:51 发布

阅读量260

点赞数

分类专栏： Composable学习文章标签： android kotlin

本文链接：https://blog.csdn.net/qq_42545790/article/details/131958963

版权

Composable学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该代码实现了一个名为SideslipComposeView的Composable函数，用于在Android应用中为UI控件添加侧滑功能。它接受参数如宽度、高度、间隔和内容，使用AndroidXCompose的SwipeableState进行交互，并提供了恢复初始状态的控制。

摘要由CSDN通过智能技术生成

package com.zerone.qsg.ui.view

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

/**
 * author: yetld
 * date: 2023/7/27
 */

/**
 * 给控件添加侧滑功能
 * @param blockWidth 宽
 * @param blockHeight 高
 * @param leftSpace 侧滑按钮与原控件中间的间隔
 * @param blockContent 侧滑按钮, 宽高要和blockWidth和blockHeight一致
 * @param itemContent 原控件
 * @param restTrigger 重置状态控制器   restTrigger.value = true 恢复状态
 */
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SideslipComposeView(
    itemPadding: PaddingValues = PaddingValues(0.dp),
    blockWidth: Dp = 80.dp,
    blockHeight: Dp = 64.dp,
    leftSpace: Dp = 10.dp,
    itemContent: @Composable () -> Unit,
    blockContent: @Composable () -> Unit,
    restTrigger: MutableState<Boolean> = mutableStateOf(false)
) {
    val blockSizePx = with(LocalDensity.current) { (leftSpace + blockWidth).toPx() }
    val sideslipState = rememberSwipeableState(initialValue = State.ClOSS)
    val anchors = mapOf(
        0f to State.ClOSS,
        -blockSizePx to State.OPEN
    )
    val thresholds: (State, State) -> ThresholdConfig = { from, _ ->
        if (from == State.ClOSS) {
            FractionalThreshold(0.3f)
        } else {
            FractionalThreshold(0.5f)
        }
    }
    LaunchedEffect(restTrigger.value) {
        if (restTrigger.value) {
            withContext(Dispatchers.Main) {
                sideslipState.animateTo(targetValue = State.ClOSS)
            }
            restTrigger.value = false
        }
    }
    Box(
        modifier = Modifier
            .padding(paddingValues = itemPadding)
            .height(blockHeight)
            .fillMaxWidth()
    ) {
        Box(modifier = Modifier
            .offset { IntOffset(sideslipState.offset.value.toInt(), 0) }
            .swipeable(
                state = sideslipState,
                anchors = anchors,
                thresholds = thresholds,
                orientation = Orientation.Horizontal
            )
            .fillMaxWidth()
            .height(blockHeight)
            .clip(RoundedCornerShape(12.dp))
        ) {
            itemContent()
        }

        Row(
            modifier = Modifier
                .offset {
                    IntOffset(
                        (leftSpace + blockWidth)
                            .toPx()
                            .toInt() + sideslipState.offset.value.toInt(),
                        0
                    )
                }
                .size(leftSpace + blockWidth, blockHeight)
                .align(Alignment.CenterEnd)
        ) {
            Spacer(
                modifier = Modifier
                    .width(leftSpace)
            )
            blockContent()
        }
    }
}

private enum class State {
    ClOSS, OPEN
}