Compose DateRangePicker实现示例

Compose DateRangePicker实现示例

引用

CSDN

1.

https://blog.csdn.net/u012127961/article/details/144452503

本文将介绍如何在Jetpack Compose中实现一个日期范围选择器（DateRangePicker）。通过一个完整的代码示例，展示如何创建、显示和处理用户选择的日期范围。

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.DatePickerDefaults
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.DateRangePicker
import androidx.compose.material3.DateRangePickerDefaults
import androidx.compose.material3.DisplayMode
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDateRangePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun DateRangePickerExample() {
    var show by remember { mutableStateOf(false) }
    var selectedStartDateMillis by remember { mutableStateOf<Long?>(null) }
    var selectedEndDateMillis by remember { mutableStateOf<Long?>(null) }
    Column {
        Button(onClick = {
            show = !show
        }) {
            Text(
                text = Millis2Text(selectedStartDateMillis) + " - " + Millis2Text(
                    selectedEndDateMillis
                )
            )
        }
    }
    //选择状态，设置初始模式为选择模式
    val state = rememberDateRangePickerState(initialDisplayMode = DisplayMode.Picker)
    if (show) {
        DatePickerDialog(shape = RoundedCornerShape(8.dp), onDismissRequest = {
            show = false
        }, confirmButton = {
            TextButton(onClick = {
                //选择的开始和结束日期
                selectedStartDateMillis = state.selectedStartDateMillis
                selectedEndDateMillis = state.selectedEndDateMillis
                show = !show
            }) {
                Text("确定")
            }
        }, dismissButton = {
            TextButton(onClick = {
                show = false
            }) {
                Text("取消")
            }
        }) {
            DateRangePicker(
                state = state,
                showModeToggle = false, title = {
                    Text(
                        text = "选择日期范围"
                    )
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(500.dp)
                    .padding(10.dp),
                headline = {
                    //自定义选中结果栏
                    DateRangePickerDefaults.DateRangePickerHeadline(
                        selectedStartDateMillis = state.selectedStartDateMillis,
                        selectedEndDateMillis = state.selectedEndDateMillis,
                        displayMode = state.displayMode,
                        dateFormatter = remember { DatePickerDefaults.dateFormatter() },
                        modifier = Modifier.padding(bottom = 10.dp)
                    )
                }
            )
        }
    }
}

fun Millis2Text(value: Long?): String {
    if (value == null) {
        return "日期"
    }
    return SimpleDateFormat("yyyy年MM月dd日", Locale.getDefault()).format(Date(value))
}