How to make TextField Number only in Android Jetpack Compose |
您所在的位置：网站首页 › numberpassword › How to make TextField Number only in Android Jetpack Compose |
How to make TextField Number only in Android Jetpack Compose
|
TextField is the field where the user types in. Sometimes developers want to show a specific type of keyboard to enter data. This Jetpack Compose tutorial helps you to make the TextField number only. KeyboardOptions class helps you to choose different keyboard types for TextField. @Composable fun Example() { var value by remember { mutableStateOf("") } TextField( value = value, onValueChange = { value = it }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number), label = { Text("Enter text") }, maxLines = 2, modifier = Modifier.padding(20.dp) ) }KeyboardType.Number will show the keyboard as given in the screenshot.  If you want a keyboard type for a number password then you have to use KeyboardType.NumberPassword. @Composable fun Example() { var value by remember { mutableStateOf("") } TextField( value = value, onValueChange = { value = it }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword), label = { Text("Enter text") }, maxLines = 2, modifier = Modifier.padding(20.dp) ) }Then you will get the following keyboard without characters such as , . etc.  In many cases, you may need a phone keyboard type to enter a mobile phone number. Use KeyboardType.Phone to get the desired result. @Composable fun Example() { var value by remember { mutableStateOf("") } TextField( value = value, onValueChange = { value = it }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone), label = { Text("Enter text") }, maxLines = 2, modifier = Modifier.padding(20.dp) ) }Following is the output.  Following is the complete code for your reference. package com.codingwithrashid.myapplication import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextField import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp import com.codingwithrashid.myapplication.ui.theme.MyApplicationTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyApplicationTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { Column { TextFieldExample() } } } } } } @OptIn(ExperimentalMaterial3Api::class) @Composable fun TextFieldExample() { var textInput by remember { mutableStateOf("")} TextField(value = textInput, onValueChange = {textInput = it}, placeholder = { Text("Sample Text") }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone), modifier = Modifier.fillMaxWidth() .padding(10.dp)) }That’s how you add number keyboard type and phone keyboard type in Jetpack Compose. |
【本文地址】