Compose Multiplatform Skill: 5 Quy Tắc Thiết Kế UI Tối Ưu
Compose Multiplatform Skill: 5 Quy Tắc Thiết Kế UI Tối Ưu

Compose Multiplatform Skill: 5 Quy Tắc Thiết Kế UI Tối Ưu

Lập trình giao diện đa nền tảng đang bước vào kỷ nguyên mới nhờ sự trưởng thành vượt bậc của Kotlin Multiplatform (KMP). Trong đó, Compose Multiplatform...

Lập trình giao diện đa nền tảng đang bước vào kỷ nguyên mới nhờ sự trưởng thành vượt bậc của Kotlin Multiplatform (KMP). Trong đó, Compose Multiplatform đóng vai trò là framework giao diện cốt lõi, kế thừa trọn vẹn triết lý declarative UI của Jetpack Compose trên Android để đưa lên iOS, Desktop và Web. Tuy nhiên, việc chia sẻ giao diện trên nhiều hệ điều hành đòi hỏi các kỹ sư phải nắm vững những khuôn mẫu thiết kế đặc thù của Compose Multiplatform để tránh bẫy Recomposition, quản lý trạng thái an toàn và tối ưu hóa hiệu năng render. Dưới đây là những phân tích chuyên sâu về 5 quy tắc vàng giúp xây dựng UI nhất quán và tối ưu hiệu suất tối đa khi sử dụng Compose Multiplatform.

1. Quản Lý Trạng Thái (State Management) Với Mô Hình Single State Object

Quản lý trạng thái luôn là bài toán đầu tiên cần giải quyết trong các ứng dụng khai báo. Khi chuyển dịch sang mô hình Compose Multiplatform, việc duy trì một nguồn chân lý duy nhất (Single Source of Truth) trở nên sống còn để đảm bảo UI hoạt động đồng bộ trên cả Android lẫn iOS. Việc tạo ra các luồng dữ liệu phân tán hoặc sử dụng trực tiếp nhiều thuộc tính MutableState đơn lẻ trong ViewModel thường dẫn đến tình trạng bất đồng bộ trạng thái hiển thị của Compose Multiplatform.

Quy tắc gom trạng thái vào Data Class duy nhất

Một màn hình phức tạp thiết kế bằng Compose Multiplatform nên có duy nhất một trạng thái đại diện được định nghĩa dưới dạng một Kotlin Data Class. Trạng thái này sẽ đóng gói toàn bộ thông tin cần thiết của màn hình, từ danh sách dữ liệu hiển thị, trạng thái tải (loading), thông báo lỗi cho đến các truy vấn tìm kiếm hiện thời. ViewModel sẽ giữ vai trò là quản trị viên của trạng thái này thông qua việc expose dưới dạng StateFlow.

data class ItemListState(
    val items: List<Item> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null,
    val searchQuery: String = ""
)

class ItemListViewModel(
    private val getItems: GetItemsUseCase
) : ViewModel() {
    private val _state = MutableStateFlow(ItemListState())
    val state: StateFlow<ItemListState> = _state.asStateFlow()

    fun onSearch(query: String) {
        _state.update { it.copy(searchQuery = query) }
        loadItems(query)
    }

    private fun loadItems(query: String) {
        viewModelScope.launch {
            _state.update { it.copy(isLoading = true) }
            getItems(query).fold(
                onSuccess = { items -> 
                    _state.update { it.copy(items = items, isLoading = false) } 
                },
                onFailure = { e -> 
                    _state.update { it.copy(error = e.message, isLoading = false) } 
                }
            )
        }
    }
}

Thu thập trạng thái an toàn vòng đời trong Compose

Khi sử dụng Compose Multiplatform trên iOS và Android, thói quen gọi collectAsState() trực tiếp có thể gây ra hiện tượng lãng phí tài nguyên khi ứng dụng rơi vào trạng thái nền (background). Thay vào đó, chúng ta cần sử dụng API collectAsStateWithLifecycle() để tự động dừng thu thập luồng dữ liệu khi vòng đời UI không còn hoạt động, đồng thời tách biệt rõ ràng giữa Composable Container (giữ logic State) và Composable Stateless Content (chỉ nhận State thuần túy để dựng UI) trong dự án Compose Multiplatform.

