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。通过使用脚手架，可以轻松确保这些组件正确定位并正确协同工作。

句法

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