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:
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ü
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") } ) }
@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
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) ) }
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) )
TextField
![Yalnızca bir metin parçasını özelleştirmek için buildAnnotatedString ve SpanStyle ile doğrusalGradient kullanılıyor.](https://developer.android.google.cn/static/develop/ui/compose/images/text-textfieldgradient.gif?authuser=9&hl=tr)
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
, 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) ) }
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' } } ) }
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çinMutableState
kullanın: KaçınmaStateFlow
gibi reaktif akışlar kullanarak Bu yapılar eşzamansız gecikmelere yol açabileceğindenTextField
durumu.
class SignUpViewModel : ViewModel() { var username by mutableStateOf("") private set /* ... */ }
- Durumun güncellenmesinde gecikmeleri önleyin:
onValueChange
numaralı telefonu aradığınızdaTextField
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) } /*...*/ ) }
- Eyalet nerede tanımlanır?:
TextField
eyaletiniz işletme gerektiriyorsa mantıksal doğrulamalar yaparsanız, durumuViewModel
. 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.
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