Filled Auto-resize Text Field

Etiketi kutusunun içinde duran ve yazısı görünür kalmak için küçülen metin alanı: bir tutar, bir kart numarası, kısa bir not, bütünü okunan her şey, PantrixFilledTextField'ın dolgulu kutusunda.

import com.pantrixui.components.inputs.filledautoresizetextfield.PantrixFilledAutoResizeTextField

• Kutunun içindeki etiket. label dinlenirken yazının yerinde durur: yazının stili ne olursa olsun body boyutunda. Odakta ya da bir metin varken yazının üstündeki satırına çıkar.
• Değişmeyen kutu. Kutunun eni stilindeki en az genişlik ya da çağıranın verdiğidir; uzayan yazı onu genişletmez, sığacak kadar küçülür ve kısalınca yeniden büyür.
• En büyük boyut. textStyle yazının en büyük hâlinin stilidir: temanın bir yazı rolü, bir tutar için title gibi. Büyük bir stil kutuyu yalnızca etiketinin ve o stilin bir satırının sığacağı kadar uzatır.
• En küçük boyut. minFontSize yazının inebileceği en küçük boyuttur: sp olarak, ya da stilin boyutunun bir payı olan em olarak. Verilmezse temanın footnote boyutudur. O boyutta da sığmayan yazı her alandaki gibi kayar.
• Birkaç satır. Birkaç satırlı alanda kutu en az satır sayısından en çoğuna kadar yazıyla uzar; oradan sonra kutunun boyu değişmez, yazı satır aralığıyla birlikte küçülür.
• Verilen yükseklik. Alana verilen yükseklik satır sayısından önce gelir: kutu, yardım metninin bıraktığını doldurur ve yazı o yüksekliğe sığdırılır.
• Yer tutucu. placeholder etiket yerinden çıkmışken, alan boş ve odaktayken görünür. Yazının stilindedir ve uzunsa o da küçülür.
• Dolgu, çerçeve ve hata. Kutu dinlenirken dolgulu ve çerçevesizdir; odakta ve hatada çerçevelenir. error etiketin rengini değiştirmez. Devre dışı alanın dolgusu yoktur.
• Üç biçim. state alan biçimde metin durumdan okunur. value ve onValueChange alan biçim metni çağıranda tutar ve satırlarını singleLine, minLines, maxLines ile alır. field alan biçim bir formun alanına bağlanır.
• Otomasyon. tagKey ile alan FilledAutoResizeTextField_<tagKey>, temizleme düğmesi FilledAutoResizeTextFieldClear_<tagKey> adını alır. Alan odağı aldığını ve temizlendiğini bildirir, metnini asla.

Örnekler

En yalın hâli

En az yazılan: bir TextFieldState ve bir etiket. Alana genişlik verilmedi: kutu stilindeki en az genişliktedir ve yazıyla birlikte genişlemez. Hesap adı o kutuya sığmayacak kadar uzun, bu yüzden küçülmüş olarak çizilir; alanda bir metin olduğu için etiket de yazının üstündeki satırındadır.

Metni sil: yazı yeniden büyür. Alan boşalıp odaktan çıkınca etiket yazının yerine iner.

PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("Yılmaz Mimarlık ve Mühendislik Limited Şirketi"),
    label = "Hesap adı",
    tagKey = "account_name"
)

Yazı stili ve kutunun boyu

textStyle yazının en büyük hâlinin stilidir; verilmezse yazı body boyutundadır. Büyük bir stil kutuyu yalnızca etiketinin ve o stilin bir satırının sığacağı kadar uzatır: ilk iki alanı karşılaştır.

Üçüncü alan boş ve display stilinde. Etiket, yazının stili ne olursa olsun, yazının yerinde body boyutunda durur. Alana bas: etiket yukarı çıkar ve yer tutucu yazının stilinde belirir.

PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("1250"),
    modifier = Modifier.fillMaxWidth(),
    label = "Stil verilmedi",
    tagKey = "style_body"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("1250"),
    modifier = Modifier.fillMaxWidth(),
    label = "title stilinde",
    textStyle = PantrixTheme.typography.title,
    tagKey = "style_title"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "display stilinde, boş",
    placeholder = "0",
    textStyle = PantrixTheme.typography.display,
    tagKey = "style_display"
)

En küçük boyut

İki alan da title stilinde aynı adı tutar ve ad ikisinin kutusuna da sığmaz. İlkinde minFontSize verilmedi: yazı temanın footnote boyutuna kadar küçülür. İkincide 16 sp'den küçük yazılmaz. minFontSize em olarak da verilebilir: o zaman stilin kendi boyutunun bir payıdır.

En küçük boyutunda da sığmayan yazı küçülmeyi bırakır ve her alandaki gibi kayar.

val company = "Yılmaz Mimarlık, Mühendislik ve Danışmanlık Limited Şirketi"
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState(company),
    label = "Verilmedi: footnote boyutu",
    textStyle = PantrixTheme.typography.title,
    tagKey = "smallest_default"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState(company),
    label = "En küçük 16 sp",
    textStyle = PantrixTheme.typography.title,
    minFontSize = 16.sp,
    tagKey = "smallest_sp"
)

