从 Android Jetpack Compose 中的可编辑文本字段中获取文本

在 Android 中，EditText 是 TextView 的子类，TextView 是一个 UI 元素，用于从用户那里获取文本输入。 EditText 通常用于从用户那里收集信息以存储详细信息或为执行函数提供输入。但是，在 Jetpack Compose 中，我们有 TextField 来收集和显示文本数据。

在本文中，我们将向您展示如何使用 Jetpack Compose 实现可编辑的 TextField 并获取用户输入并将其显示在 Android 中的另一个 TextField 中。

分步实施

第 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.fetchedittext
  
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            
              // Displaying the created elements
            MainContent()
        }
    }
}
  
// Creating a composable 
// function to display the Top Bar
// MyContent() is set as content
@Composable
fun MainContent(){
    Scaffold(
        topBar = {TopAppBar(
            title = {Text(
                "GFG | TextField Fetch Data",
                color = Color.White)},
            backgroundColor = Color(0xff0f9d58)) },
        content = { MyContent()}
    )
}
  
// Creating a composable function MyContent() 
// to display editable TextField and a Button
@Composable
fun MyContent(){
    
    // Getting local content
    val mContent = LocalContext.current
    
    // Creating a variable to store the
    // editable TextField value
    var mText by remember { mutableStateOf("") }
  
    // Creating an editable TextField,
    // storing the value in mText
    Column(Modifier.fillMaxWidth()) {
        TextField(
            value = mText,
            onValueChange = { mText = it },
            label = { Text("Enter something...") },
            modifier = Modifier
                .fillMaxWidth()
                .absolutePadding(10.dp, 100.dp, 10.dp, 0.dp)
        )
    }
  
    // Creating a Button to display a Toast 
    // consisting mText value upon click
    Box(Modifier.fillMaxSize(), Alignment.Center){
        Button(onClick = { Toast.makeText(mContent, mText, Toast.LENGTH_LONG).show() },
            colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58))) {
            Text(text = "Click", color = Color.White)
        }
    }
}
  
// Displaying preview 
// in Android Studio IDE
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

在以下视频中，您可以看到在单击 Button 时会显示一条显示可编辑 TextField 值的 Toast 消息。