Oluşturma'da kullanıcı arayüzü sabittir. Oluşturulduktan sonra kullanıcı arayüzü güncellenemez.
çizer. Kullanıcı arayüzünüzün durumunu kontrol edebilirsiniz. Bölgedeki her eyalet
Kullanıcı arayüzü değişikliklerinden sonra, Oluştur kullanıcı arayüzü ağacında,
değiştirildi. Bestelenebilirler kabul edebilir
durumu gösterir ve etkinlikleri gösterir. Örneğin, TextField
bir değeri kabul eder ve
geri çağırma işleyicininonValueChange
değer.
var name by remember { mutableStateOf("") } OutlinedTextField( value = name, onValueChange = { name = it }, label = { Text("Name") } )
composable'lar durumu kabul edip etkinlikleri gösterdiği için tek yönlü veri akışı desen, Jetpack Compose'a iyi uyuyor. Bu kılavuz, etkinlikleri nasıl uygulayacağınızı ve ve Compose'da ViewModel'lerle nasıl çalışılacağı.
Tek yönlü veri akışı
Tek yönlü veri akışı (UDF), durumun aşağı doğru akış gösterdiği bir tasarım kalıbıdır. ve etkinliklerin arttığına karar verin. Tek yönlü veri akışını izleyerek Uygulamanızın mağaza bölümündekilerle ilgili kullanıcı arayüzünde durum gösteren composable'lar ve durumu değiştir.
Tek yönlü veri akışı kullanan bir uygulamanın kullanıcı arayüzü güncelleme döngüsü şu şekilde görünür:
- Etkinlik: Kullanıcı arayüzünün bir bölümü bir etkinlik oluşturur ve bunu yukarı doğru iletir. Örneğin, İşlenecek ViewModel'e iletilen düğme tıklaması; veya uygulamanızın diğer katmanlarına da bakabilirsiniz. Örneğin, süresi doldu.
- Güncelleme durumu: Bir etkinlik işleyici durumu değiştirebilir.
- Görüntüleme durumu: Durum sahibi durumu aşağı aktarır ve kullanıcı arayüzü, somut olarak ortaya koyar.
Jetpack Compose'u kullanırken bu kalıbı takip etmek çeşitli avantajlar sağlar:
- Test edilebilirlik: Kolaylık sağlayan kullanıcı arayüzünden ayırma durumu her ikisini de ayrı ayrı test edebilirsiniz.
- Durum kapsülleme: Durum yalnızca tek bir yerde güncellenebileceği için Bir composable'ın durumu için yalnızca tek bir doğru kaynak vardır, daha az muhtemelen tutarsız durumlar nedeniyle hata alırsınız.
- Kullanıcı arayüzü tutarlılığı: Tüm durum güncellemeleri
StateFlow
veyaLiveData
gibi gözlemlenebilir durum sahiplerinin kullanımı.
Jetpack Compose'da tek yönlü veri akışı
Oluşturulabilirler duruma ve etkinliklere dayalı olarak çalışır. Örneğin, TextField
yalnızca
value
parametresi güncellendiğinde ve bir onValueChange
görüntülediğinde güncellenir
geri çağırma—değerin yeni bir değerle değiştirilmesini isteyen bir etkinlik. Oluştur
State
nesnesini bir değer sahibi olarak tanımlar ve durum değerini değiştirir
bir yeniden besteleme tetikleyebilir. Eyaleti
remember { mutableStateOf(value) }
veya a
İzlemeniz gereken süreye bağlı olarak rememberSaveable { mutableStateOf(value)
unutmayın.
TextField
composable'ın değerinin türü String
olduğu için bu değer gelebilir
herhangi bir yerden (sabit kodlu bir değerden, bir ViewModel'den veya
ana composable. Öğeyi bir State
nesnesinin içinde tutmanız gerekmez ancak
değerini güncelleyin.onValueChange
Birleştirilebilir parametreleri tanımlayın
Bir composable'ın durum parametrelerini tanımlarken aşağıdakileri korumanız gerekir: şu soruları sorabilirsiniz:
- Bir composable ne kadar yeniden kullanılabilir veya esnek?
- Durum parametreleri bu composable'ın performansını nasıl etkiler?
Ayrıştırmayı ve yeniden kullanmayı teşvik etmek için her composable en az miktarda düşünülebilir. Örneğin, yalnızca bir haber makalesinin başlığını veya görüntülenir:
@Composable fun Header(title: String, subtitle: String) { // Recomposes when title or subtitle have changed. } @Composable fun Header(news: News) { // Recomposes when a new instance of News is passed in. }
Bazen tek tek parametreler kullanmak performansı da artırır. Örneğin,
News
, title
ve subtitle
ifadelerinden
Header(news)
öğesine yeni News
örneği aktarılırsa composable
title
ve subtitle
değişmemiş olsa bile yeniden oluşturabilirsiniz.
Aktardığınız parametre sayısını dikkatlice düşünün. çok fazla parametre kullanıldığında fonksiyonun ergonomisi azalır, dolayısıyla bu durumda bunları bir sınıfta gruplandırmak tercih edilir.
Compose'daki etkinlikler
Uygulamanızda yapılan her giriş bir etkinlik olarak temsil edilmelidir: Dokunmalar, metin değişiklikleri,
ve hatta zamanlayıcılar veya diğer güncellemeler. Bu etkinlikler kullanıcı arayüzünüzün durumunu değiştirdikçe
ViewModel
, bunları işleyecek ve kullanıcı arayüzü durumunu güncelleyecek uygulama olmalıdır.
Kullanıcı arayüzü katmanı, etkinlik işleyici dışındaki durumu hiçbir zaman değiştirmemelidir. Bunun nedeni, uygulamanızda tutarsızlıklar ve hatalara yol açabilir.
Durum ve etkinlik işleyici lambda'ları için sabit değerlerin iletilmesini tercih edin. Bu yaklaşımın faydaları şunlardır:
- Yeniden kullanılabilirliği artırırsınız.
- Kullanıcı arayüzünüzün durum değerini doğrudan değiştirmediğinden emin olun.
- Eyaletin eş zamanlı olmadığından emin olduğunuz için başka bir ileti dizisinden dönüştürüldü.
- Genellikle kod karmaşıklığını azaltırsınız.
Örneğin, parametre olarak String
ve lambda kabul eden bir composable
farklı bağlamlardan çağrılabilir ve yeniden kullanılabilir. En popüler uygulamanın
veya geri düğmesi olan
çubuk her zaman metin görüntülenir. Hedeflerinize göre bir
metni ve arkasını alan daha genel MyAppTopAppBar
composable
parametre olarak düğme tutamacı:
@Composable fun MyAppTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) { TopAppBar( title = { Text( text = topAppBarText, textAlign = TextAlign.Center, modifier = Modifier .fillMaxSize() .wrapContentSize(Alignment.Center) ) }, navigationIcon = { IconButton(onClick = onBackPressed) { Icon( Icons.Filled.ArrowBack, contentDescription = localizedString ) } }, // ... ) }
ViewModeller, durumlar ve etkinlikler: örnek
ViewModel
ve mutableStateOf
kullanarak tek yönlü verileri de tanıtabilirsiniz.
uygulamanızdaki akışı hakkında
bilgi aktarmalısınız:
- Kullanıcı arayüzünüzün durumu,
StateFlow
veyaLiveData
gibi gözlemlenebilir durum sahipleri aracılığıyla gösterilir. ViewModel
, kullanıcı arayüzünden veya uygulamanızın diğer katmanlarından gelen etkinlikleri işler ve etkinliklere göre durum sahibini günceller.
Örneğin, bir oturum açma ekranı uygularken Oturum aç düğmesine dokunarak uygulamanızda bir ilerleme durumu döner simgesi ve bir ağ çağrısı görüntülenir. Öğe giriş başarılı olursa uygulamanız farklı bir ekrana geçerse; durumunda: Uygulamada Snackbar görünüyor. Ekran durumunu şu şekilde modellemeniz gerekir: ve etkinlik:
Ekranda dört durum var:
- Oturum kapalı: Kullanıcı henüz oturum açmadığında.
- Devam ediyor: Uygulamanız şu anda kullanıcının oturumunu ağ çağrısı yapıyor.
- Hata: Oturum açılırken bir hata oluştuğunda.
- Oturum açıldı: Kullanıcı oturum açtığında.
Bu eyaletleri mühürlü sınıf olarak modelleyebilirsiniz. ViewModel
, durumu
bir State
, başlangıç durumunu ayarlar ve durumu gerektiği şekilde günceller. İlgili içeriği oluşturmak için kullanılan
ViewModel
, bir onSignIn()
yöntemini kullanıma sunarak oturum açma etkinliğini de işler.
class MyViewModel : ViewModel() { private val _uiState = mutableStateOf<UiState>(UiState.SignedOut) val uiState: State<UiState> get() = _uiState // ... }
Compose, mutableStateOf
API'ye ek olarak
LiveData
, Flow
ve için uzantılar
dinleyici olarak kaydetmek ve değeri bir durum olarak temsil etmek için Observable
.
class MyViewModel : ViewModel() { private val _uiState = MutableLiveData<UiState>(UiState.SignedOut) val uiState: LiveData<UiState> get() = _uiState // ... } @Composable fun MyComposable(viewModel: MyViewModel) { val uiState = viewModel.uiState.observeAsState() // ... }
Daha fazla bilgi
Jetpack Compose'daki mimari hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:
Örnekler
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- State ve Jetpack Compose
- Oluşturma'da kullanıcı arayüzü durumunu kaydet
- Kullanıcı girişini işleme