Kullanıcı girişini işleme

TextField, kullanıcıların metin girmesine ve değiştirmesine olanak tanır. Bu sayfada, iletişim kurma TextField, stil TextField girişi uygulayabilir ve yapılandırabilir klavye seçenekleri ve görsel olarak dönüştürme gibi diğer TextField seçenekleri kullanıcı girişi.

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:
  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 etiketli, düzenlenebilir metin alanı.

Stil TextField

TextField ve BasicTextField, özelleştirmek için birçok ortak parametreye sahiptir. TextField için tam liste TextField kaynağında mevcuttur ekleyebilirsiniz. Bu, yararlı parametrelerden bazılarının kapsamlı olmayan bir listesidir:

  • 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 etikete sahip çok satırlı bir TextField

Tasarımınızda bir değişiklik yapılması gerektiğinde BasicTextField yerine TextField önerilir. Malzeme TextField veya OutlinedTextField. Ancak, BasicTextField kullanılmalıdır gerekse de malzeme teknik özelliklerine uygun süslemelere ihtiyaç duymayan tasarımlar inşa etmek için elzemdir.

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 renk geçişleri uygulayın

TextField içinde yazarken renkli bir gradyan uygulamak için fırçanızı ayarlayın TextField için TextStyle seçebilirsiniz. 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 buildAnnotatedString ve SpanStyle ile doğrusalGradient kullanılıyor.
Şekil 3. Yalnızca bir metin parçasını özelleştirmek için buildAnnotatedString ve SpanStyle ile linearGradient birlikte kullanılıyor.

Klavye seçeneklerini ayarlama

TextField, klavye gibi klavye yapılandırma seçeneklerini ayarlamanıza olanak tanır klavye tarafından destekleniyorsa otomatik düzeltmeyi etkinleştirin. Biraz yazılım klavyesi, seçenekleri vardır. Desteklenen klavyenin listesini burada bulabilirsiniz seçin:

  • capitalization
  • autoCorrect
  • keyboardType
  • imeAction

Biçim girişi

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 haneye 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ı

VisualTransformationSamples kaynak kodunda daha fazla örnek bulabilirsiniz.

Giriş temizliği

Metin düzenlerken sık yapılan bir işlem, baştaki karakterleri ayırmak veya her değiştiğinde giriş dizesini dönüştürmenizi sağlar.

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. Alıcı: işleme koyduktan sonra, herhangi bir dönüşüm mantığını ilk satırdaki onValueChange öğesine iletilen mevcut metin önceki veya sonrakiyle alakalı değil değerleri onValueChange içine aktarılacak.

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

Eyalet ile ilgili en iyi uygulamalar

Aşağıda, TextField öğesini tanımlamak ve güncellemek için bir dizi en iyi uygulama verilmiştir durumlardan emin olun.

  • TextField durumunu temsil etmek için MutableState kullanın: Kaçınma StateFlow gibi reaktif akışlar kullanarak Bu yapılar eşzamansız gecikmelere yol açabileceğinden TextField durumu.

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}
TextSnippets.kt

  • Durumun güncellenmesinde gecikmeleri önleyin: onValueChange numaralı telefonu aradığınızda TextField cihazınız eşzamanlı ve anında:

// 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. Uymuyorsa composable'ları veya bir eyalet sahibi sınıfını Gerçeğin kaynağı. Eyaletinizi nereye kaldıracağınızla ilgili daha fazla bilgi edinmek için eyalet artış belgelerini.

Şu anda öneri yok.

Google Hesabınızda deneyin.