@Composable
fun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {
    val state by viewModel.state.collectAsStateWithLifecycle()

    ItemListContent(
        state = state,
        onSearch = viewModel::onSearch
    )
}

@Composable
private fun ItemListContent(
    state: ItemListState,
    onSearch: (String) -> Unit
) {
    // Thành phần UI thuần khiết không trạng thái (Stateless Composable)
    // Giúp dễ dàng xem trước (preview) và viết unit test
}

Áp dụng mô hình Event Sink Pattern

Đối với các màn hình lớn sở hữu hàng chục tương tác khác nhau (ví dụ: nhấn nút xóa, sửa đổi thông tin, kéo thả tải lại trang), việc truyền hàng chục tham số callback lambda xuống các Composable con trong Compose Multiplatform sẽ tạo nên một mã nguồn cực kỳ lộn xộn và khó bảo trì. Hãy nhóm toàn bộ tương tác người dùng thành các lớp sự kiện (sealed interface) để chuyển trực tiếp đến ViewModel xử lý qua một điểm nhận sự kiện duy nhất của Compose Multiplatform.

sealed interface ItemListEvent {
    data class Search(val query: String) : ItemListEvent
    data class Delete(val itemId: String) : ItemListEvent
    data object Refresh : ItemListEvent
}

// Triển khai tiếp nhận sự kiện tập trung tại ViewModel
fun onEvent(event: ItemListEvent) {
    when (event) {
        is ItemListEvent.Search -> onSearch(event.query)
        is ItemListEvent.Delete -> deleteItem(event.itemId)
        is ItemListEvent.Refresh -> loadItems(_state.value.searchQuery)
    }
}

// Sử dụng tại Composable với duy nhất một lambda
ItemListContent(
    state = state,
    onEvent = viewModel::onEvent
)

2. Điều Hướng An Toàn Loại (Type-Safe Navigation) Trong Compose Multiplatform

Một trong những điểm yếu lịch sử của Compose Multiplatform là thiếu cơ chế điều hướng chuẩn hóa, buộc lập trình viên phải dựa vào các thư viện bên thứ ba hoặc tự viết hệ thống định tuyến bằng tay. Với sự xuất hiện của Jetpack Navigation 2.8 trở lên, cộng đồng nhà phát triển Compose Multiplatform giờ đây đã có thể sử dụng hệ thống Type-Safe Navigation chính chủ vô cùng mạnh mẽ, đưa tính an toàn loại dữ liệu lên hàng đầu.

Khởi tạo tuyến đường an toàn với Kotlin Serialization

Để tận dụng tối đa cơ chế mới, các màn hình và tham số truyền nhận của Compose Multiplatform sẽ được định nghĩa dưới dạng các đối tượng Kotlin được đánh dấu `@Serializable`. Điều này loại bỏ hoàn toàn các chuỗi ký tự String định tuyến vốn dễ phát sinh lỗi gõ sai và khó quản lý khi dự án Compose Multiplatform mở rộng quy mô lớn.

@Serializable data object HomeRoute
@Serializable data class DetailRoute(val id: String)
@Serializable data object SettingsRoute

@Composable
fun AppNavHost(navController: NavHostController = rememberNavController()) {
    NavHost(navController, startDestination = HomeRoute) {
        composable<HomeRoute> {
            HomeScreen(onNavigateToDetail = { id -> 
                navController.navigate(DetailRoute(id)) 
            })
        }
        composable<DetailRoute> { backStackEntry ->
            val route = backStackEntry.toRoute<DetailRoute>()
            DetailScreen(id = route.id)
        }
        composable<SettingsRoute> { SettingsScreen() }
    }
}

Điều phối Dialog và Bottom Sheet theo mô hình khai báo

Thay vì sử dụng các cờ boolean cục bộ để ẩn hiện hộp thoại, Compose Multiplatform khuyến khích tích hợp trực tiếp Dialog và Bottom Sheet vào cây điều hướng NavHost. Cách tiếp cận này giúp trạng thái hiển thị của hộp thoại được quản lý đồng nhất với Backstack của hệ thống, giúp người dùng Android nhấn nút Back vật lý hoặc người dùng iOS vuốt ngược mà không làm đứt gãy luồng trải nghiệm UI của Compose Multiplatform.

