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

Question

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

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 = {
        //....
    })