Đưa ra các chỉ dẫn bằng hình ảnh để dễ dàng tập trung hơn
Mặc dù tất cả các phần tử có thể làm tâm điểm trong Giao diện Material đều có kiểu tâm điểm phù hợp với giao diện, nhưng bạn có thể cần thêm một số phần tử hình ảnh để giúp phần tử được lấy tiêu điểm dễ nhận ra hơn. Bạn nên thay đổi đường viền của phần tử bằng màu có độ tương phản tốt với nền:
var color by remember { mutableStateOf(Color.White) } Card( modifier = Modifier .onFocusChanged { color = if (it.isFocused) Red else White } .border(5.dp, color) ) {}
Trong ví dụ này, remember
được dùng để lưu trữ màu của đường viền trong các thành phần kết hợp lại và đường viền của phần tử được cập nhật mỗi khi phần tử này tăng hoặc mất tiêu điểm.
Triển khai chỉ dẫn bằng hình ảnh nâng cao
Với Jetpack Compose, bạn cũng có thể tạo các chỉ dẫn hình ảnh tinh vi và nâng cao hơn phù hợp hơn với giao diện người dùng của mình.
- Trước tiên, hãy tạo một
IndicationInstance
vẽ trực quan điểm gợi ý bạn muốn trong giao diện người dùng:private class MyHighlightIndicationInstance(isEnabledState: State<Boolean>) : IndicationInstance { private val isEnabled by isEnabledState override fun ContentDrawScope.drawIndication() { drawContent() if (isEnabled) { drawRect(size = size, color = Color.White, alpha = 0.2f) } } }
- Tiếp theo, hãy tạo một
Indication
và ghi nhớ trạng thái được lấy làm tâm điểm:class MyHighlightIndication : Indication { @Composable override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance { val isFocusedState = interactionSource.collectIsFocusedAsState() return remember(interactionSource) { MyHighlightIndicationInstance(isEnabledState = isFocusedState) } } }
- Thêm cả
Indication
vàInteractionSource
vào giao diện người dùng thông qua đối tượng sửa đổiindication()
:val highlightIndication = remember { MyHighlightIndication() } var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = highlightIndication, enabled = true, onClick = { } ) ) {}
Nắm rõ trạng thái của tiêu điểm
Nhìn chung, mỗi khi trạng thái của tiêu điểm thay đổi, FocusEvent
sẽ được kích hoạt cây và phần tử mẹ của đối tượng sửa đổi focusable()
có thể theo dõi bằng đối tượng sửa đổi onFocusChanged()
.
Nếu cần biết trạng thái của tiêu điểm,bạn có thể sử dụng các API này cùng với đối tượng sửa đổi onFocusChanged
:
isFocused
trả vềtrue
nếu thành phần kết hợp mà đối tượng sửa đổi đính kèm được lấy làm tâm điểmhasFocus
hoạt động tương tự nhưisFocused
, nhưng có một điểm khác biệt đáng kể: thay vì chỉ kiểm tra dòng điện, tính năng này sẽ kiểm tra xem phần tử hoặc một trong các phần tử con của nó có được lấy làm tâm điểm hay khôngisCaptured
trả vềtrue
bất cứ khi nào tiêu điểm được giữ. Ví dụ: điều này xảy ra khiTextField
chứa dữ liệu không chính xác, vì vậy việc cố gắng lấy tiêu điểm các phần tử khác sẽ không xoá tiêu điểm.
Các trường này được hiển thị dưới đây:
Modifier.onFocusChanged {
val isFocused = it.isFocused
val hasFocus = it.hasFocus
val isCaptured= it.isCaptured
}
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Thay đổi hành vi của tiêu điểm
- Material Design 2 trong Compose
- Xử lý hoạt động đầu vào của người dùng