Scaffold

Materyal Tasarım'da iskelet, projenin hedeflerine ulaşmasını sağlayan temel bir yapıdır. standartlaştırılmış bir platformdur. Bir araya getiren farklı kullanıcı arayüzünün uygulama çubukları ve kayan işlem düğmeleri gibi belirli kısımlarına tutarlı bir görünüm ve his sağlar.

Örnek

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

  • topBar: Ekranın üst kısmındaki uygulama çubuğu.
  • bottomBar: Ekranın alt kısmındaki uygulama çubuğu.
  • floatingActionButton: Sayfanın sağ alt köşesinde yer alan bir düğme ekranı kullanarak önemli işlemleri görebilirsiniz.

Hem üst hem de alt kısımlarda 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. Geçer content lambda için daha sonra alt öğede kullanabileceğiniz bir innerPadding değeri composables.

Aşağıdaki örnekte, AKD'yi nasıl uygulayabileceğinize ilişkin Scaffold Bir üst uygulama çubuğu, alt uygulama çubuğu ve bir kayan işlem içerir Scaffold öğesinin dahili durumuyla etkileşimde bulunan düğme.

@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 sayacı yineleyen kayan bir işlem düğmesi içeren bir yapı uygulaması. Yapı yapısının iç içeriği, bileşeni açıklayan basit bir metindir.
Şekil 1. Yapı iskelesi uygulaması.

Ek kaynaklar