Bộ chọn giờ giúp người dùng chọn thời gian. Bạn có thể
sử dụng các thành phần kết hợp TimePicker
và TimeInput
để triển khai thời gian
trong ứng dụng của bạn.
Loại
Có hai loại bộ chọn giờ:
- Quay số: Cho phép người dùng đặt thời gian bằng cách di chuyển tay điều khiển quanh mặt số.
- Phương thức nhập: Cho phép người dùng đặt thời gian bằng bàn phím.
Hình ảnh sau đây cung cấp ví dụ về bộ chọn thời gian quay số ở bên trái và bộ chọn thời gian nhập ở bên phải:
![Mặt số và bộ chọn thời gian nhập.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepickers.png?hl=vi)
Nền tảng API
Để triển khai bộ chọn giờ, hãy sử dụng TimePicker
hoặc TimeInput
thành phần kết hợp:
TimePicker
: Triển khai bộ chọn thời gian quay số.TimeInput
: Triển khai bộ chọn thời gian nhập.
Trạng thái
Đối với cả TimePicker
và TimeInput
, bạn cũng phải truyền một tham số
TimePickerState
. Chế độ này cho phép bạn đặt thời gian xuất hiện mặc định đã chọn
trên bộ chọn. Thẻ này cũng ghi lại thời gian người dùng đã chọn bằng
bộ chọn.
Hộp thoại
Bộ chọn giờ sẽ xuất hiện trong hộp thoại. Các ví dụ trong hướng dẫn này không sử dụng hộp thoại. Để biết ví dụ về hộp thoại, hãy xem hướng dẫn về Hộp thoại cho bộ chọn giờ.
Bộ chọn thời gian quay số
Đoạn mã này minh hoạ cách triển khai bộ chọn thời gian quay số cơ bản.
@Composable fun DialExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
Hãy cân nhắc những điều sau trong đoạn mã này:
Calendar.getInstance()
khởi chạyTimePickerState
với giá trị hiện tại bất cứ lúc nào.- Ví dụ này sử dụng
java.util.Calendar
. Bật Java Quy trình đơn giản hoá API 8 trở lên trong dự án của bạn để sử dụng thay thếjava.time.LocalTime
trên mọi phiên bản Android.
- Ví dụ này sử dụng
- Thành phần kết hợp
TimePicker
hiển thị bộ chọn giờ, lấytimePickerState
làm tham số. - Quá trình triển khai bao gồm hai nút: một nút dùng để xác nhận lựa chọn và nút khác để loại bỏ bộ chọn.
Phương thức triển khai có dạng như sau:
![Bộ chọn thời gian quay số. Người dùng có thể chọn thời gian bằng mặt đồng hồ.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-dial.png?hl=vi)
Bộ chọn thời gian nhập
Đoạn mã này minh hoạ cách triển khai bộ chọn thời gian của kiểu nhập cơ bản.
@Composable fun InputExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimeInput( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
Các điểm chính cần lưu ý trong quá trình triển khai này:
- Về cơ bản, cấu trúc này giống với bộ chọn giờ quay số, với
điểm khác biệt là việc sử dụng
TimeInput
thay vìTimePicker
. - Tham số
is24Hour
chotimePickerState
được đặt rõ ràng thànhtrue
. Theo mặc định, giá trị này làfalse
.
Phương thức triển khai có dạng như sau:
![Bộ chọn thời gian nhập. Người dùng có thể nhập thời gian bằng trường văn bản.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-input.png?hl=vi)
Sử dụng trạng thái
Để tận dụng thời gian mà người dùng đã chọn trong bộ chọn giờ, hãy chuyển
TimePickerState
phù hợp với hàm onConfirm
. Tài khoản mẹ
sau đó có thể truy cập vào thời gian đã chọn thông qua TimePickerState.hour
và
TimePickerState.minute
.
Đoạn mã sau đây minh hoạ cách thực hiện việc này:
@Composable fun DialUseStateExample( onConfirm: (TimePickerState) -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = { onConfirm(timePickerState) }) { Text("Confirm selection") } } }
Sau đó, bạn có thể gọi thành phần kết hợp như sau:
var selectedTime: TimePickerState? by remember { mutableStateOf(null) }
// ...
DialUseStateExample(
onDismiss = {
showDialExample = false
},
onConfirm = {
time ->
selectedTime = time
showDialExample = false
},
)
// ...
if (selectedTime != null) {
val cal = Calendar.getInstance()
cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
cal.set(Calendar.MINUTE, selectedTime!!.minute)
cal.isLenient = false
Text("Selected time = ${formatter.format(cal.time)}")
} else {
Text("No time selected.")
}
Để biết thêm chi tiết, hãy xem cách triển khai đầy đủ trong các đoạn mã ứng dụng.