NavHost(navController, startDestination = HomeRoute) {
    composable<HomeRoute> { /* ... */ }
    dialog<ConfirmDeleteRoute> { backStackEntry ->
        val route = backStackEntry.toRoute<ConfirmDeleteRoute>()
        ConfirmDeleteDialog(
            itemId = route.itemId,
            onConfirm = { navController.popBackStack() },
            onDismiss = { navController.popBackStack() }
        )
    }
}

3. Quy Tắc Thiết Kế Composable Linh Hoạt Với Slot-Based APIs

Khi xây dựng giao diện đa nền tảng với Compose Multiplatform, mục tiêu tối thượng là tái sử dụng tối đa code UI mà không làm giảm đi tính tùy biến riêng biệt của từng màn hình. Nếu thiết kế các widget quá cứng nhắc, bạn sẽ liên tục phải tạo mới các biến thể giao diện cho mỗi nền tảng khác nhau trong Compose Multiplatform.

Ứng dụng kiến trúc Slot-Based APIs

Slot-Based APIs cho phép lập trình viên chừa sẵn các khoảng trống (“khe cắm”) trong Composable dưới dạng các tham số lambda nhận khối UI khác `@Composable () -> Unit`. Việc này mang lại tính linh hoạt cực cao cho Compose Multiplatform, giúp định hình khung xương (skeleton) của component trong khi nhường quyền thiết kế nội dung chi tiết cho nơi sử dụng.

@Composable
fun AppCard(
    modifier: Modifier = Modifier,
    header: @Composable () -> Unit = {},
    content: @Composable ColumnScope.() -> Unit,
    actions: @Composable RowScope.() -> Unit = {}
) {
    Card(modifier = modifier) {
        Column {
            header()
            Column(content = content)
            Row(horizontalArrangement = Arrangement.End, content = actions)
        }
    }
}

Quy chuẩn thứ tự áp dụng Modifier

Khác biệt lớn giữa XML truyền thống và Compose Multiplatform là Modifier hoạt động tuần tự (Sequential Layout). Mỗi sự thay đổi trong chuỗi Modifier sẽ kế thừa và biến đổi kết quả của các lệnh đứng trước. Để giữ cho giao diện Compose Multiplatform hoạt động nhất quán, bạn cần tuân theo thứ tự phân lớp chuẩn mực sau đây:

  1. Bố cục (Layout): Thiết lập kích thước và khoảng đệm biên (padding, size).
  2. Hình dạng (Shape): Cắt góc hoặc định hình khối bo tròn (clip).
  3. Đồ họa (Drawing): Thiết lập nền và đường viền (background, border).
  4. Tương tác (Interaction): Gán sự kiện click hoặc kéo thả (clickable, pointerInput).
Text(
    text = "Nhấn vào đây",
    modifier = Modifier
        .padding(16.dp)                  // 1. Xác định vùng đệm bao quanh
        .clip(RoundedCornerShape(8.dp))  // 2. Bo tròn vùng đệm đã chọn
        .background(Color.White)         // 3. Tô nền trắng cho hình dạng bo tròn
        .clickable { /* Xử lý */ }        // 4. Lắng nghe cử chỉ tương tác của người dùng
)

4. Phân Tách Giao Diện Đặc Thù Nền Tảng Qua expect/actual

Mặc dù phần lớn UI trong Compose Multiplatform là dùng chung (Shared UI), vẫn có những thời điểm chúng ta bắt buộc phải giao tiếp trực tiếp với hệ điều hành để cấu hình các phần tử hệ thống. Cách tiếp cận tốt nhất trong Compose Multiplatform không phải là ép buộc toàn bộ hệ sinh thái chạy chung một dòng lệnh, mà là cung cấp các trừu tượng hóa sạch sẽ thông qua cơ chế expect/actual của Kotlin Multiplatform.

Cấu hình StatusBar hệ thống đa nền tảng

Một trường hợp điển hình nhất trong Compose Multiplatform là thanh trạng thái (StatusBar) của điện thoại. Trên Android, việc đổi màu StatusBar có thể điều khiển trực tiếp qua thư viện SystemUiController trong Compose Multiplatform, trong khi trên iOS việc này thường phải giao tiếp với UIKit hoặc thiết lập file cấu hình Info.plist của Xcode.

// Định nghĩa chung tại thư mục commonMain
@Composable
expect fun PlatformStatusBar(darkIcons: Boolean)

