一、Alignment
- Alignment 用于控制子元素对齐方式
@StablefuninterfaceAlignment{...companionobject{// 2D Alignments.@StablevalTopStart:Alignment=BiasAlignment(-1f,-1f)@StablevalTopCenter:Alignment=BiasAlignment(0f,-1f)@StablevalTopEnd:Alignment=BiasAlignment(1f,-1f)@StablevalCenterStart:Alignment=BiasAlignment(-1f,0f)@StablevalCenter:Alignment=BiasAlignment(0f,0f)@StablevalCenterEnd:Alignment=BiasAlignment(1f,0f)@StablevalBottomStart:Alignment=BiasAlignment(-1f,1f)@StablevalBottomCenter:Alignment=BiasAlignment(0f,1f)@StablevalBottomEnd:Alignment=BiasAlignment(1f,1f)// 1D Alignment.Verticals.@StablevalTop:Vertical=BiasAlignment.Vertical(-1f)@StablevalCenterVertically:Vertical=BiasAlignment.Vertical(0f)@StablevalBottom:Vertical=BiasAlignment.Vertical(1f)// 1D Alignment.Horizontals.@StablevalStart:Horizontal=BiasAlignment.Horizontal(-1f)@StablevalCenterHorizontally:Horizontal=BiasAlignment.Horizontal(0f)@StablevalEnd:Horizontal=BiasAlignment.Horizontal(1f)}}- TopStart、TopCenter、TopEnd、CenterStart、Center、CenterEnd、BottomStart、BottomCenter、BottomEnd：Box 的 contentAlignment 使用，或者，其子元素的 align 使用
Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center,){Text("test content")}Box(modifier=Modifier.fillMaxSize()){Text(text="content1",modifier=Modifier.align(Alignment.TopStart))Text(text="content2",modifier=Modifier.align(Alignment.TopCenter))Text(text="content3",modifier=Modifier.align(Alignment.TopEnd))Text(text="content4",modifier=Modifier.align(Alignment.CenterStart))Text(text="content5",modifier=Modifier.align(Alignment.Center))Text(text="content6",modifier=Modifier.align(Alignment.CenterEnd))Text(text="content7",modifier=Modifier.align(Alignment.BottomStart))Text(text="content8",modifier=Modifier.align(Alignment.BottomCenter))Text(text="content9",modifier=Modifier.align(Alignment.BottomEnd))}- Top、CenterVertically、Bottom：Row 的 verticalAlignment 使用
Row(modifier=Modifier.fillMaxSize().background(Color.LightGray).padding(16.dp),horizontalArrangement=Arrangement.Center,verticalAlignment=Alignment.CenterVertically){Text(text="1",modifier=Modifier.padding(4.dp))Text(text="12",modifier=Modifier.padding(4.dp))Text(text="123",modifier=Modifier.padding(4.dp))}- Start、CenterHorizontally、End：Column 的 horizontalAlignment 使用
Column(modifier=Modifier.fillMaxSize().background(Color.LightGray).padding(16.dp),verticalArrangement=Arrangement.Center,horizontalAlignment=Alignment.CenterHorizontally){Text(text="test123",modifier=Modifier.padding(4.dp))Text(text="test123test123",modifier=Modifier.padding(4.dp))Text(text="test123test123test123",modifier=Modifier.padding(4.dp))}二、Arrangement
- Arrangement 用于控制子元素排列方式
| 值 | 说明 |
|---|---|
| Top | 顶部对齐 |
| Center | 垂直居中 |
| Bottom | 底部对齐 |
| SpaceEvenly | 等间距分布 |
| SpaceBetween | 两端对齐，中间均匀分布 |
| SpaceAround | 均匀分布 |
三、Carousel
dataclassCarouselItem(valid:Int,@DrawableResvalredId:Int,valdescription:String)valitems=remember{listOf(CarouselItem(0,R.drawable.img1,"img1"),CarouselItem(1,R.drawable.img2,"img2"),CarouselItem(2,R.drawable.img3,"img3"),CarouselItem(3,R.drawable.img4,"img4"),CarouselItem(4,R.drawable.img5,"img5"),)}HorizontalUncontainedCarousel(state=rememberCarouselState{items.count()},// CarouselState 实例，使用 `rememberCarouselState { itemCount }` 创建，其中 itemCount 是轮播界面中的项的总数itemWidth=186.dp,// 定义轮播界面中每个项的宽度（固定宽度）itemSpacing=8.dp,// 定义轮播界面中相邻项之间的间距modifier=Modifier.fillMaxWidth().wrapContentHeight(),contentPadding=PaddingValues(horizontal=16.dp,vertical=16.dp),// 定义轮播界面中内容的内边距，确保内容不贴边){itemIndex->valitem=items[itemIndex]Image(modifier=Modifier.height(205.dp).maskClip(MaterialTheme.shapes.extraLarge),// 使用圆角形状裁剪图片painter=painterResource(id=item.redId),// 加载 drawable 资源contentDescription=item.description,contentScale=ContentScale.Crop)}dataclassCarouselItem(valid:Int,@DrawableResvalredId:Int,valdescription:String)valitems=remember{listOf(CarouselItem(0,R.drawable.img1,"img1"),CarouselItem(1,R.drawable.img2,"img2"),CarouselItem(2,R.drawable.img3,"img3"),CarouselItem(3,R.drawable.img4,"img4"),CarouselItem(4,R.drawable.img5,"img5"),)}HorizontalMultiBrowseCarousel(state=rememberCarouselState{items.count()},// CarouselState 实例，使用 `rememberCarouselState { itemCount }` 创建，其中 itemCount 是轮播界面中的项的总数preferredItemWidth=186.dp,// 定义轮播界面中每个项的宽度（首选宽度）itemSpacing=8.dp,// 定义轮播界面中相邻项之间的间距modifier=Modifier.fillMaxWidth().wrapContentHeight(),contentPadding=PaddingValues(horizontal=16.dp,vertical=16.dp),// 定义轮播界面中内容的内边距，确保内容不贴边){itemIndex->valitem=items[itemIndex]Image(modifier=Modifier.height(205.dp).maskClip(MaterialTheme.shapes.extraLarge),// 使用圆角形状裁剪图片painter=painterResource(id=item.redId),// 加载 drawable 资源contentDescription=item.description,contentScale=ContentScale.Crop)}四、Checkbox
valcontext=LocalContext.currentvarcheckedbyremember{mutableStateOf(true)}Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){Checkbox(checked=checked,onCheckedChange={checked=it Toast.makeText(context,"checked:$checked",Toast.LENGTH_SHORT).show()})}五、TriStateCheckbox
1、基本介绍
- TriStateCheckbox 继承 Checkbox 但增加中间状态，用于表示三种状态
| 状态 | 说明 |
|---|---|
| On | 所有子项都选中，显示对勾（√） |
| Off | 没有任何子项选中，显示空框 |
| Indeterminate | 子项中既有选中又有取消选中，显示减号（-） |
- TriStateCheckbox 常用于嵌套复选框的父级控制，适用于如下场景
文件管理器全选 / 部分选
表格批量操作
设置项的多级控制
2、演示
valchildCheckedStates=remember{mutableStateListOf(false,false,false)}valparentState=when{childCheckedStates.all{it}->ToggleableState.On// 全都是 truechildCheckedStates.none{it}->ToggleableState.Off// 没有任何 trueelse->ToggleableState.Indeterminate}Column(modifier=Modifier.fillMaxSize(),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){Row(verticalAlignment=Alignment.CenterVertically,){Text("Select all")TriStateCheckbox(state=parentState,onClick={// 当 parentState 不等于 On 时，即状态是 Off 或 Indeterminate 时，所有子项设置为选中// 当 parentState 等于 On 时，所有子项设置为取消选中valnewState=parentState!=ToggleableState.On childCheckedStates.forEachIndexed{index,_->childCheckedStates[index]=newState}})}childCheckedStates.forEachIndexed{index,checked->Row(verticalAlignment=Alignment.CenterVertically,){Text("Option${index+1}")Checkbox(checked=checked,onCheckedChange={isChecked->childCheckedStates[index]=isChecked})}}}
