如何使用 Jetpack Compose 在 Android 中的 TextField 中设置最大输入长度？

在 Android 中，EditText 用于在屏幕上的 Activity 中收集基于文本的用户输入。同样，在 Jetpack Compose 中，TextField 元素用于收集活动屏幕上的输入文本。默认情况下，用户可以在 TextField 中键入的内容没有限制。

因此，在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 中的 TextField 中设置最大输入长度。 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.jctextfieldmaxlength
  
import android.os.Bundle
import android.widget.Toast
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.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.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import com.geeksforgeeks.jctextfieldmaxlength.ui.theme.JCTextFieldMaxLengthTheme
  
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 Max Length", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
        content = { MyContent() }
    )
}
  
// Creating a composable function
// to create a TextField
// Calling this function as content
// in the above function
@Composable
fun MyContent(){
  
    // creating a string variable 
    // to store TextField value
    var mText by remember { mutableStateOf(TextFieldValue("")) }
      
    // creating a variable of value 5
    val mMaxLength = 5
  
    // fetching local context
    val mContext = LocalContext.current
  
    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
            
          // Creating a text field and adding a 
          // condition to limit the input to 5 chars.
          TextField(
            singleLine = true,
            value = mText,
            onValueChange = {
                if (it.text.length <= mMaxLength) mText = it
                else Toast.makeText(mContext, "Cannot be more than 5 Characters", Toast.LENGTH_SHORT).show()
            }
        )
    }
}
  
// For displaying preview in
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

您可以看到 TextField 输入现在限制为 5 个字符。