// Triển khai tương thích trên androidMain
@Composable
actual fun PlatformStatusBar(darkIcons: Boolean) {
    val systemUiController = rememberSystemUiController()
    SideEffect { 
        systemUiController.setStatusBarColor(Color.Transparent, darkIcons) 
    }
}

// Triển khai tương thích trên iosMain
@Composable
actual fun PlatformStatusBar(darkIcons: Boolean) {
    // iOS xử lý trực tiếp thông qua UIKit interop hoặc cấu hình Info.plist
}

5. Tối Ưu Hóa Hiệu Năng Render Và Tránh Bẫy Recomposition

Compose Multiplatform sở hữu tốc độ vẽ giao diện ấn tượng, tuy nhiên do sử dụng engine vẽ trực tiếp (Skia/Impeller) trên iOS và Desktop, hiệu năng dựng hình có thể giảm sút nghiêm trọng nếu mã nguồn Compose Multiplatform kích hoạt recomposition thừa thãi. Việc tối ưu hóa sự ổn định của kiểu dữ liệu và tối giản các phép toán trong quá trình dựng là bắt buộc để duy trì tốc độ mượt mà của Compose Multiplatform.

Khử Recomposition bằng cách khai báo kiểu dữ liệu ổn định

Trình biên dịch Compose Multiplatform luôn tìm cách tối ưu hóa bằng cách bỏ qua việc dựng lại các Composable có tham số đầu vào không thay đổi. Tuy nhiên, nếu đầu vào là các Class không được nhận dạng là ổn định (Stable), Compose Multiplatform sẽ buộc phải chạy lại toàn bộ Composable đó trong mọi chu kỳ Recomposition. Hãy đảm bảo các dữ liệu đại diện cho UI được đánh dấu rõ ràng với `@Immutable` hoặc `@Stable` trong dự án Compose Multiplatform của bạn.

@Immutable
data class ItemUiModel(
    val id: String,
    val title: String,
    val description: String,
    val progress: Float
)

Sử dụng thuộc tính Key trong danh sách Lazy Lists

Trong các danh sách cuộn mượt mà của Compose Multiplatform như LazyColumn hay LazyRow, việc cập nhật, xóa hoặc chèn thêm một phần tử vào giữa danh sách mà không có định danh ổn định sẽ buộc Compose Multiplatform phải hủy và vẽ lại toàn bộ các dòng hiển thị. Cung cấp tham số `key` duy nhất cho mỗi dòng giúp Compose Multiplatform tái sử dụng thông minh cấu trúc vẽ cũ và tự động tạo hoạt ảnh chuyển động mượt mà.

LazyColumn {
    items(
        items = items,
        key = { it.id }  // Định danh ổn định giúp tái sử dụng cấu trúc vẽ dòng UI
    ) { item ->
        ItemRow(item = item)
    }
}

Trì hoãn đọc trạng thái thông qua derivedStateOf

Khi bạn cần lắng nghe sự thay đổi của một trạng thái liên tục (ví dụ như trạng thái cuộn của danh sách) trong Compose Multiplatform, việc đọc trực tiếp thuộc tính đó sẽ kích hoạt Recomposition liên hồi cho toàn bộ màn hình ở mỗi điểm pixel thay đổi. Bằng cách bọc phép tính toán vào derivedStateOf, chúng ta chỉ kích hoạt Recomposition trong Compose Multiplatform khi và chỉ khi kết quả tính toán cuối cùng thỏa mãn điều kiện logic được thay đổi.

val listState = rememberLazyListState()
val showScrollToTop by remember {
    derivedStateOf { listState.firstVisibleItemIndex > 5 }
}

Tránh cấp phát tài nguyên bộ nhớ trong Composable

Khai báo biến hoặc thực hiện các phép lọc dữ liệu mảng phức tạp trực tiếp trong hàm Composable của Compose Multiplatform là sai lầm sơ đẳng nhất. Những tác vụ này sẽ lặp đi lặp lại sau mỗi chu kỳ vẽ lại, gây áp lực lớn lên bộ thu dọn rác (Garbage Collector) của hệ thống. Thay vào đó, hãy luôn ghi nhớ các phép toán phức tạp bằng cấu trúc `remember(dependencies)` trong Compose Multiplatform để giữ cho dữ liệu không bị tính toán lại một cách vô dụng.

