Compose kullanıcı arayüzünüzün mimarisini oluşturma

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") }
)
ArchitectureSnippets.kt

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 veya LiveData 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

ziyaret edin.

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.
}
ArchitectureSnippets.kt

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
                )
            }
        },
        // ...
    )
}
ArchitectureSnippets.kt

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 veya LiveData 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

    // ...
}
ArchitectureSnippets.kt

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()
    // ...
}
ArchitectureSnippets.kt

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

ziyaret edin.