Compose几个简单手势

简介: Compose几个简单手势

概览


Compose提供了多个api用来实现各种手势,这些手势包括点击、按压、双击、长按、水平垂直滑动、拖动、双指平移缩放旋转、嵌套欢动效果


各种手势效果介绍


点击手势

代码

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Box(modifier = Modifier
            .size(200.dp)
            .background(Color.Green)
            .clickable {
                App.toast("被点击")
            }, contentAlignment = Alignment.Center
        ) {
            Text(text = "点击事件")
        }
    }
复制代码


效果

image.png


单点、按压、双击、长按

代码

@Composable
fun PointerView() {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Box(
            modifier = Modifier
                .size(200.dp)
                .background(Color.Green)
                .pointerInput(Unit) {
                    detectTapGestures(
                        onTap = {
                            App.toast("单点事件触发")
                        },
                        onDoubleTap = {
                            App.toast("双击事件")
                        },
                        onPress = {
//                            App.toast("按压事件")
                        },
                        onLongPress = {
                            App.toast("长按事件")
                        }
                    )
                }, contentAlignment = Alignment.Center
        ) {
            Text(text = "单点、双击、按压、长按事件")
        }
    }
}
复制代码

说明

双击、单击、长按都会触发按压的效果回调, pointerInput.detectTapGestures

效果

image.png


水平和垂直滑动

代码

val list = (0..255)
    Column(
        Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ) {
        Box(
            Modifier
                .fillMaxWidth(10f)
                .height(100.dp)
                .background(Color.Green)
                .horizontalScroll(rememberScrollState()),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "安安安安卓,欢迎关注掘金号、公众号、csdn,分享android相关知识,安安安安卓,欢迎关注掘金号、公众号、csdn,分享android相关知识,安安安安卓,欢迎关注掘金号、公众号、csdn,分享android相关知识",
                style = TextStyle(color = Color.White, fontSize = 20.sp, fontWeight = FontWeight.Bold)
                )
        }
        repeat(40) {
            Box(
                Modifier
                    .height(80.dp)
                    .fillMaxWidth()
                    .background(Color(list.random(), list.random(), list.random())),
                contentAlignment = Alignment.Center
            ) {
                Text(text = it.toString(), style = TextStyle(color = Color.White, fontSize = 20.sp))
            }
        }
    }
复制代码

说明

任何控件,只需要调用一下两个修饰符就可以实现滑动效果

.verticalScroll(rememberScrollState())

.horizontalScroll(rememberScrollState())


效果

image.png


拖动手势

代码

var offsetX by remember {
        mutableStateOf(0f)
    }
    var offsetY by remember {
        mutableStateOf(0f)
    }
    Box(Modifier.fillMaxSize()) {
        Box(
            Modifier
                .offset { IntOffset(offsetX.toInt(), offsetY.toInt()) }
                .size(200.dp)
                .background(Color.Green, shape = CircleShape)
                .pointerInput(Unit) {
                    detectDragGestures(onDrag = { pointerInputChange: PointerInputChange, offset: Offset ->
                        pointerInputChange.consumeAllChanges()//消费滑动
                        offsetX += offset.x
                        offsetY += offset.y
                    })
                },
            contentAlignment = Alignment.Center
        ) {
            Text(text = "轻按滑动圆")
        }
    }
复制代码

说明

效果

image.png


多段滑动

代码

val list = (0..255)
    val width = 300.dp
    val squareSize = 60.dp
    val swipeableState = rememberSwipeableState(0)
    val sizePx = with(LocalDensity.current) { squareSize.toPx() }
    val anchors = mapOf(
        0f to 0,
        sizePx to 1,
        sizePx * 2 to 2,
        sizePx * 3 to 3,
        sizePx * 4 to 4
    ) // Maps anchor points (in px) to states
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Row(
            Modifier
                .width(width)
                .height(squareSize)) {
            repeat(5) {
                Box(
                    Modifier
                        .width(squareSize)
                        .fillMaxHeight()
                        .background(color = Color(list.random(), list.random(), list.random()))
                )
            }
        }
        Box(
            modifier = Modifier
                .width(width)
                .swipeable(
                    state = swipeableState,
                    anchors = anchors,
                    thresholds = { _, _ -> FractionalThreshold(0.3f) },
                    orientation = Orientation.Horizontal
                )
        ) {
            Box(
                Modifier
                    .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
                    .width(squareSize)
                    .height(200.dp)
                    .background(Color.Yellow)
            ){
                Text(text = "滑动滑块")
            }
        }
    }
