Kullanıcı girişini işleme

TextField, kullanıcıların metin girmesine ve değiştirmesine olanak tanır. Bu sayfada, TextField'ü nasıl uygulayabileceğiniz, TextField girişine nasıl stil uygulayabileceğ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'ün iki düzeyde uygulanması 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 dolu
    • OutlinedTextField, anahat stili sürümüdür
  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

Kelimeyi içeren düzenlenebilir bir metin alanı 

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

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

Mor kenarlıklı ve etiketli düzenlenebilir bir metin alanı.

Stil TextField

TextField ve BasicTextField, özelleştirmek için birçok ortak parametreye sahiptir. TextField için tam listeyi TextField kaynak kodunda bulabilirsiniz. Aşağıda, yararlı parametrelerden bazılarının kapsamlı olmayan bir listesi verilmiş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

İki düzenlenebilir satır ve etiket içeren çok satırlı bir TextField

Tasarımınız TextField veya OutlinedTextField malzemesi gerektiriyorsa BasicTextField yerine TextField kullanmanızı öneririz. Ancak, malzeme 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.

Metne stil uygulamak için Brush API'yi kullanma hakkında daha fazla bilgi edinmek isterseniz Brush API ile gelişmiş stillendirmeyi etkinleştirme başlıklı makaleyi inceleyin.

TextStyle kullanarak renkli gradyanlar uygulama

Bir 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

Yalnızca bir metin parçasını özelleştirmek için linearGradient ile birlikte buildAnnotatedString ve SpanStyle'i kullanma.
Şekil 3. Yalnızca bir metin parçasını özelleştirmek için linearGradient ile birlikte buildAnnotatedString ve SpanStyle'ü kullanma.

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 sağlanan seçeneklere uygun değilse bazı seçenekler garanti edilmeyebilir. 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

Metnin maskelendiği bir şifre metin giriş alanı

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 imlecinizi kontrol etmek için TextField işlevinin TextFieldValue aşırı yüklemesini durum olarak 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, doğruluk kaynağı olarak composables veya durum tutucu sınıfı 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.