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 uygulamasının iki düzeyi vardır:

1. TextField, Materyal Tasarım uygulamasıdır. Önerilerimiz: Materyal Tasarım’a göre bu uygulama hakkında daha fazla bilgi edinin:
   • Varsayılan stil dolduruldu
   • OutlinedTextField dış çizgi stil sürümü
2. BasicTextField, kullanıcıların donanım veya yazılım yoluyla metin 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 gerekir. 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

Tasarımınızda bir değişiklik yapılması gerektiğinde BasicTextField yerine TextField önerilir. Malzeme TextField veya OutlineTextField. 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 cihazınızda daha gelişmiş stiller uygulamak için Fırça API'sini kullanabilirsiniz. İlgili içeriği oluşturmak için kullanılan aşağıdaki bölümde, renkli bir renk geçişi eklemek için Fırçayı nasıl kullanabileceğiniz açıklanmaktadır TextField girişine.

Metin biçimlendirmek için Brush API'yi kullanma hakkında daha fazla bilgi için bkz. Brush API ile gelişmiş stilleri etkinleştirin.

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, gökkuşağı gradyanı efektini aşağıdaki şekilde görüntülemek için linearGradient içeren yerleşik fırça metin TextField içine yazılır.

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

TextField

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, bir VisualTransformation ayarlamanıza olanak tanır Örneğin, şifrelerde * karakterlerini kullanma veya kredi kartı numarası için 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

VisualTransformationSamples kaynak kodunda daha fazla örnek bulabilirsiniz.

Girişi temizle

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 rastgele ve büyük hatalar yapabileceğini varsaymanız gerekir. her onValueChange düzenleme yapar. Bu, örneğin kullanıcı otomatik düzeltme, bir kelimeyi emojiyle değiştirme veya diğer akıllı düzenleme özellikleri. 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ştaki sıfırlara izin vermeyen bir metin alanı uygulamak için bunu Baştaki tüm sıfırlar çıkarılır.

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

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

• Eyalet nerede tanımlanır?: TextField eyaletiniz işletme gerektiriyorsa mantıksal doğrulamalar yaparsanız, durumu ViewModel. 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.

ziyaret edin.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Compose kullanıcı arayüzünüzü tasarlama
• State ve Jetpack Compose
• Oluşturma'da kullanıcı arayüzü durumunu kaydet

ziyaret edin.