复制代码

说明

这是个实验性质的代码

这里的关键代码如下: 这个anchors会把父容器分为五段,当滑动结束,滑动控件会自动平移到合适的区域位置。

val anchors = mapOf(
        0f to 0,
        sizePx to 1,
        sizePx * 2 to 2,
        sizePx * 3 to 3,
        sizePx * 4 to 4
    )
复制代码

效果

image.png


双指手势(平移、缩放、旋转)

代码

var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
        scale *= zoomChange
        rotation += rotationChange
        offset += offsetChange
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Box(
            Modifier
                // apply other transformations like rotation and zoom
                // on the pizza slice emoji
                .graphicsLayer(
                    scaleX = scale,
                    scaleY = scale,
                    rotationZ = rotation,
                    translationX = offset.x,
                    translationY = offset.y
                )
                // add transformable to listen to multitouch transformation events
                // after offset
                .transformable(state = state)
                .background(Color.Green)
                .fillMaxSize(0.5f),
            contentAlignment = Alignment.Center
        ){
            Text(text = "两指操作,平移,缩放,z轴旋转,单指操作不会有效果", color = Color.White)
        }
    }
复制代码

说明

效果

image.png

嵌套滑动效果

代码

val toolbarHeight = 48.dp//Topbar的高度
    val toolbarHeightPx = with(LocalDensity.current) { toolbarHeight.roundToPx().toFloat() }//topbar高度转换为px
    val toolbarOffsetHeightPx =
        remember { mutableStateOf(0f) }//topbar的动态垂直平移距离
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                val delta = available.y
                val newOffset = toolbarOffsetHeightPx.value + delta//更新topbar的动态平移距离
                toolbarOffsetHeightPx.value = newOffset.coerceIn(-toolbarHeightPx, 0f)//保证topbar的平移距离在(-toolbarHeightPx, 0f)之间
                return Offset.Zero
            }
        }
    }
    Box(
        Modifier
            .fillMaxSize()
            .nestedScroll(nestedScrollConnection)
    ) {
        LazyColumn(contentPadding = PaddingValues(top = toolbarHeight)) {
            items(100) { index ->
                Text("I'm item $index", modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp))
            }
        }
        TopAppBar(
            modifier = Modifier
                .height(toolbarHeight)
                .offset { IntOffset(x = 0, y = toolbarOffsetHeightPx.value.roundToInt()) },
            title = { Text("toolbar offset is ${toolbarOffsetHeightPx.value}") }
        )
    }
复制代码

说明

效果

image.png

git地址:github.com/ananananzhu…



