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:
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
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") } ) }
@Composable fun SimpleOutlinedTextFieldSample() { var text by remember { mutableStateOf("") } OutlinedTextField( value = text, onValueChange = { text = it }, label = { Text("Label") } ) }
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) ) }
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) )
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) ) }
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' } } ) }
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çinMutableState
kullanın: Bu yapılar eşzamansız gecikmeler oluşturabileceğinden,TextField
durumunu temsil etmek içinStateFlow
gibi reaktif akışlar kullanmaktan kaçının.
class SignUpViewModel : ViewModel() { var username by mutableStateOf("") private set /* ... */ }
- Durumu güncellemede gecikmelerden kaçının:
onValueChange
çağrısını yaptığınızdaTextField
öğ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) } /*...*/ ) }
- Durumların tanımlanacağı yer:
TextField
durumunuz siz yazarken iş mantığı doğrulamaları gerektiriyorsa durumuViewModel
'ı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.
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ştur'da kullanıcı arayüzü durumunu kaydetme