Jetpack UI Compose. Как создать FloatingActionButton?

Question

Я хочу FloatingActionButton внизу справа в активности, используя jetpack compose. Я никогда не нашел ни одного примера, помогающего мне. Заранее спасибо.

Answer 1

Для создания FloatingActionButton вы можете использовать что-то вроде:

    setContent {
        MaterialTheme {

            val icon = imageFromResource(resources, R.drawable.ic_code)
            Center {
                val onClick: () -> Unit = { Log.e("Do something", "onClick") }
                Column(
                        ExpandedHeight,
                        mainAxisAlignment = MainAxisAlignment.SpaceEvenly,
                        crossAxisAlignment = CrossAxisAlignment.Center
                ) {
                    //FAB
                    FloatingActionButton(icon = icon, onClick = onClick)

                    //ExtendedFloatingActionButton
                    FloatingActionButton(text = "EXTENDED", onClick = onClick)
                    FloatingActionButton(icon = icon, text = "EXTENDED WITH ICON", onClick = onClick)
                }
            }
        }
    }

Для выравнивания по нижнему краю | справа:

val icon = imageFromResource(resources, R.drawable.baseline_code_black_24)
val onClick: () -> Unit = { Log.e("FABDemo", "onClick") }
Column(
      ExpandedHeight,
      mainAxisAlignment = MainAxisAlignment.End,
      crossAxisAlignment = CrossAxisAlignment.End
){
    Column(modifier = Spacing(16.dp)) {
        FloatingActionButton(icon = icon, onClick = onClick)
    }
}

Answer 2

Вы можете создать FloatingActionButton попробуйте ниже @Compose функцию, используя ваш значок.

@Composable
fun MyFloatingActionButton() {
    Column(modifier = ExpandedHeight, crossAxisAlignment = CrossAxisAlignment.End, mainAxisAlignment = MainAxisAlignment.End ) {
        Column(modifier = Spacing(16.dp)) {
            val icon = +imageResource(R.drawable.ic_add_icon)
            FloatingActionButton(icon = icon, color = Color.Red, elevation = 8.dp)
        }
    }
}