使用 Jetpack Compose 在 Android 中实现垂直和水平可拖动修饰符

在 Jetpack Compose 中，Draggable 修饰符是一个类似于 scrollable 的修饰符，它是在单个方向上拖动手势并以像素为单位报告拖动距离的高级入口点。可拖动修饰符可以在任何元素之上实现。用户可以保持元素状态并垂直和水平拖动它。

在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 中实现 Draggable Modifier。 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.jcdraggablemodifier
  
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
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.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
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 | Draggable Modifier", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
  
                // Creating Content
                content = {
  
                    // Creating a Column Layout
                    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
  
                        // Horizontally Draggable Modifier
                        var offsetX by remember { mutableStateOf(0f) }
                        Text(
                            modifier = Modifier
                                .offset { IntOffset(offsetX.roundToInt(), 0) }
                                .draggable(
                                    orientation = Orientation.Horizontal,
                                    state = rememberDraggableState { delta ->
                                        offsetX += delta
                                    }
                                ),
                            text = "I move Horizontally!", fontSize = 20.sp
                        )
  
                        // Adding a Space of 100dp height
                        Spacer(modifier = Modifier.height(100.dp))
  
                        // Vertically Draggable Modifier
                        var offsetY by remember { mutableStateOf(0f) }
                        Text(
                            modifier = Modifier
                                .offset { IntOffset(0, offsetY.roundToInt()) }
                                .draggable(
                                    orientation = Orientation.Vertical,
                                    state = rememberDraggableState { delta ->
                                        offsetY += delta
                                    }
                                ),
                            text = "I move Vertically!", fontSize = 20.sp
                        )
  
                    }
                }
            )
        }
    }
}

输出：

在下面录制的视频中，您可以看到我们成功地能够垂直和水平拖动元素。