Scaffold

Materyal Tasarım'da iskelet, karmaşık kullanıcı arayüzleri için standartlaştırılmış bir platform sağlayan temel bir yapıdır. Kullanıcı arayüzünün farklı bölümlerini (ör. uygulama çubukları ve yüzen işlem düğmeleri) bir arada tutarak uygulamalara tutarlı bir görünüm ve tarz kazandırır.

Örnek

Scaffold bileşeni, uygulamanızın yapısını Materyal Tasarım yönergelerine göre hızlıca oluşturmak için kullanabileceğiniz basit bir API sağlar. Scaffold, parametre olarak çeşitli composable'ları kabul eder. Bunlardan bazıları şunlardır:

  • topBar: Ekranın üst kısmındaki uygulama çubuğu.
  • bottomBar: Ekranın alt kısmındaki uygulama çubuğu.
  • floatingActionButton: Fare imlecini ekranın sağ alt köşesine getirdiğinizde görünen ve önemli işlemleri göstermek için kullanabileceğiniz bir düğme.

Hem üst hem de alt uygulama çubuklarını nasıl uygulayabileceğinizle ilgili daha ayrıntılı örnekler için uygulama çubukları sayfasına bakın.

Scaffold içeriğini diğer kapsayıcılara gönderdiğiniz gibi gönderebilirsiniz. content lambdasına bir innerPadding değeri iletir. Bu değeri daha sonra alt bileşenlerde kullanabilirsiniz.

Aşağıdaki örnekte, Scaffold özelliğini nasıl uygulayabileceğinize dair tam bir örnek verilmiştir. Üst uygulama çubuğu, alt uygulama çubuğu ve Scaffold'ın iç durumuyla etkileşime geçen bir kayan işlem düğmesi içerir.

@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Top app bar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text =
                """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button $presses times.
                """.trimIndent(),
            )
        }
    }
}
Scaffold.kt

Bu uygulama aşağıdaki gibi görünür:

Basit üst ve alt uygulama çubuklarının yanı sıra bir sayıcıyı yineleyen kayan işlem düğmesi içeren bir iskelet uygulaması. İskeletin iç içeriği, bileşeni açıklayan basit bir metindir.
Şekil 1. Bir iskelet uygulaması.

Ek kaynaklar