如何在 Jetpack Compose 中将浮动操作按钮定位到左侧或开始

Question

我想在jetpack compose中创建动画底部AppBar（类似于图像），但jetpack compose中的Fab位置只是中心或末端，我需要至少将FAB移动到左侧，我的代码是：

@Composable
fun BottomBarSample() {
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                shape = CircleShape,
                onClick = {},
            ) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = "icon")
            }
        },
        floatingActionButtonPosition = FabPosition.End,
        isFloatingActionButtonDocked = true,
        bottomBar = {
            BottomAppBar(backgroundColor = Color.Cyan, cutoutShape = CircleShape) {

            }
        }
    
    ){
        //body
    }
}

Answer 1

我想这不是一个好的方法，因为我们正在更改布局方向，但是您可以使用

LTR

将布局方向从

RTL

修改为

CompositionLocalProvider

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {
       BottomBarSample()
}

Answer 2

由于还没有 FabPosition.Start，因此使用 LocalLayoutDirection 是在开始时创建切口的最简单方法。其他选项是使用路径操作或混合模式创建布局。

在这个示例中，我展示了如何使用BlendModes进行剪切，但如果您想要高程，则需要通过创建形状来使用Path，就像在源代码中完成的那样

将布局方向更改为从右到左后，您应该更改内容、bottomBar 或您使用的其他 lambda 内的方向

@Composable
fun BottomBarSample() {
    CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
        Scaffold(
            floatingActionButton = {
                FloatingActionButton(
                    shape = CircleShape,
                    onClick = {},
                ) {
                    Icon(imageVector = Icons.Filled.Add, contentDescription = "icon")
                }
            },
            floatingActionButtonPosition = FabPosition.End,
            isFloatingActionButtonDocked = true,
            bottomBar = {

                CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
                    BottomAppBar(backgroundColor = Color.Cyan, cutoutShape = CircleShape) {

                    }
                }


            }

        ) {
            CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
                //body
            }
        }
    }
}

Answer 3

此外，如果您想将 FAB 放置在自定义位置，您可以使用

offset

修饰符。

例如：

FloatingActionButton(
  ...
  modifier = Modifier.offset(x=16.dp, y=16.dp)
) { ... }