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

「这是我参与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，来标明状态的

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))
}
复制代码

效果图