Kullanıcı girişini işleme

TextField, kullanıcıların metin girmesine ve değiştirmesine olanak tanır. Bu sayfada, TextField ve stil TextField girişini nasıl uygulayabileceğiniz, klavye seçenekleri ve 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. Bu uygulamayı, Materyal Tasarım yönergelerine uygun şekilde seçmenizi öneririz:
    • Varsayılan stil dolduruldu
    • OutlinedTextField, stil versiyonunun anahat 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ık ve etiketi olan düzenlenebilir bir metin alanı.

Stil TextField

TextField ve BasicTextField, bunları özelleştirmek için birçok ortak parametreyi paylaşır. TextField öğesinin tam listesini TextField kaynak kodunda bulabilirsiniz. Aşağıda, bazı yararlı parametrelerden oluşan 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

İki düzenlenebilir satır ve etiketi içeren çok satırlı bir Metin Alanı

Tasarımınızda Malzeme TextField veya OutlineTextField gerekiyorsa BasicTextField yerine TextField öneririz. Ancak Malzeme spesifikasyonundan süslemelerin gerekmediği tasarımlar oluştururken BasicTextField kullanılmalıdır.

Brush API ile stil girişi

TextField Daha gelişmiş bir stil için Brush API'yi kullanabilirsiniz. Aşağıdaki bölümde, TextField girişine renkli renk geçişi eklemek için Fırçayı nasıl kullanabileceğiniz açıklanmaktadır.

Metni biçimlendirmek için Brush API'yi kullanma hakkında daha fazla bilgi edinmek üzere 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 bir renk geçişi uygulamak için seçtiğiniz fırçayı, TextField öğeniz için TextStyle olarak ayarlayın. Bu örnekte, metin TextField içine yazılırken gökkuşağı renk geçişi efektini görüntülemek için linearGradient ile 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 buildAnnotatedString ve SpanStyle ile birlikte linearGradient'in kullanılması.
Şekil 3. Yalnızca bir metin parçasını özelleştirmek için buildAnnotatedString ve SpanStyle ile linearGradient kullanılıyor.

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 buradaki seçeneklere uygun değilse bazı seçenekler garanti edilemeyebilir. Desteklenen klavye seçeneklerinin listesini burada bulabilirsiniz:

  • capitalization
  • autoCorrect
  • keyboardType
  • imeAction

Biçim girişi

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

@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 metni giriş alanı

VisualTransformationSamples kaynak kodunda daha fazla örnek bulabilirsiniz.

Girişi temizle

Metin düzenlerken yaygın olarak gerçekleştirilen görevlerden biri, baştaki karakterleri çıkarmak veya her değiştiğinde giriş dizesini dönüştürmektir.

Model olarak, klavyenin her onValueChange için rastgele ve büyük düzenlemeler yapabileceğini varsaymalısınız. Örneğin, kullanıcı otomatik düzeltme kullanıyorsa, bir kelimeyi emoji ile değiştirirse ya da diğer akıllı düzenleme özellikleri nedeniyle bu durum yaşanabilir. Bu sorunu doğru şekilde işlemek için onValueChange öğesine iletilen geçerli metnin, onValueChange öğesine aktarılacak önceki veya sonraki değerlerle ilişkisi olmadığını varsayarak bir dönüşüm mantığı yazın.

Baştaki sıfırlara izin vermeyen bir metin alanı uygulamak için bunu her değer değişikliğinde baştaki tüm sıfırları çıkararak yapabilirsiniz.

@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 durumun bir parçası olarak TextFieldValue aşırı yüklemesi TextField kullanın.

Durumla ilgili en iyi uygulamalar

Uygulamanızda giriş sorunlarını önlemek için TextField durumunu tanımlayıp güncellemeyle ilgili en iyi uygulamaları aşağıda bulabilirsiniz.

  • TextField durumunu temsil etmek için MutableState kullanın: TextField durumunu göstermek için StateFlow gibi reaktif akışlar kullanmaktan kaçının. Bu yapılar eşzamansız gecikmelere neden olabilir.

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}
TextSnippets.kt

  • Durumun güncellenmesinde gecikmeleri önleyin: onValueChange çağırırken TextField ürününüzü eşzamanlı 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

  • Durumun nerede tanımlanacağı: TextField durumunuz, siz yazarken işletme mantığı doğrulamaları gerektiriyorsa durumu ViewModel öğenize kaldırmak doğru bir yaklaşımdır. Yoksa bilgi kaynağı olarak composable'lar veya bir eyalet sahibi sınıfı kullanabilirsiniz. Eyaletinizi nereden kaldıracağınız hakkında daha fazla bilgi edinmek için eyalet kaldırma belgelerini inceleyin.