如何在 Android Jetpack Compose 中为 TextField 设置 InputType?
在 Android Jetpack Compose 中,TextField 用于以文本形式接收用户的输入。 TextField 在焦点上或单击时会调用一个在技术上称为键盘或软键盘的小键盘。软键盘通常由所有字符组成,包括数字、字母、特殊字符、表情符号和空格。但是,这些类型中的一种或多种可能不需要作为输入,因此可能需要更改软键盘的规格。在下图中,您会发现软键盘可以限制为多种类型的输入,例如 Password、Number、Ascii、Email、NumberPassword、Phone、Text 和 Uri。
因此,在本文中,我们将向您展示如何使用 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.jctextfieldinputtype
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.KeyboardOptions
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.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Calling the composable function
// to display element and its contents
MainContent()
}
}
}
// Creating a composable
// function to display Top Bar
@Composable
fun MainContent() {
Scaffold(
topBar = { TopAppBar(title = { Text("GFG | TextField Input Type", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
content = { MyContent() }
)
}
// Creating a composable function to
// create two Images and a spacer between them
// Calling this function as content in the above function
@Composable
fun MyContent(){
// Declaring a string variable
// to store the TextField input
var mText by remember { mutableStateOf("") }
Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
// Creating a simple TextField and declaring the
// keyboardOptions to take input only as a Number
TextField(value = mText,
onValueChange = {mText = it},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
}
}
// For displaying preview in
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MainContent()
}
输出:
在下图中,您可以看到 TextField 仅接受数字作为输入。