// ❌ CÁCH VIẾT TỒI - Tạo lambda mới và chạy hàm lọc danh sách trong mỗi lần vẽ lại UI
items.filter { it.isActive }.forEach { ActiveItem(it, onClick = { handle(it) }) }

// ✅ CÁCH VIẾT TỐT - Chỉ thực hiện tính toán lại khi mảng items gốc thay đổi
val activeItems = remember(items) { items.filter { it.isActive } }
activeItems.forEach { item ->
    key(item.id) {
        ActiveItem(item, onClick = { handle(item) })
    }
}

Đồng Bộ Hệ Thống Dynamic Theming Với Material 3

Đa số các dự án Compose Multiplatform đều sử dụng Material Design làm hệ thống thiết kế cơ sở. Để nâng tầm trải nghiệm thị giác của người dùng, giao diện của Compose Multiplatform nên được thiết lập chế độ Dynamic Theming – tức là tự động thích ứng với màu sắc chủ đạo của hình nền người dùng thiết lập trên Android, đồng thời tôn trọng chế độ sáng/tối (Light/Dark Mode) mặc định của hệ thống iOS hay Desktop.

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (darkTheme) dynamicDarkColorScheme(LocalContext.current)
            else dynamicLightColorScheme(LocalContext.current)
        }
        darkTheme -> darkColorScheme()
        else -> lightColorScheme()
    }

    MaterialTheme(colorScheme = colorScheme, content = content)
}

Những Anti-Patterns Phổ Biến Cần Tránh Khi Lập Trình Compose Multiplatform

Để đạt được mã nguồn tối ưu chuẩn mực trong Compose Multiplatform, hãy đối chiếu quy trình viết code của bạn với các phản mẫu thiết kế (Anti-Patterns) sau đây:

  • Dùng mutableStateOf trực tiếp trong ViewModel: Hãy luôn chọn dùng MutableStateFlow kết hợp thu thập bằng collectAsStateWithLifecycle() ở UI để giải phóng luồng dữ liệu an toàn khi vòng đời giao diện thay đổi trong ứng dụng Compose Multiplatform.
  • Truyền NavController xuống sâu trong cây Composable: Việc này phá vỡ tính độc lập của các Composable con trong Compose Multiplatform. Hãy giải phóng chúng bằng cách sử dụng các callback lambda gửi sự kiện điều hướng ngược lên tầng gốc NavHost quản lý.
  • Tính toán logic nặng bên trong hàm Composable: Tác vụ đọc ghi file, sắp xếp danh sách dài hoặc tính toán hình học phức tạp cần được chuyển vào ViewModel xử lý bất đồng bộ hoặc bọc trong cấu trúc nhớ `remember` của Compose Multiplatform.
  • Sử dụng LaunchedEffect(Unit) thay thế cho ViewModel Init: Lệnh gọi này có thể chạy lại không lường trước được khi có sự thay đổi cấu hình xoay màn hình ở một số thiết bị Android, thay vào đó hãy chạy logic khởi tạo trực tiếp tại khối `init` của ViewModel nhằm duy trì sự ổn định trong Compose Multiplatform.

Tổng Kết Và Lời Khuyên Thực Tế Cho Lập Trình Viên

Lập trình Compose Multiplatform không chỉ dừng lại ở việc học cách kéo thả các khối thành phần, mà là tư duy tối ưu hóa luồng dữ liệu một chiều (Unidirectional Data Flow) và tối thiểu Recomposition. Việc cấu trúc các màn hình rõ ràng, phân rã các composable thành các thành phần stateless, và tôn trọng thứ tự ưu tiên của Modifier sẽ giúp ứng dụng đa nền tảng Compose Multiplatform hoạt động nhẹ nhàng và mượt mà tương đương với ứng dụng bản địa thuần túy.

Để hiểu rõ hơn về các nguyên tắc xây dựng ứng dụng với kiến trúc tối giản và cấu trúc sạch sẽ từ các AI Agent thông minh, bạn có thể tham khảo thêm tại Agent Skill: Shadcn AI Code UI và phương pháp kiểm thử an toàn tại Webapp Testing Skill: Hướng dẫn chi tiết kiểm thử web bằng AI Agent. Chúc bạn xây dựng được những ứng dụng chất lượng nhất cùng với Compose Multiplatform!

Bài viết liên quan