Metnini bir ViewModel'e taşıyan tutar

Bir ödeme tutarı, headline stilinde. Alan durumunu rememberTextFieldState ile, ViewModel'in o an tuttuğu değerden kurar; durumdaki metni snapshotFlow ile izler ve her değişikliği ViewModel'e bildirir. Metin alanın durumundan böyle alınır.

ViewModel'deki ilk değer bir kez okunur. Sonrası tek yönlüdür: metin alandan ViewModel'e akar. Ekran yeniden kurulduğunda ViewModel yerinde kalır ve alan onun değeriyle başlar.

Alttaki satır ViewModel'in tuttuğunu gösterir, düğme de ondan okur: bir tutar gelmeden basılamaz.

val viewModel = viewModel(key = "payment") { PaymentViewModel() }
val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val initialUiState = remember(viewModel) { viewModel.uiState.value }
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

val amount = rememberTextFieldState(initialUiState.amount)
LaunchedEffect(amount) {
    snapshotFlow { amount.text.toString() }.collectLatest { viewModel.updateAmount(it) }
}
PantrixFilledAutoResizeTextField(
    state = amount,
    modifier = Modifier.fillMaxWidth(),
    label = "Ödenecek tutar",
    placeholder = "0",
    supportingText = "Yazdıkça küçülür, sildikçe büyür",
    trailingIcon = { PantrixText(text = "TL") },
    showClearButton = true,
    textStyle = PantrixTheme.typography.headline,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    inputTransformation = DigitsOnly,
    tagKey = "payment_amount"
)

PantrixText(
    text = "ViewModel: tutar \"${uiState.amount}\", ${uiState.amount.length} hane",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary,
    tagKey = "payment_state"
)
PantrixButton(
    text = "Öde",
    onClick = {
        scope.launch { snackbars?.show(message = "${uiState.amount} TL ödendi", tagKey = "payment_made") }
    },
    enabled = uiState.isComplete,
    tagKey = "pay"
)

private class PaymentViewModel : ViewModel() {
    private val state = MutableStateFlow(PaymentUiState())
    val uiState: StateFlow<PaymentUiState> = state.asStateFlow()

    fun updateAmount(amount: String) {
        state.update { it.copy(amount = amount) }
    }
}

private data class PaymentUiState(val amount: String = "") {
    val isComplete: Boolean get() = amount.isNotEmpty() && amount.any { it != '0' }
}

private val DigitsOnly = InputTransformation {
    if (!asCharSequence().all(Char::isDigit)) revertAllChanges()
}

Metnini String olarak tutan alan

On iki rakamlı bir müşteri numarası. Çağıran numarayı bir String olarak tutar: alan onu gösterir ve her değişikliği sorar, rakam olmayan bir değişiklik alınmadığı için de gösterilmez. Yardım metni o String'ten üretilir.

Sorulan metin bir sonraki kareye kadar value olarak geri dönmelidir, yoksa alan eski metni gösterir ve imleç sıçrar: metni, geri çağrının hemen yazdığı bir durumda tut; metin bir akışta yaşıyorsa state alan biçimi seç.

var number by rememberSaveable { mutableStateOf("") }
val missing = 12 - number.length
PantrixFilledAutoResizeTextField(
    value = number,
    onValueChange = { if (it.all(Char::isDigit)) number = it },
    modifier = Modifier.fillMaxWidth(),
    label = "Müşteri numarası",
    supportingText = if (missing == 0) "Numara tamam" else "$missing rakam daha",
    maxLength = 12,
    showCharacterCount = false,
    textStyle = PantrixTheme.typography.title,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    tagKey = "customer_number"
)

Forma bağlı bir referans kodu

field alan biçim değerini, hatasını ve adını formdaki alanından alır: kod boş bırakılıp çıkılırsa kuralın mesajı yardım metninin yerine geçer. form verilen alanda klavyenin eylem tuşu formu "Referansı kaydet" düğmesi üzerinden gönderir.

Forma bağlı bir alanın metni formdaki alanın değeridir: ayrıca alınması gerekmez.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixFilledAutoResizeTextField(
    field = form.field("reference", initial = "", Rules.notBlank("Bir referans kodu yazın")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Referans kodu",
    supportingText = "Dekontun üstündeki kod",
    showClearButton = true,
    maxLength = 40,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters)
)
PantrixButton(
    text = "Referansı kaydet",
    onClick = {
        scope.launch {
            form.submit { snackbars?.show(message = "Referans kaydedildi", tagKey = "reference_saved") }
        }
    },
    form = form,
    tagKey = "save_reference"
)

Birkaç satırlık bir adres

Birkaç satırlık bir teslimat adresi. Çağıran adresi bir String olarak tutar; alan bu biçimde satırlarını singleLine, minLines ve maxLines ile alır. Kutu iki satır boyundadır ve üç satıra kadar büyür; adres üç satırı geçince kutu aynı kalır, yazı satır aralığıyla birlikte sığacak kadar küçülür.

