Jetpack Compose 教你打造一个会动的按钮

语言: CN / TW / HK

theme: channing-cyan

「这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战

先讲知识点

ColumnScope:官方解释\ 根据元素相对于列中其他加权同级元素的权重,调整元素高度的大小。父元素将在测量未加权的子元素后分割剩余的垂直空间,并根据该权重进行分配。当fill为true时,元素将被强制占据分配给它的整个高度。否则,允许元素更小-这将导致列更小,因为未使用的分配高度不会重新分配给其他同级。

意思就是 它包含一个可组合控件,会自动调整元素高度的大小。能够对齐文本。 FloatingActionButton( onClick = { expanded = !expanded }, modifier = Modifier.align(Alignment.CenterHorizontally) ) 让按钮水平居中\ align()方法是ColumnScope中的一个扩展函数,所以它只有在ColumnsScope中才能工作。

接着水平放一个图标和一条文本 Row() { Icon( Icons.Filled.Favorite, contentDescription = favorite, modifier = Modifier.align(Alignment.CenterVertically) ) AnimatedVisibility( modifier = Modifier.align(Alignment.CenterVertically) ) { Text(text = favorite) } }

开箱即用的动画函数 AnimatedVisibility 随着可见值的变化,AnimatedVisibility可为其内容的出现和消失设置动画。 可以在enter和exit中为内容定义不同的EnterTransitions和ExitTransitions。 EnterTransition和ExitTransition共有3种类型:淡入淡出,展开/收缩和滑动。

| 参数 | 含义 | | --- | --- | | modifier: Modifier = Modifier | 应用于布局的修饰符 | | visible: Boolean | 定义内容项是否可见 | | enter: EnterTransition = fadeIn() + expandIn() | 入场动画,默认逐渐淡入 | | exit: ExitTransition = shrinkOut() + fadeOut() | 出场动画,默认逐渐淡出 | | initiallyVisible: Boolean = visible | 控制是否对入场动画进行处理,默认情况下不处理(即不对入场动画做处理,默认是不可见的) | | content: () -> Unit | 子级内容区域,也就是你做动画的控件或布局 |

按钮的展开和收缩我们需要引入mutableStateOf,来标明状态的 kotlin var expanded by remember { mutableStateOf(true) } mutableStateOfremember,这俩货是干什么的?

mutableStateOf 是用来保存状态的,如果状态发生了改变,所有引用这个状态的控件都发生了改变,都需要重新绘制!

那remember呢\ remember将值存储起来,当界面发生了重新绘制,就会读之前存储的值。

哦~~~ 还是不懂

反正就是\ 可以做到保存值的状态,动态修改值,并更新ui。 最后稍加优化

``` Row(Modifier.padding(start = 12.dp, end = 12.dp)) { Icon( ... ) AnimatedVisibility( ... ) { Text(modifier = Modifier.padding(start = 12.dp), text = favorite) } }

Spacer(Modifier.requiredHeight(20.dp))

``Spacer`控件是用来填充空白的

完整代码

kotlin @OptIn(ExperimentalAnimationApi::class) @Composable fun ColumnScope.AnimatedFloatingActionButton() { var expanded by remember { mutableStateOf(true) } val favorite = "Hello" FloatingActionButton( onClick = { expanded = !expanded }, modifier = Modifier.align(Alignment.CenterHorizontally) ) { Row(Modifier.padding(start = 12.dp, end = 12.dp)) { Icon( Icons.Filled.Favorite, contentDescription = favorite, modifier = Modifier.align(Alignment.CenterVertically) ) AnimatedVisibility( expanded, modifier = Modifier.align(Alignment.CenterVertically) ) { Text(modifier = Modifier.padding(start = 12.dp), text = favorite) } } } Spacer(Modifier.requiredHeight(20.dp)) }

效果图

ezgif.com-gif-maker (3).gif