Jetpack UI 撰写。如何创建 FloatingActionButton？

Question

我想使用 jetpack compose 在 activity 的右下角创建一个 FloatingActionButton。
谁能帮我举个上述场景的例子？

Answer 1

您可以创建 FloatingActionButton 尝试下面的 @Compose 函数使用您的可绘制图标。

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

Answer 2

用 1.0.x 创建一个 FloatingActionButton or the 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 3

使用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 4

如果您想从可组合项内部创建 FAB，您可以重复使用此可组合函数：

@Composable
fun FabAnywhere(
    fabPosition: FabPosition,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Scaffold(
        floatingActionButtonPosition = fabPosition,
        floatingActionButton = {
            FloatingActionButton(
                onClick = onClick,
                modifier = modifier,
                content = content
            )
        }
    ) {}
}

这样使用：

    FabAnywhere(FabPosition.End, onClick = { }) {
        Icon(Icons.Filled.Add, contentDescription = "Add")
    }