İskele

Materyal Tasarım'da yapı, karmaşık kullanıcı arayüzleri için standartlaştırılmış bir platform sağlayan temel bir yapıdır. Uygulama çubukları ve kayan işlem düğmeleri gibi kullanıcı arayüzünün farklı bölümlerini bir araya getirerek uygulamalara tutarlı bir görünüm ve tarz katar.

Örnek

Scaffold composable, uygulamanızın yapısını Materyal Tasarım yönergelerine göre hızla derlemek için kullanabileceğiniz basit bir API sunar. Scaffold, çeşitli composable'ları parametre olarak kabul eder. Bunlardan bazıları:

  • topBar: Ekranın üst kısmındaki uygulama çubuğu.
  • bottomBar: Ekranın alt kısmındaki uygulama çubuğu.
  • floatingActionButton: Temel işlemleri göstermek için kullanabileceğiniz, ekranın sağ alt köşesinde bulunan 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.

Ayrıca, Scaffold içeriğini diğer kapsayıcılara olduğu gibi aktarabilirsiniz. content lambda'ya, daha sonra alt composable'larda kullanabileceğiniz bir innerPadding değeri iletir.

Aşağıdaki örnekte, Scaffold uygulamasını nasıl uygulayabileceğinize dair tam bir örnek verilmiştir. Bir üst uygulama çubuğu, alt uygulama çubuğu ve Scaffold uygulamasının dahili durumuyla etkileşime giren 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ı ve bir sayacı yineleyen kayan bir işlem düğmesi içeren bir yapı iskelesi uygulaması. Yapı iskelesinin içeriği, bileşeni açıklayan basit bir metindir.
Şekil 1. İskele uygulaması.

Ek kaynaklar