01. Compose 可组合组件之Row And Column
02. Compose 可组合组件之 属性 modifier
03. Compose 可组合组件之Card 图片
04. Compose 字体
05. Compose State
06. Compose SnackBar
代码
class SnackBarActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val scaffoldState = rememberScaffoldState()
//文本框的输入文字内容 默认""
var textFieldState by remember {
mutableStateOf("")
}
val scope = rememberCoroutineScope()
//熟悉的名字 Flutter 上面的脚手架
Scaffold(
modifier = Modifier.fillMaxSize(),
scaffoldState = scaffoldState
) {
//水平居中
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 30.dp)
)
{
TextField(value = textFieldState, label = {
Text("Please input your name")
}, onValueChange = {
textFieldState = it
},
singleLine = true,
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(16.dp))
Box(
modifier = Modifier.fillMaxWidth(),
contentAlignment = Alignment.CenterEnd
) {
Button(onClick = {
scope.launch {
scaffoldState.snackbarHostState.showSnackbar(
message = "You put text: $textFieldState"
)
}
}) {
Text("Commit")
}
}
}
}
}
}
}
![](https://img-blog.csdnimg.cn/20210529222318267.gif)