1. Text component
1.1Text
Column(modifier = Modifier
.fillMaxSize()
.background(Color.Green)
.padding(10.dp)){
Text(text= stringResource(id = R.string.title_content),
modifier= Modifier
.fillMaxWidth()
.border(BorderStroke(1.dp, Color.White)),
fontSize = 20.sp,
textAlign = TextAlign.Center,
maxLines = 5)
Text(text= "测试文本2",
modifier= Modifier
.fillMaxWidth()
.border(BorderStroke(1.dp, Color.White)),
fontSize = 20.sp,
textAlign = TextAlign.Center)
}
The text source displayed by Text can reference the resources in res->values->strings.xml, as shown in the first displayed text.
1.2 Text input box
var text by remember {
mutableStateOf("")}
Column(modifier = Modifier
.fillMaxSize()
.background(Color.Green)
.padding(10.dp)){
TextField(value = text,
onValueChange = {
it:String->
text = it
},
label ={
Text("文本输入框")},
leadingIcon = {
Icon(imageVector = Icons.Default.Email,contentDescription = "账号")
},
trailingIcon={
Icon(imageVector = Icons.Default.Person, contentDescription = "用户名")
}
)
OutlinedTextField(
value = text,
onValueChange ={
text = it},
label={
Text("边框文本输入框")},
leadingIcon = {
Icon(imageVector = Icons.Filled.Star, contentDescription = "密码")
}
)
BasicTextField(value = text,
onValueChange = {
text = it
},
decorationBox = {
innerTextField ->
Row(verticalAlignment = Alignment.CenterVertically){
Icon(imageVector = Icons.Default.Search,contentDescription = "搜索")
innerTextField()
}
},
modifier = Modifier
.padding(horizontal = 5.dp)
.background(Color.White, CircleShape)
.height(50.dp)
.fillMaxWidth()
)
}
2. Button component
var clickIcon by remember {
mutableStateOf(Icons.Filled.ShoppingCart)
}
val clickInteraction = remember {
MutableInteractionSource()}
val pressState = clickInteraction.collectIsPressedAsState()
Column(modifier = Modifier
.fillMaxWidth()
.padding(10.dp),
verticalArrangement = Arrangement.Center
){
Button(modifier = Modifier.clickable {
/*内部已经被占用，会被拦截，因此日志不会显示*/
Log.d("TAG","点击按钮")
},
onClick = {
clickState = !clickState
clickIcon = if(clickState) Icons.Filled.Star else Icons.Filled.ShoppingCart
}, interactionSource = clickInteraction, //监听组件状态
border = BorderStroke(5.dp,borderColor)
){
Text("按钮:"+pressState.value)
}
IconButton(onClick = {
}) {
Icon(imageVector = clickIcon,contentDescription = "图标按钮")
}
TextButton(onClick = {
}){
Text("文本按钮")
}
}
Before clicking the button:
After clicking the button:
When the first rounded button is clicked and held, it will be displayed as button: true
Button has two aspects that need attention:
(1) Buttton has a parameter interactionSource, which is used to monitor the event source of component status, and obtain the status of the component through it to set different styles. . The status of the obtained component can be:
interactionSource.collectIsPressedAsState(): Determine whether the state is pressed
interactionSource.collectIsFocusedAsState(): Determine whether the focus is obtained
interactionSource.collectIsDraggedAsState( ): Determine whether to drag
(2) All Composable components have the Modifier.clickable modifier, which is used to handle events of the combined component, such as Material Design style water ripples, etc. This is achieved by internally intercepting Modifier.clickable. BecauseModifier.clickable has been occupied internally, you need to additionally define Button’s onClickUsed to handle click developer-defined events.
3. Picture components
Defining pictures can be achieved through Image and Icon. The calling form is as follows:
Column(modifier= Modifier
.fillMaxSize()
.padding(20.dp)){
//必须是png,jpg的图片
Image(painter = painterResource(id = R.mipmap.laugh),
contentDescription = "不支持使用")
//Icon默认的背景颜色是黑色
Icon(imageVector = Icons.Default.Face,
tint = Color.Green,
contentDescription = "图标示例1")
Icon(painter= painterResource(id = R.mipmap.laugh),
contentDescription = "图标示例2",
tint = Color.Blue)
Icon(bitmap = ImageBitmap.imageResource(id = R.mipmap.laugh),
contentDescription = "图标示例3",
tint=Color.Unspecified)
}
A total of four pictures are defined, and the second picture is the icon inside the calling system. There are three main forms of citing image resources:
Icon(imageVector = Icons.Default.Face, contentDescription = "图标示例1") Icon(painter= painterResource(id = R.mipmap.laugh), contentDescription = "图标示例2", tint = Color.Blue) Icon(bitmap = ImageBitmap.imageResource(id = R.mipmap.laugh), contentDescription = "图标示例3", tint=Color.Unspecified)
tint sets the color of the icon. If it is set to Color.Unspecified, it means not set, and the original color is used.
4. Selector related components
//复选按钮状态
var checkedState by remember {
mutableStateOf(false)
}
//复选框
Row(verticalAlignment = Alignment.CenterVertically){
Checkbox(checked = checkedState ,
onCheckedChange ={
it:Boolean->
checkedState = it
},
colors = CheckboxDefaults.colors(checkedColor = Color.Green))
Text("复选框")
}
var selectedState by remember {
mutableStateOf(false)
}
//单选按钮
var selectedColor = Color.Green
Row(verticalAlignment = Alignment.CenterVertically){
RadioButton(selected = selectedState,
onClick = {
selectedState = !selectedState
},
colors = RadioButtonDefaults.colors(selectedColor = selectedColor))
Text("单选按钮")
}
//三相复选按钮状态
val (triState1,onStateChange1) = remember {
mutableStateOf(false) }
val (triState2,onStateChange2) = remember {
mutableStateOf(false) }
val triState = remember(triState1,triState2){
if(triState1 && triState2) ToggleableState.On
else if (!triState1 && !triState2) ToggleableState.Off
else ToggleableState.Indeterminate
}
//三相状态复选框
Column(modifier = Modifier.fillMaxWidth()){
Row(verticalAlignment = Alignment.CenterVertically){
TriStateCheckbox(state = triState ,
onClick = {
val s = triState!=ToggleableState.On
onStateChange1(s)
onStateChange2(s)
},
colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colorScheme.primary))
Text("三相状态复选框")
}
Column(modifier = Modifier.padding(10.dp)){
Row(verticalAlignment = Alignment.CenterVertically) {
Checkbox(triState1, onStateChange1)
Text("选项1")
}
Row(verticalAlignment = Alignment.CenterVertically){
Checkbox(triState2,onStateChange2)
Text("选项2")
}
}
}
//switch开关状态
var openState by remember{
mutableStateOf(false) }
//Switch单选开关
Row(verticalAlignment = Alignment.CenterVertically){
Switch(checked = openState,
onCheckedChange = {
it:Boolean->
openState = it
},
colors = SwitchDefaults.colors(disabledCheckedTrackColor = Color.DarkGray, checkedTrackColor = Color.Green))
Text(if(openState) "打开" else "关闭")
}
//sliderProgress值：进度条的值
var sliderProgress by remember{
mutableStateOf(0f) }
//定义Slider组件
Column(horizontalAlignment = Alignment.CenterHorizontally){
Slider(value = sliderProgress ,
onValueChange ={
it:Float->
sliderProgress = it
},
colors = SliderDefaults.colors(activeTrackColor = Color.Green))
Text(text = "进度：%.1f%%".format(sliderProgress*100))
}
}
Drag the progress bar, and it will appear similar to the following:
5. Define dialog box
var openState2 by remember {
mutableStateOf(true) }
Column(modifier = Modifier.fillMaxSize()) {
if(openState2){
AlertDialog(onDismissRequest = {
openState2 = !openState2},
title = {
Text("警告对话框标题")
},
text={
Text("警告对话框内容")
},
confirmButton = {
TextButton(onClick={
openState2 = true
}){
Text("确定")
}
},
dismissButton = {
TextButton(onClick={
openState2 = false
}){
Text("取消")
}
}
)
}
}
var openState1 by remember{
mutableStateOf(true) }
Column(modifier = Modifier.fillMaxSize()) {
if(openState1){
Dialog(onDismissRequest = {
openState1 = !openState1}){
Column(modifier = Modifier
.size(200.dp, 80.dp)
.background(Color.White)){
Text("对话框")
Button(onClick = {
openState1 = !openState1}){
Text("关闭对话框")
}
}
}
}
}
