Android 喷气背包组合。使用堆栈布局

Question

有谁知道如何使用可组合的 Stack 布局？我知道，它的工作方式必须类似于我们都知道的 RelativeLayout。但是，我没有得到我需要的结果。第一个完全覆盖第二个（或者根本不绘制第二个），而不是将一个视图绘制在另一个视图之上。我试图在工具栏的中央放置一个文本，并在屏幕右侧放置一个按钮。

TopAppBar(
            title = {
                Stack(modifier = Modifier.None) {
                    Align(alignment = Alignment.Center) {
                        Text(
                            text = "MyApp",
                            style = (+themeTextStyle { h6 }).withOpacity(0.7f)
                        )
                    }
                    Align(alignment = Alignment.CenterRight) {
                        CircleImageButton(
                            resource = Res.drawable.ic_action_reload,
                            onCLick = onRefreshClick
                        )
                    }
                }
            },
            color = Color.White
        )

Answer 1

对于 1.0.0-alpha03，Stack 是一个可组合项，其子项相对于其边缘定位。

只是一个例子，中心有一个 300x300 的矩形，TopStart/BottomEnd 角有 2 个 150x150 的矩形，使用 StackScope.gravity

Stack {

    Box(
        backgroundColor = Color.Blue,
        modifier = Modifier
            .align(Alignment.Center)
            .width(300.dp)
            .height(300.dp))

    Box(
        backgroundColor = Color.Green,
        modifier = Modifier
            .align(Alignment.TopStart)
            .width(150.dp)
            .height(150.dp))

    Box(
        backgroundColor = Color.Red,
        modifier = Modifier
            .align(Alignment.BottomEnd)
            .width(150.dp)
            .height(150.dp))
}

关于 TopAppBar 你可以使用类似的东西：

TopAppBar(
    title = {
        Text(text = "TopAppBar")
    },
    navigationIcon = {
        IconButton(onClick = { }) {
            Icon(Icons.Filled.Menu)
        }
    },
    actions = {
        // RowScope here, so these icons will be placed horizontally
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite)
        }
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite)
        }
    }
)

Android 喷气背包组合。使用堆栈布局

Android Jetpack Compose. Using Stack layout

android

android-jetpack-compose