Compose 开发一个入门的界面

目标

新建项目，打开Idea

主要代码实现

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.*
import androidx.compose.material.DropdownMenuState.Status
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.layout.positionInWindow
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

@Composable
@Preview
fun App() {
    var selectedText by remember { mutableStateOf("未选择") }
    MaterialTheme {
        Column (horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth()){
            DropdownButtonMenu(
                buttonText = "选择一个选项",
                items = listOf("COM1", "COM2", "COM3"),
                onItemClick = { selectedText = it }
            )
            Text(text = selectedText)
        }

    }
}
@Composable
fun DropdownButtonMenu(
    buttonText: String,
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    val dropdownState = DropdownMenuState(Status.Closed)
    val buttonPosition = remember { mutableStateOf(Offset.Zero) }
    Button(
        onClick = {
            dropdownState.status = Status.Open(buttonPosition.value)
        },
        modifier = Modifier.onGloballyPositioned { coordinates ->
            val position = coordinates.positionInWindow() // 获取按钮的位置
            buttonPosition.value = Offset(position.x, position.y + coordinates.size.height) // 计算按钮下拉框位置
        }
    ) {
        Text(text = buttonText)
    }
    DropdownMenu(state = dropdownState) {
        items.forEach { item ->
            DropdownMenuItem(onClick = {
                onItemClick(item)
                dropdownState.status = Status.Closed
            }) {
                Text(text = item)
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication, resizable = false, title = "DeskTop App", icon = painterResource("icon.png")) {
        App()
    }
}