Scaffold

Trong Material Design, Scaffold là một cấu trúc cơ bản cung cấp nền tảng được chuẩn hoá cho các giao diện người dùng phức tạp. Giao diện này chứa các phần khác nhau của giao diện người dùng, chẳng hạn như thanh ứng dụng và nút hành động nổi, mang lại giao diện nhất quán cho ứng dụng.

Ví dụ

Thành phần kết hợp Scaffold cung cấp một API đơn giản mà bạn có thể sử dụng để nhanh chóng tập hợp cấu trúc của ứng dụng theo nguyên tắc Material Design. Scaffold chấp nhận một số thành phần kết hợp dưới dạng tham số. Trong đó có:

• topBar: Thanh ứng dụng ở đầu màn hình.
• bottomBar: Thanh ứng dụng ở cuối màn hình.
• floatingActionButton: Một nút di chuột qua góc dưới cùng bên phải màn hình mà bạn có thể dùng để hiển thị các thao tác chính.

Để biết thêm ví dụ chi tiết về cách triển khai cả thanh ứng dụng trên cùng và dưới cùng, hãy xem trang thanh ứng dụng.

Bạn cũng có thể truyền nội dung Scaffold giống như cho các vùng chứa khác. Phương thức này truyền một giá trị innerPadding đến lambda content mà sau đó bạn có thể sử dụng trong các thành phần kết hợp con.

Ví dụ sau đây cung cấp một ví dụ đầy đủ về cách bạn có thể triển khai Scaffold. Thành phần này chứa thanh ứng dụng trên cùng, thanh ứng dụng dưới cùng và nút hành động nổi tương tác với trạng thái nội bộ của Scaffold.

@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

Phương thức triển khai có dạng như sau:

Tài nguyên khác

• Thanh ứng dụng