jetpack compose 中的 TimePickerDialog

Question

jetpack compose 中的 TimePickerDialog

DeK*_*kem 17 android timepickerdialog android-jetpack-compose

我从material3文档中获得了用于撰写的代码：

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Button
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TimeInput
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope

var showTimePicker by remember { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
val snackScope = rememberCoroutineScope()

Box(propagateMinConstraints = false) {
    Button(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showTimePicker = true }
    ) { Text("Set Time") }
    SnackbarHost(hostState = snackState)
}

if (showTimePicker) {
    TimePickerDialog(
        onCancel = { showTimePicker = false },
        onConfirm = {
        val cal = Calendar.getInstance()
        cal.set(Calendar.HOUR_OF_DAY, state.hour)
        cal.set(Calendar.MINUTE, state.minute)
        cal.isLenient = false
        snackScope.launch {
            snackState.showSnackbar("Entered time: ${formatter.format(cal.time)}")
        }
        showTimePicker = false
    },
) {
    TimeInput(state = state)
}
}

Run Code Online (Sandbox Code Playgroud)

很简单吧？但 android studio 正在抱怨TimePickerDialog：

<html>None of the following functions can be called with the arguments supplied:<br/>public constructor TimePickerDialog(context: Context!, listener: TimePickerDialog.OnTimeSetListener!, hourOfDay: Int, minute: Int, is24HourView: Boolean) defined in android.app.TimePickerDialog<br/>public constructor TimePickerDialog(context: Context!, themeResId: Int, listener: TimePickerDialog.OnTimeSetListener!, hourOfDay: Int, minute: Int, is24HourView: Boolean) defined in android.app.TimePickerDialog

Run Code Online (Sandbox Code Playgroud)

经过一番谷歌搜索，发现大多数有关 TimePickerDialog 或 DatePickerDialog 的示例代码都没有使用上面文档中所述的选取器对话框。

val mTimePickerDialog = TimePickerDialog(
    mContext,
    {_, mHour : Int, mMinute: Int ->
        mTime.value = "$mHour:$mMinute"
    }, mHour, mMinute, false
)

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gab*_*tti 23

TimePickerDialogM3 封装中不包含该器件( 1.1.0-beta01)。您可以使用：

@Composable
fun TimePickerDialog(
    title: String = "Select Time",
    onCancel: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onCancel,
        properties = DialogProperties(
            usePlatformDefaultWidth = false
        ),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier = Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(
                        onClick = onCancel
                    ) { Text("Cancel") }
                    TextButton(
                        onClick = onConfirm
                    ) { Text("OK") }
                }
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

源代码

来自谷歌的经典啊！仅在未来有效的文档。 (20认同)
看起来它仍然没有包含在 compose-material3 的 1.2.0-alpha03 中：/ (2认同)
我创建了一个问题，官方建议是复制代码。https://issuetracker.google.com/issues/288311426 (2认同)

归档时间：	2 年，9 月前
查看次数：	3923 次
最近记录：	2 年前