Scaffold
Trong Material Design, Scaffold là một cấu trúc cơ bản cung cấp được chuẩn hoá cho các giao diện người dùng phức tạp. Các tài sản tham chiếu với nhau các phần 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 cho ứng dụng giao diện nhất quán.
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ể 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 làm tham số. Trong số này có
sau:
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 của màn hình mà bạn có thể dùng để hiện các thao tác chính.
Để biết thêm ví dụ chi tiết về cách bạn có thể triển khai cả trên cùng và dưới cùng thanh ứng dụng, xem trang thanh ứng dụng.
Bạn cũng có thể truyền nội dung Scaffold
như cách bạn thực hiện đến các vùng chứa khác. Thông qua
một giá trị innerPadding
cho lambda content
mà sau đó bạn có thể sử dụng trong thành phần con
thành phần kết hợp.
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 bao gồm một thanh ứng dụng trên cùng, thanh ứng dụng ở dưới cùng và một hành động nổi
nút 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(), ) } } }
Phương thức triển khai có dạng như sau: