Kullanıcı girişini işleme

TextField, kullanıcıların metin girmesine ve değiştirmesine olanak tanır. Bu sayfada TextField uygulamasını nasıl uygulayabileceğiniz, TextField girişini nasıl biçimlendirebileceğiniz ve klavye seçenekleri ile kullanıcı girişini görsel olarak dönüştürme gibi diğer TextField seçeneklerini nasıl yapılandırabileceğiniz açıklanmaktadır.

TextField uygulamasını seçin

TextField uygulamasının iki düzeyi vardır:

1. TextField, Materyal Tasarım uygulamasıdır. Materyal Tasarım yönergelerine uygun olduğu için bu uygulamayı seçmenizi öneririz:
   • Varsayılan stil dolduruldu
   • OutlinedTextField, kullanıcıların dış çizgilerle
2. BasicTextField, kullanıcıların donanım veya yazılım klavyesi aracılığıyla metni düzenlemesine olanak tanır ancak ipucu veya yer tutucu gibi süslemeler sağlamaz.

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

Stil TextField

TextField ve BasicTextField, özelleştirmek için birçok ortak parametreye sahiptir. TextField için tam listeyi TextField kaynak kodunda bulabilirsiniz. Bu listede, işe yarayabilecek bazı parametrelere yer verilen, olası her örneğe yer verilmemiştir:

• singleLine
• maxLines
• textStyle

@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}
TextSnippets.kt

Tasarımınız için TextField veya OutlinedTextField malzemesi gerektiğinde BasicTextField yerine TextField kullanmanızı öneririz. Ancak, Material spesifikasyonundaki süslemelere ihtiyaç duymayan tasarımlar oluştururken BasicTextField kullanılmalıdır.

Brush API ile stil girişi

TextField'nizde daha gelişmiş bir stil oluşturmak için Brush API'yi kullanabilirsiniz. Aşağıdaki bölümde, TextField girişine renkli degrade eklemek için Fırça'yı nasıl kullanabileceğiniz açıklanmaktadır.

Metin biçimlendirmek için Brush API'yi kullanma hakkında daha fazla bilgi için Brush API ile gelişmiş stili etkinleştirme bölümüne bakın.

TextStyle kullanarak renkli renk geçişleri uygulayın

TextField içinde yazarken renkli degrade uygulamak için tercih ettiğiniz fırçayı TextField için TextStyle olarak ayarlayın. Bu örnekte, TextField alanına metin girilirken gökkuşağı degrade efektini görüntülemek için linearGradient içeren yerleşik bir fırça kullanıyoruz.

var text by remember { mutableStateOf("") }
val brush = remember {
    Brush.linearGradient(
        colors = rainbowColors
    )
}
TextField(
    value = text, onValueChange = { text = it }, textStyle = TextStyle(brush = brush)
)
TextSnippets.kt

Klavye seçeneklerini ayarlama

TextField, klavye düzeni gibi klavye yapılandırma seçeneklerini ayarlamanıza veya klavye tarafından destekleniyorsa otomatik düzeltmeyi etkinleştirmenize olanak tanır. Yazılım klavyesi burada belirtilen seçeneklere uymuyorsa bazı seçenekler garanti edilemeyebilir. Desteklenen klavye seçeneklerinin listesi aşağıda verilmiştir:

• capitalization
• autoCorrect
• keyboardType
• imeAction

Giriş biçimi

TextField, giriş değerinde VisualTransformation ayarlamanıza olanak tanır. Örneğin, şifrelerde karakterleri * ile değiştirme veya kredi kartı numarasında her 4 hanede bir kısa çizgi ekleme:

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}
TextSnippets.kt

Daha fazla örneği VisualTransformationSamples kaynak kodunda bulabilirsiniz.

Giriş temizliği

Metin düzenlerken sık karşılaşılan bir görev, baştaki karakterleri kaldırmak veya giriş dizesi her değiştiğinde başka bir şekilde dönüştürmektir.

Model olarak, klavyenin her onValueChange için keyfi ve büyük düzenlemeler yapabileceğini varsaymanız gerekir. Bu durum, örneğin kullanıcı otomatik düzeltmeyi kullanırsa, bir kelimeyi emojiyle değiştirirse veya diğer akıllı düzenleme özelliklerini kullanırsa ortaya çıkabilir. Bu durumu doğru şekilde ele almak için tüm dönüştürme mantığını, onValueChange parametresine iletilen mevcut metnin onValueChange parametresine iletilen önceki veya sonraki değerlerle alakasız olduğu varsayımıyla yazın.

Başında sıfır olan değerlere izin vermeyen bir metin alanı uygulamak için her değer değişikliğinde tüm baştaki sıfırları kaldırabilirsiniz.

@Composable
fun NoLeadingZeroes() {
    var input by rememberSaveable { mutableStateOf("") }
    TextField(
        value = input,
        onValueChange = { newText ->
            input = newText.trimStart { it == '0' }
        }
    )
}
TextSnippets.kt

Metni temizlerken imleç konumunu kontrol etmek için durum kapsamında TextField TextFieldValue aşırı yüklemesini kullanın.

Durumla ilgili en iyi uygulamalar

Aşağıda, uygulamanızda giriş sorunlarını önlemek için TextField durumunu tanımlama ve güncellemeyle ilgili bir dizi en iyi uygulama verilmiştir.

• TextField durumunu temsil etmek için MutableState kullanın: Bu yapılar eşzamansız gecikmeler oluşturabileceğinden, TextField durumunu temsil etmek için StateFlow gibi reaktif akışlar kullanmaktan kaçının.

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}
TextSnippets.kt

• Durumu güncellemede gecikmelerden kaçının: onValueChange çağrısını yaptığınızda TextField öğenizi senkronize olarak ve hemen güncelleyin:

// SignUpViewModel.kt

class SignUpViewModel(private val userRepository: UserRepository) : ViewModel() {

    var username by mutableStateOf("")
        private set

    fun updateUsername(input: String) {
        username = input
    }
}

// SignUpScreen.kt

@Composable
fun SignUpScreen(/*...*/) {

    OutlinedTextField(
        value = viewModel.username,
        onValueChange = { username -> viewModel.updateUsername(username) }
        /*...*/
    )
}
TextSnippets.kt

• Durumların tanımlanacağı yer: TextField durumunuz siz yazarken iş mantığı doğrulamaları gerektiriyorsa durumu ViewModel'ınıza göndermek doğrudur. Aksi takdirde, bilgi kaynağı olarak composable'ları veya eyalet sahipleri sınıfını kullanabilirsiniz. Durumunuz için hangi yöntemi kullanacağınız hakkında daha fazla bilgi edinmek için durum kaldırma dokümanlarına bakın.