Scaffold trong Jetpack Compose — nó là gì, thuộc tính và cách hoạt động

Scaffold trong Jetpack Compose là gì

Scaffold là một hàm composable triển khai khung màn hình theo đặc tả Material Design. Scaffold không phải là một container theo nghĩa truyền thống — nó là một trình quản lý bố cục phối hợp vị trí của nhiều thành phần Material tiêu chuẩn trên màn hình.

Scaffold quản lý lề cho TopAppBar, BottomBar và FloatingActionButton, cũng như các yếu tố hệ thống — thanh trạng thái và thanh điều hướng. Điều này đảm bảo nội dung không chồng lấn với các yếu tố hệ thống và tuân thủ các nguyên tắc Material Design.

Theo Material Design Guidelines, 2025, Scaffold nên là phần tử gốc của mỗi màn hình ứng dụng. Nó thay thế CoordinatorLayout cũ từ hệ thống View và cung cấp một API đơn giản hơn, khai báo hơn để xây dựng bố cục màn hình.

Chữ ký cơ bản của Scaffold

Scaffold chấp nhận các tham số modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost và content. Tham số content nhận PaddingValues — các lề mà nội dung chính phải tính đến.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Trang chủ") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Nội dung chính")
        }
    }
}

Các slot của Scaffold: topBar, bottomBar và floatingActionButton

topBar là slot để đặt thanh trên của ứng dụng, thường là TopAppBar hoặc LargeTopAppBar. Scaffold tự động thêm lề vào innerPadding cho nội dung để không chồng lấn với topBar. TopAppBar có thể chứa tiêu đề, biểu tượng điều hướng và các hành động.

bottomBar là slot cho thanh điều hướng dưới. Nó hỗ trợ BottomNavigation, BottomAppBar hoặc NavigationBar. Scaffold tính đến chiều cao của bottomBar khi tính toán innerPadding cho nội dung. Theo Material Design Guidelines, 2025, bottomBar nên được sử dụng trên các màn hình có 3–5 điểm điều hướng.

floatingActionButton là slot cho nút hành động nổi. Scaffold tự động đặt vị trí FAB theo đặc tả Material Design — ở góc dưới bên phải với lề chính xác. floatingActionButtonPosition cho phép di chuyển FAB đến giữa cạnh dưới của màn hình.

Ví dụ với tất cả các slot

Trong ví dụ này, Scaffold sử dụng tất cả các slot chính: TopAppBar với tiêu đề, BottomBar với ba mục điều hướng và FloatingActionButton cho hành động chính.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Ứng dụng") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Trang chủ") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Tìm kiếm") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Nội dung màn hình")
        }
    }
}

ScaffoldState: quản lý Drawer và Snackbar

ScaffoldState là đối tượng trạng thái của Scaffold kết hợp DrawerState và SnackbarHostState. DrawerState quản lý việc mở và đóng menu bên, trong khi SnackbarHostState quản lý việc hiển thị và ẩn Snackbar. Trạng thái được tạo thông qua rememberScaffoldState() và được truyền vào tham số scaffoldState.

DrawerState cung cấp các phương thức open và close để điều khiển Drawer theo chương trình. Trạng thái của Drawer có thể là mở, đóng hoặc mở một phần. drawerGesturesEnabled cho phép tắt cử chỉ vuốt để mở Drawer, chỉ để lại việc mở theo chương trình thông qua nút.

SnackbarHostState quản lý Snackbar — các thông báo tạm thời ở cuối màn hình. Phương thức showSnackbar hiển thị Snackbar với một thông điệp và một hành động tùy chọn. Theo Material Design Guidelines, 2025, Snackbar nên được sử dụng cho các thông điệp ngắn gọn không có thông tin quan trọng.

@Composable
fun ScaffoldWithDrawer() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Trình đơn") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Mục 1")
                Text("Mục 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Nội dung")
        }
    }
}

Ví dụ xây dựng màn hình với Scaffold

Một ví dụ màn hình hoàn chỉnh với Scaffold bao gồm TopAppBar, BottomNavigation, FloatingActionButton và Snackbar để hiển thị thông báo khi nhấn FAB. ScaffoldState được truyền cho tất cả các thành phần để phối hợp trạng thái.

@Composable
fun MainScreen() {
    val state = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = state,
        topBar = {
            TopAppBar(
                title = { Text("IT Sectr") },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Notifications, "Notifications")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(icon = { Icon(Icons.Default.Home, "Trang chủ") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Cài đặt") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Hoàn thành")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Chào mừng")
        }
    }
}

InnerPadding và bố cục thích ứng với Scaffold

innerPadding là PaddingValues mà Scaffold truyền cho khối content. Chúng chứa các lề cần thiết để ngăn nội dung chồng lấn với statusBar, navigationBar, topBar và bottomBar. Việc sử dụng innerPadding là bắt buộc để hiển thị chính xác trên các thiết bị khác nhau.

Scaffold tự động tính toán innerPadding dựa trên lề hệ thống và chiều cao của các slot được cài đặt. Trên các thiết bị có camera dạng đảo hoặc phần cắt màn hình, Scaffold điều chỉnh lề cho thanh trạng thái. Trên các thiết bị cũ có nút vật lý, lề dưới có thể không có.

Theo Android Developers, 2024, innerPadding nên được áp dụng cho container gốc của nội dung thông qua Modifier.padding(innerPadding). Nếu nội dung sử dụng container có thể cuộn, innerPadding được áp dụng thông qua Modifier.consumeWindowInsets để bàn phím và cử chỉ hệ thống hoạt động chính xác.

• Áp dụng innerPadding cho container gốc của nội dung thông qua Modifier.padding(innerPadding)
• Đối với container có thể cuộn, sử dụng Modifier.consumeWindowInsets(innerPadding)
• Không thêm lề bổ sung cho thanh trạng thái — Scaffold xử lý điều này tự động
• Nếu topBar hoặc bottomBar vắng mặt, các lề tương ứng trong innerPadding sẽ bằng không