“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