📌  相关文章
📜  Android 中使用 Jetpack Compose 的指针修饰符

📅  最后修改于: 2022-05-13 01:58:44.061000             🧑  作者: Mango

Android 中使用 Jetpack Compose 的指针修饰符

Android 中的 Draggable Modifier 是在单个方向上拖动手势的高级入口点,并以像素为单位报告拖动距离。此修饰符的局限性在于它仅限于单一方向,即在给定时间点,方向可以是垂直的或水平的。所以如果我们需要控制整个拖动手势,即多方向,就必须使用Pointer Modifier。

Android 中使用 Jetpack Compose 的指针修饰符

因此,在本文中,我们将向您展示如何使用 Jetpack Compose 在 Android 中实现指针修饰符。 IDE 准备就绪后,请按照以下步骤操作。

分步实施

第 1 步:在 Android Studio 中创建一个新项目

要在 Android Studio 中创建新项目,请参阅如何在 Android Studio 中创建/启动新项目。选择模板时,选择Empty Compose Activity 。如果您没有找到此模板,请尝试将 Android Studio 升级到最新版本。我们在Kotlin中演示了该应用程序,因此请确保在创建新项目时选择 Kotlin 作为主要语言。

第 2 步:使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

Kotlin
package com.geeksforgeeks.jcpointerinputmodifier
  
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.consumeAllChanges
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import kotlin.math.roundToInt
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
  
            // Creating a Simple Scaffold
            // Layout for the application
            Scaffold(
  
                // Creating a Top Bar
                topBar = { TopAppBar(title = { Text("GFG | Pointer Input Modifier", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
  
                // Creating Content
                content = {
  
                    // Creating a Column Layout
                    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
  
                        // Offset Values for X and Y
                        var offsetX by remember { mutableStateOf(0f) }
                        var offsetY by remember { mutableStateOf(0f) }
  
                        // Box Modifier Pointer
                        Box(
                            Modifier
                                .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                                .background(Color.Blue)
                                .size(50.dp)
                                .pointerInput(Unit) {
                                    detectDragGestures { change, dragAmount ->
                                        change.consumeAllChanges()
                                        offsetX += dragAmount.x
                                        offsetY += dragAmount.y
                                    }
                                }
                        )
  
                    }
                }
            )
        }
    }
}


输出:

您可以看到我们能够在我们的应用程序中实现指针修饰符。