Yardım metni çağıranın tuttuğu String'ten üretilir. Sınırı 240 karakterdir; sayacı showCharacterCount = false ile gizlenmiştir.

var address by rememberSaveable { mutableStateOf("") }
PantrixFilledAutoResizeTextField(
    value = address,
    onValueChange = { address = it },
    modifier = Modifier.fillMaxWidth(),
    label = "Teslimat adresi",
    supportingText = if (address.isBlank()) "Mahalle, sokak, kapı numarası" else "${address.length} karakter",
    showClearButton = true,
    maxLength = 240,
    showCharacterCount = false,
    singleLine = false,
    minLines = 2,
    maxLines = 3,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences),
    tagKey = "delivery_address"
)

Yardım metni ve hata

supportingText kutunun altında durur. error = true kutuyu danger rengiyle çerçeveler; yardım metni ve imleç de o renge döner ve mesaj ekran okuyucuya hata olarak bildirilir. Etiket kendi renginde kalır.

Alan hatada başlar: plakada küçük harfler var. Onları büyük harfle yeniden yaz: hata kalkar. Hatayı alan değil çağıran hesaplar; burada plate.text'i okuyarak.

val plate = rememberTextFieldState("34 abc 1903")
val lowercase = plate.text.any(Char::isLowerCase)
PantrixFilledAutoResizeTextField(
    state = plate,
    modifier = Modifier.fillMaxWidth(),
    label = "Araç plakası",
    supportingText = if (lowercase) "Plakayı büyük harfle yazın" else "Ruhsatta yazdığı gibi",
    error = lowercase,
    showClearButton = true,
    maxLength = 12,
    showCharacterCount = false,
    textStyle = PantrixTheme.typography.title,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters),
    tagKey = "plate"
)

Devre dışı ve salt okunur

enabled = false alanın dolgusunu kaldırır: alan temanın devre dışı yazı rengiyle çizilir ve odak almaz. Yazısı yine kutusuna sığdırılır: IBAN title stilindedir ve sığmadığı kutuda küçülür.

readOnly = true alanın dolgusu yerindedir: alan odaklanır, metni seçilir ve kopyalanır, yalnızca değiştirilemez.

PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("TR330006100519786457841326"),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Kayıtlı IBAN",
    supportingText = "Devre dışı: başlık stilinde, sığmak için küçüldü",
    textStyle = PantrixTheme.typography.title,
    tagKey = "saved_iban"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("PX-2026-0914-TR-000187"),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "Sözleşme numarası",
    supportingText = "Salt okunur: seçilip kopyalanabilir",
    textStyle = PantrixTheme.typography.title,
    tagKey = "contract_no"
)

Kendi renkleri ve stili

Bu alan, dolgulu metin alanının FilledTextFieldColors'ını ve FilledTextFieldStyle'ını alır: dolgulu alanlar birlikte biçimlenir.

İlk alanın dolgusu, etiketi, yazısı, çerçevesi ve imleci uygulamanın kendi morundandır; odaktaki dolgu verilmedi, temanın yüzey rengidir. İkincinin kutusu tam yuvarlaktır: FilledTextFieldStyle(shape = ShapeRole.Full). textStyle yazının, style kutunun stilidir.

val own = ownColors()
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("Yaz 2026 Koleksiyonu"),
    modifier = Modifier.fillMaxWidth(),
    label = "Liste adı",
    textStyle = PantrixTheme.typography.title,
    colors = FilledTextFieldColors(
        container = own.container,
        focusedOutline = own.color,
        text = own.onContainer,
        label = own.onContainer,
        cursor = own.color
    ),
    tagKey = "own_colors"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("KP-48213"),
    modifier = Modifier.fillMaxWidth(),
    label = "Kupon",
    textStyle = PantrixTheme.typography.title,
    style = FilledTextFieldStyle(shape = ShapeRole.Full),
    tagKey = "pill"
)

API

state

Etiketi kutusunun içinde duran ve yazısı görünür kalmak için küçülen metin alanı: bir tutar, bir kart numarası, kısa bir not, bütünü okunan her şey, PantrixFilledTextField'ın dolgulu kutusunda.

value

Yazısı sığmak için küçülen ve metnini çağıranın bir String olarak tuttuğu dolgulu metin alanı: alan value'yu gösterir ve kullanıcının her değişikliğini onValueChange'e sorar.

field

Yazısı sığmak için küçülen, bir formun alanına bağlı dolgulu metin alanı: metni, hatası ve adı field'dan gelir.

FilledTextFieldStyle

PantrixFilledTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, içindekilerin çevresindeki boşluk, ikonları ve çerçevesi.

FilledTextFieldColors

Temanın renklerini almayan bir alan için PantrixFilledTextField'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temadaki rolünde kalır. Bir ürün yalnızca değiştirdiği renkleri verir, başkasını vermez: