使用compose for Desktop 實作登入註冊UI
MutableState
Jetpack Compose中所提供用來儲存狀態的一個interface，mutableStateOf 會建立一個可觀察的MutableState<T>，這是一種整合 Compose 執行階段的可觀察類型。
可以使用mutableStateOf去控制畫面上目前是顯示那個Screen
remember
remember 可用來儲存可變動與不可變動的物件，可在Composable函式中使用remember記住狀態，並且在初始化時會將remember初始的值儲存在Composable函式中，當值有所變更中有可以回傳新的值
用來計算的值會在初始組成期間儲存在「組成」中，並在重新組成時傳回所儲存的值。
透過MutableState搭配remember API的使用可以控制控制畫面上物件狀態，包含Screen的內容
val screen: MutableState<Screen> = remember { mutableStateOf(Screen.MainScreen) }
.
.
.
when (screen.value) {
Screen.MainScreen -> mainScreen.mainScreen()
Screen.LoginScreen -> loginScreen.LoginScreen() { screen.value = Screen.MainScreen }
Screen.RegisterScreen -> registerScreen.RegisterScreen() { screen.value = Screen.MainScreen }
}
.
.
.
Jetpack Compose中所提供的一種UI layout的API函式
Scaffold(
modifier = Modifier.fillMaxSize(),
scaffoldState = scaffoldState,
content = {
// TODO content
}
)
or
Scaffold(
modifier = Modifier.fillMaxSize(),
scaffoldState = scaffoldState,
){
// TODO content
}
與Row 都是在用Composable函式中，替UI進行排列元件API元素，Column會將內部元件中進行縱向排列，而Row則會進行橫向排列
TextField、Spacer、Button＆Text以上都是由Jetpack Compose中所提供，可以在Composable函式中使用UI相關API函數。
TextField: 建立一個可以接受文字輸入UI元件
TextField(
value = textFieldStatePassword,
label = {
Text("Enter your Password")
},
onValueChange = {
textFieldStatePassword = it
}
)
Spacer:可以用於在View建立空間(間隔?)
Spacer(modifier = Modifier.height(16.dp))
Button: 按鈕元件
Button(onClick = {
// TODO onClick Action
}) {
Text("Login")
}
Text: 用於顯示文字內容UI元件
Text("Login")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent