android - Jetpack UI 组合。如何创建 FloatingActionButton？

Question

我想创建一个FloatingActionButton放置在活动右下角的jetpack compose.
任何人都可以帮我举一个上述场景的例子吗？

Answer 1

1.0.x创建一个FloatingActionButton或你可以使用类似的东西 ExtendedFloatingActionButton：

val onClick = { /* Do something */ }

//Simple FAB
FloatingActionButton(onClick = onClick) {
    Icon(Icons.Filled.Add,"")
}

//FAB custom color
FloatingActionButton(
    onClick = onClick,
    backgroundColor = Color.Blue,
    contentColor = Color.White
){
    Icon(Icons.Filled.Add,"")
}

//Square FAB
FloatingActionButton(
    onClick = onClick,
    shape = RectangleShape
){
    Icon(Icons.Filled.Add,"")
}

//EXTENDED FAB
ExtendedFloatingActionButton(
    text = {  Text(text = "EXTENDED FAB") },
    onClick = onClick,
    icon ={ Icon(Icons.Filled.Add,"")}
)

//EXTENDED FAB WITHOUT ICON
ExtendedFloatingActionButton(
    text = {
        Text(text = "EXTENDED FAB")
    },
    onClick = onClick
)

例子：

Scaffold(topBar = { } ,
    //floatingActionButtonPosition = FabPosition.End,
    floatingActionButton = {
        FloatingActionButton(
            onClick = {}
        ) {
            Icon(Icons.Filled.Add,"")
        }
    }
    , content = {
        //....
    })

Answer 2

利用Scaffold

Scaffold 为最常见的顶级 Material 组件提供插槽，例如 TopAppBar、BottomAppBar、FloatingActionButton 和 Drawer。通过使用 Scaffold，可以轻松确保这些组件正确定位并正确协同工作。

句法

@Composable
fun HomeContent() {
    Scaffold(
        topBar = {/**/ },
        drawerContent = {/**/ },
        bottomBar = {/**/ },
        floatingActionButton = {/**/ },
        snackbarHost = {/**/ },
        content = {/**/ }
    )
}

例子

@Composable
fun HomeContent() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Title") })
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /*TODO*/ },
                backgroundColor = Color.Red,
                content = {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_add),
                        contentDescription = null,
                        tint = Color.White
                    )
                }
            )
        },
        content = {
            Surface(modifier = Modifier.padding(24.dp)) {
                Text(
                    text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                    fontSize = 16.sp,
                )
            }
        }
    )
}

输出

Answer 3

您可以使用您的可绘制图标创建FloatingActionButton尝试以下功能。@Compose

@Composable
fun MyFloatingActionButton() {
      val icon = +imageResource(R.drawable.ic_add_icon)
            FloatingActionButton(icon = icon, color = Color.Red, elevation = 8.dp)
}