Compose Material3 日期和时间选择器教程

Compose Material3 日期和时间选择器教程

compose-material3-datetime-pickersMaterial3 themed Jetpack Compose date & time pickers.项目地址:https://gitcode.com/gh_mirrors/co/compose-material3-datetime-pickers

1. 项目的目录结构及介绍

compose-material3-datetime-pickers/
├── build.gradle.kts
├── settings.gradle.kts
├── app/
│   ├── build.gradle.kts
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/
│   │   │   │       └── example/
│   │   │   │           └── datetimepickers/
│   │   │   │               ├── MainActivity.kt
│   │   │   │               └── DatePickerDialog.kt
│   │   │   ├── res/
│   │   │   │   ├── drawable/
│   │   │   │   ├── layout/
│   │   │   │   ├── mipmap/
│   │   │   │   └── values/
│   │   │   └── AndroidManifest.xml
│   │   └── test/
│   └── ...
├── datetimepickers/
│   ├── build.gradle.kts
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/
│   │   │   │       └── marosseleng/
│   │   │   │           └── android/
│   │   │   │               └── datetimepickers/
│   │   │   │                   ├── DatePicker.kt
│   │   │   │                   ├── TimePicker.kt
│   │   │   │                   └── ...
│   │   │   └── res/
│   │   └── ...
└── ...

目录结构介绍

• app/: 包含应用程序的主要代码和资源文件。

  • src/main/java/com/example/datetimepickers/: 包含应用程序的主要Kotlin文件，如MainActivity.kt和DatePickerDialog.kt。
  • src/main/res/: 包含应用程序的资源文件，如布局、图片和字符串。
  • src/main/AndroidManifest.xml: 应用程序的清单文件。

• datetimepickers/: 包含日期和时间选择器的库代码。

  • src/main/java/com/marosseleng/android/datetimepickers/: 包含日期和时间选择器的Kotlin文件，如DatePicker.kt和TimePicker.kt。

2. 项目的启动文件介绍

MainActivity.kt

package com.example.datetimepickers

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.Button
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen()
        }
    }
}

@Composable
fun MainScreen() {
    val showDialog = remember { mutableStateOf(false) }
    if (showDialog.value) {
        DatePickerDialog(
            onDismissRequest = { showDialog.value = false },
            onDateChange = { date -> /* 处理日期变化 */ }
        )
    }
    Button(onClick = { showDialog.value = true }) {
        Text("选择日期")
    }
}

@Preview
@Composable
fun PreviewMainScreen() {
    MainScreen()
}

启动文件介绍

• MainActivity.kt: 这是应用程序的入口点。它继承自ComponentActivity并使用setContent方法来设置主屏幕的内容。
• MainScreen(): 这是一个可组合函数，用于显示主屏幕。它包含一个按钮，点击按钮会显示日期选择对话框。

3. 项目的配置文件介绍

build.gradle.kts (项目级)

plugins

compose-material3-datetime-pickersMaterial3 themed Jetpack Compose date & time pickers.项目地址:https://gitcode.com/gh_mirrors/co/compose-material3-datetime-pickers