相关文章
|
4月前
|
前端开发 NoSQL 关系型数据库
如何开发CRM系统中的产品管理板块(附架构图+流程图+代码参考)
本文深入解析了CRM系统中产品管理模块的设计与实现,涵盖系统架构、业务流程、核心代码及落地建议,助力企业构建高效的产品管理体系。
|
8月前
|
人工智能 数据挖掘 Linux
DeepSeek满血版大赏:官方得了“MVP”,第三方是“躺赢狗”?
DeepSeek开源了6710亿参数的R1和2360亿参数的V3两大满血版模型,助力第三方AI平台快速提升性能。此举不仅扩大了DeepSeek的技术影响力,还通过数据飞轮效应优化模型,同时为企业级用户提供灵活变现方式。对于大众,这意味着更多选择、更低使用成本和更快技术迭代。尽管第三方平台可能“阉割”或定制功能,但它们将顶级AI带入更多场景,如比亚迪车机、腾讯元宝等,让AI更普及。官方与第三方各有所长:官方提供最强性能,第三方确保稳定体验。最终,DeepSeek与第三方共同推动AI发展,实现技术普惠。
382 2
|
10月前
|
Web App开发 Linux C#
C# 网页截图全攻略:三种技术与 Chrome 路径查找指南
本文主要介绍了在 C# 中实现网页截图的几种技术及相关要点。涵盖了 PuppeteerSharp、Selenium 和 HtmlToImage 三种方式,分别阐述了它们的安装步骤及核心代码。同时,针对在 C# 中寻找 Windows 上 chrome.exe 路径这一问题,分析了未安装 Google Chrome 和已安装两种情况下的查找原因,并给出了相关参考链接,还列举了一系列与 C# 使用 Selenium、获取 chrome.exe 路径以及在 Linux 上部署相关的参考资料。
389 11
|
10月前
|
人工智能 自然语言处理 计算机视觉
华为鸿蒙自己家的“AI”编辑器插件用起来到底怎么样?
编辑器AI插件如Codegeex、通义灵码等已问世,但通用性较强而不专精。华为推出的CodeGenie专为鸿蒙开发设计,集成在DevEco 5.0.0以上版本中,提供代码补全、生成等功能,尤其擅长处理鸿蒙相关问题,极大降低了鸿蒙开发的门槛。安装后需重启,支持自然语言生成代码,提升了开发效率。
582 13
|
10月前
|
安全 网络协议 Linux
结合 `nc` 工具利用笑脸漏洞(Smile Bug)攻击 Metasploitable2 Linux
本文介绍如何使用 `nc`(Netcat)工具结合笑脸漏洞(Smiley Bug)攻击 Metasploitable2 Linux 靶机。首先概述了 `nc` 的基本功能和高级用法,包括建立连接、监听端口、文件传输等操作。接着详细描述了笑脸漏洞的原理及其在网络攻防中的应用,展示了通过 `nc` 发送恶意输入检测漏洞的方法。最后结合 Python 脚本实现更复杂的攻击场景,并强调了合法性和环境隔离的重要性。
396 13
|
11月前
|
机器学习/深度学习 存储 人工智能
CRM系统:企业数字化转型的智能引擎
在数字化时代,CRM系统成为企业转型的关键工具,通过集中管理客户信息,提供深度数据分析,助力企业理解客户需求,预测市场趋势,制定有效策略,提升客户满意度。同时,CRM系统支持自动化营销,增强客户互动,提高忠诚度。面对数据安全和跨部门协作的挑战,CRM系统正借助AI技术,迈向智能化,为企业的数字化转型提供强大支持。
|
12月前
|
数据可视化 搜索推荐 数据挖掘
2024年中国CRM系统排名:趋势与领导者
CRM系统在现代商业中至关重要,它不仅提升了客户管理的效率和质量,还通过防止撞单、提高销售团队协作能力和降低销售成本等方式,增强企业的市场竞争力。国内CRM市场中,销售易、白码、悟空等品牌凭借各自优势,为企业提供全面的客户关系管理解决方案,助力企业在激烈的市场竞争中脱颖而出。
|
机器学习/深度学习 算法 编译器
Python程序到计算图一键转化,详解清华开源深度学习编译器MagPy
【10月更文挑战第26天】MagPy是一款由清华大学研发的开源深度学习编译器,可将Python程序一键转化为计算图,简化模型构建和优化过程。它支持多种深度学习框架,具备自动化、灵活性、优化性能好和易于扩展等特点,适用于模型构建、迁移、部署及教学研究。尽管MagPy具有诸多优势,但在算子支持、优化策略等方面仍面临挑战。
474 3
|
11月前
|
机器学习/深度学习 人工智能 前端开发
【AI系统】图算 IR
本文全面介绍了计算图的概念及其在AI框架中的应用,涵盖计算图的基本构成、与自动微分的关系、静态图与动态图的生成及特点,以及计算图对AI编译器的重要作用。文章详细解析了计算图的结构,包括张量和算子的角色,探讨了AI框架如何通过计算图实现自动微分,同时对比了静态图和动态图的优缺点,指出了计算图在优化AI编译器性能方面的关键作用。
315 0
|
前端开发 开发者 容器
2023年你应该需要知道的CSS新特性-布局篇
前一段时间State of CSS发起了2022年的调查问卷,该文件的内容主要是CSS新特性、框架、工具库的使用情况,这里我将会用几篇文章整理一下这个问卷中涉及到的新特性
1110 0