Android Jetpack Compose。使用堆栈布局

Question

有谁知道如何使用可组合的堆栈布局？据我所知，它的工作原理必须类似于我们都知道的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

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

举个例子，中心有一个 300x300 的矩形，TopStart/BottomEnd角度有 2 个 150x150 的矩形，使用 UseStackScope.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)
        }
    }
)