compose.material3 中的DatePicker在 desktop 平台同样可以适用

原创已于 2024-10-30 14:11:35 修改 · 313 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#kotlin

于 2024-10-30 14:11:07 首次发布

引入

implementation(compose.material3)

添加触发

@OptIn(ExperimentalMaterial3Api::class)
    @Composable
    private fun BasicDateUnit(label: String, selectedDateStr: MutableState<String>) {
        var showDatePicker by remember { mutableStateOf(false) }
        var selectedDate = rememberDatePickerState()
        EditorRow() {
            LabelText(label)
            MyTextField(
                value = selectedDateStr.value,
                textStyle = LocalTextStyle.current.copy(color = textColorLight, fontSize = 20.sp),
                trailingIcon = {
                    Icon(
                        imageVector = Icons.Default.ArrowDropDown,
                        contentDescription = "Dropdown Arrow",
                        tint = Color.Black
                    )
                },
                singleLine = true,
                readOnly = true,
                enabled = false,
                onValueChange = {},
                modifier = Modifier
                    .size(313.dp, 48.dp)
                    .background(Color.White, RoundedCornerShape(8.dp))
                    .padding(vertical = 10.dp, horizontal = 16.dp)
                    .clickable( //添加点击事件，取消点击效果
                        interactionSource = remember { MutableInteractionSource() },
                        indication = null
                    ) {
                        showDatePicker = !showDatePicker
                    },
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    disabledIndicatorColor = Color.Transparent,
                    errorIndicatorColor = Color.Transparent,
                    cursorColor = Color(0XFF46A6FA),
                )
            )
        }
        if (showDatePicker) {
            DatePickerDialog(
                onDismissRequest = { showDatePicker = false },
                confirmButton = {
                    TextButton(onClick = {
                        selectedDateStr.value = TimeUtils.millis2String(
                            selectedDate.selectedDateMillis ?: System.currentTimeMillis(),
                            ConstantUtil.DATE_FORMAT
                        )
                        showDatePicker = false // 处理确认逻辑
                    }) {
                        Text("确认", color = textColorSecondary)
                    }
                },
                modifier = Modifier.fillMaxWidth(),
                dismissButton = {
                    TextButton(onClick = { showDatePicker = false }) {
                        Text("取消", color = labelBgColor)
                    }
                },
                shape = MaterialTheme.shapes.medium,
                tonalElevation = 8.dp,
                colors = DatePickerDefaults.colors(), // 使用默认颜色
                properties = DialogProperties(),
                content = {
                    DatePicker(
                        state = selectedDate
                    )
                }
            )
        }
    }

效果