Đường phân chia

Đường phân chia là các đường mỏng dùng để phân tách các mục trong danh sách hoặc vùng chứa khác. Bạn có thể triển khai bộ chia trong ứng dụng bằng cách sử dụng các thành phần kết hợp HorizontalDivider và VerticalDivider.

Nền tảng API

Cả hai thành phần đều cung cấp tham số để sửa đổi giao diện:

  • thickness: Sử dụng tham số này để chỉ định độ dày của đường phân chia.
  • color: Dùng tham số này để chỉ định màu của đường phân chia.

Ví dụ về đường phân chia theo chiều ngang

Ví dụ sau đây minh hoạ cách triển khai thành phần HorizontalDivider. Phương thức này sử dụng tham số thickness để kiểm soát chiều cao của dòng:

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}
Divider.kt

Cách triển khai này kết xuất một đường ngang mỏng giữa 2 thành phần văn bản:

Màn hình ứng dụng Android hiển thị hai mục văn bản: "First item in list" (Mục đầu tiên trong danh sách) và "Second item in list" (Mục thứ hai trong danh sách) được phân tách bằng một đường ngang mỏng.
Hình 1. Một đường phân chia theo chiều ngang phân tách 2 thành phần văn bản.

Ví dụ về đường phân chia dọc

Ví dụ sau đây minh hoạ cách triển khai thành phần VerticalDivider. Mã này sử dụng tham số color để cung cấp màu tuỳ chỉnh cho dòng:

@Composable
fun VerticalDividerExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("First item in row")
        VerticalDivider(color = MaterialTheme.colorScheme.secondary)
        Text("Second item in row")
    }
}
Divider.kt

Cách triển khai này hiển thị một đường dọc mỏng giữa 2 thành phần văn bản:

Màn hình ứng dụng Android hiển thị hai mục văn bản, "First item in Row" (Mục đầu tiên trong hàng) và "Second item in Row" (Mục thứ hai trong hàng) được phân tách bằng một đường dọc mỏng.
Hình 2. Một đường phân chia dọc phân tách 2 thành phần văn bản.

Tài nguyên khác