Android Jetpack Compose - Alignment、Arrangement、Carousel、Checkbox、TriStateCheckbox

一、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)}}

1. 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))}

2. 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))}

3. 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 用于控制子元素排列方式

三、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 但增加中间状态，用于表示三种状态

• TriStateCheckbox 常用于嵌套复选框的父级控制，适用于如下场景

1. 文件管理器全选 / 部分选

2. 表格批量操作

3. 设置项的多级控制

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})}}}