“This is the second day of my participation in the First Challenge 2022.

Let’s start with the knowledge

ColumnScope: Official description Adjusts the height of an element based on its weight relative to other weighted peers in the column. The parent element splits the remaining vertical space after measuring the unweighted child element and allocates it according to that weight. When fill is true, the element is forced to occupy the entire height assigned to it. Otherwise, allow elements to be smaller – this results in smaller columns because unused allocation heights are not reassigned to other siblings.

This means it contains a composable control that automatically resizes the height of the element. Ability to align text.

FloatingActionButton( onClick = { expanded = ! expanded }, modifier = Modifier.align(Alignment.CenterHorizontally) )Copy the code

The align() method to center the button horizontally is an extension function in the ColumnScope, so it only works in ColumnsScope.

Then horizontally place an icon and a piece of text

Row() {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = favorite,
        modifier = Modifier.align(Alignment.CenterVertically)
    )
    AnimatedVisibility(
        modifier = Modifier.align(Alignment.CenterVertically)
    ) {
        Text(text = favorite)
    }
}
Copy the code

The out-of-the-box animation function AnimatedVisibility AnimatedVisibility animates the appearance and disappearance of its content as the visible value changes. You can define different EnterTransitions and ExitTransitions for content in Enter and Exit. There are three types of EnterTransition and ExitTransition: fade in and out, expand/shrink, and slide.

parameter meaning
modifier: Modifier = Modifier Modifiers applied to the layout
visible: Boolean Defines whether content items are visible
enter: EnterTransition = fadeIn() + expandIn() Admission animation, fade in by default
exit: ExitTransition = shrinkOut() + fadeOut() Appearance animation, the default gradually fade out
initiallyVisible: Boolean = visible Controls whether the entry animation is processed. By default, it is not processed (i.e. the entry animation is not processed and is invisible by default).
content: () -> Unit Subcontent areas, which are the controls or layouts that you animate

Expand and shrink buttons and we need to introduce mutableStateOf to indicate state

var expanded by remember { mutableStateOf(true)}Copy the code

MutableStateOf and remember, what are they?

MutableStateOf is used to hold state, and if the state changes, all controls that reference that state change and need to be redrawn!

Remember stores the value, and when the interface is redrawn, it will read the previously stored value.

Oh, I still don’t understand

Anyway, you can save the state of the value, change the value dynamically, and update the UI. Finally, slightly optimized

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

Copy the code

The Spacer control is used to fill in white space

The complete code

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ColumnScope.AnimatedFloatingActionButton(a) {
    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))
}
Copy the code

rendering