先讲知识点
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,来标明状态的
var expanded by remember { mutableStateOf(true) }
mutableStateOf
和remember
,这俩货是干什么的?
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
控件是用来填充空白的
完整代码
@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))
}