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

rqcrx0a6  于 2022-12-02  发布在  Android
关注(0)|答案(2)|浏览(191)

我想创建动画bottomAppBar在jetpack组成(像图像的东西),但在jetpack组成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
    }
}
icnyk63a

icnyk63a1#

我猜这不是一个方法,因为我们正在更改布局方向,但是您可以使用CompositionLocalProvider将布局方向从LTR修改为RTL

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

svdrlsy4

svdrlsy42#

由于没有FabPosition。开始使用LocalLayoutDirection是最简单的方法来创建剪切在开始。其他选项是创建您的布局使用路径操作或混合模式。
在这个example中,我展示了如何使用BlendModes裁剪,但是如果你想要高度,你需要使用路径创建形状,就像在源代码中一样
将布局方向更改为从右到左后,应更改内容内部方向,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
            }
        }
    }
}

相关问题