Android Jetpack Compose - 组件分类：布局组件、交互组件、文本组件

一、布局组件1、基本介绍Box叠加布局类似 FrameLayoutColumn垂直线性布局类似 LinearLayoutverticalRow水平线性布局类似 LinearLayouthorizontalConstraintLayout约束布局2、演示1BoxBox(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center,){Text(test content)}Box(modifierModifier.fillMaxSize()){Text(textcontent1,modifierModifier.align(Alignment.TopStart))Text(textcontent2,modifierModifier.align(Alignment.TopCenter))Text(textcontent3,modifierModifier.align(Alignment.TopEnd))Text(textcontent4,modifierModifier.align(Alignment.CenterStart))Text(textcontent5,modifierModifier.align(Alignment.Center))Text(textcontent6,modifierModifier.align(Alignment.CenterEnd))Text(textcontent7,modifierModifier.align(Alignment.BottomStart))Text(textcontent8,modifierModifier.align(Alignment.BottomCenter))Text(textcontent9,modifierModifier.align(Alignment.BottomEnd))}2ColumnColumn(modifierModifier.fillMaxSize().background(Color.LightGray).padding(16.dp),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(texttest123,modifierModifier.padding(4.dp))Text(texttest123test123,modifierModifier.padding(4.dp))Text(texttest123test123test123,modifierModifier.padding(4.dp))}3RowRow(modifierModifier.fillMaxSize().background(Color.LightGray).padding(16.dp),horizontalArrangementArrangement.Center,verticalAlignmentAlignment.CenterVertically){Text(text1,modifierModifier.padding(4.dp))Text(text12,modifierModifier.padding(4.dp))Text(text123,modifierModifier.padding(4.dp))}4ConstraintLayoutConstraintLayout(modifierModifier.fillMaxSize()){val(button,text,image)createRefs()Button(onClick{},modifierModifier.constrainAs(button){top.linkTo(parent.top)// button 的顶部链接到父布局的顶部start.linkTo(parent.start)// button 的左侧链接到父布局的左侧}){Text(test button)}Text(test content,modifierModifier.constrainAs(text){top.linkTo(button.bottom,margin16.dp)// text 的顶部链接到 button 的底部底部距离 button 底部 16.dpstart.linkTo(parent.start)// text 的左侧链接到父布局的左侧end.linkTo(parent.end)// text 的右侧链接到父布局的右侧})Image(painterpainterResource(R.drawable.ic_launcher_background),contentDescriptionnull,modifierModifier.size(100.dp).constrainAs(image){top.linkTo(text.bottom)bottom.linkTo(parent.bottom)start.linkTo(parent.start)end.linkTo(parent.end)})}二、交互组件1、基本介绍Button按钮TextField文本输入框Checkbox复选框RadioButton单选框Switch开关Slider滑块2、演示1ButtonvalcontextLocalContext.currentColumn(modifierModifier.fillMaxSize(),horizontalAlignmentAlignment.CenterHorizontally,verticalArrangementArrangement.Center){Button(onClick{Toast.makeText(context,Button Clicked,Toast.LENGTH_SHORT).show()}){Text(Button)}FilledTonalButton(modifierModifier.padding(top16.dp),onClick{Toast.makeText(context,FilledTonalButton Clicked,Toast.LENGTH_SHORT).show()}){Text(FilledTonalButton)}OutlinedButton(modifierModifier.padding(top16.dp),onClick{Toast.makeText(context,OutlinedButton Clicked,Toast.LENGTH_SHORT).show()}){Text(OutlinedButton)}ElevatedButton(modifierModifier.padding(top16.dp),onClick{Toast.makeText(context,ElevatedButton Clicked,Toast.LENGTH_SHORT).show()}){Text(ElevatedButton)}TextButton(modifierModifier.padding(top16.dp),onClick{Toast.makeText(context,TextButton Clicked,Toast.LENGTH_SHORT).show()}){Text(TextButton)}}2TextFieldvalcontextLocalContext.currentvartextbyremember{mutableStateOf()}Column(modifierModifier.fillMaxSize(),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally,){TextField(valuetext,onValueChange{textit},label{Text(留言)},placeholder{Text(请输入留言)})Button(onClick{Toast.makeText(context,text,Toast.LENGTH_SHORT).show()}){Text(展示留言)}}3CheckboxvalcontextLocalContext.currentvarcheckedbyremember{mutableStateOf(true)}Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){Checkbox(checkedchecked,onCheckedChange{checkedit Toast.makeText(context,checked:$checked,Toast.LENGTH_SHORT).show()})}4RadioButtonvarselectedbyremember{mutableStateOf(false)}RadioButton(selectedselected,onClick{selectedtrue})5Switchvarcheckedbyremember{mutableStateOf(true)}Box(modifierModifier.fillMaxSize()){Switch(modifierModifier.align(Alignment.Center),checkedchecked,onCheckedChange{checkedit})}6SlidervarsliderPositionbyremember{mutableFloatStateOf(0f)}Column(modifierModifier.fillMaxSize().padding(16.dp),horizontalAlignmentAlignment.CenterHorizontally,verticalArrangementArrangement.Center){Slider(valuesliderPosition,onValueChange{sliderPositionit})Text(textsliderPosition.toString())}三、文本组件1、基本介绍Text基础文本AnnotatedString富文本2、演示1TextBox( modifier Modifier.fillMaxSize() ) { Text(test content, modifier Modifier.align(Alignment.Center), fontSize 20.sp) }2AnnotatedStringBox( modifier Modifier.fillMaxSize() ) { Text( buildAnnotatedString { withStyle(SpanStyle(color Color.Red, fontSize 20.sp)) { append(test) } append( content) }, modifier Modifier.align(Alignment.Center) ) }