Android Jetpack用户界面编写。如何创建FloatingActionButton？

我想创建一个

FloatingActionButton

，使用

jetpack compose

放置在活动的右下角

---

有人能帮我举一个上述场景的例子吗？

您可以创建

浮动操作按钮

尝试下面的

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

---

使用

1.0.0-beta01

创建或，您可以使用以下内容：

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

使用

Scaffold

Scaffold为最常见的顶级材质组件提供插槽，例如TopAppBar、BottomAppBar、FloatingActionButton和Drawer。通过使用脚手架，可以很容易地确保这些组件正确定位并正确工作

语法 例子 输出

---

FWIW这不再是一个正确的答案，因为Compose不再允许您将

crossAxisAlignment

或

mainAxisAlignment

传递到

列

。列只接受

修饰符

并调用FlexLayout，FlexLayout确实接受这些参数，但不幸的是它是一个私有方法。

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