android - Android Jetpack 组合。使用堆栈布局

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

With 1.0.0-alpha03theStack是一个可组合的，它相对于它的边缘定位它的孩子。

只是一个例子，在中心有一个 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)
        }
    }
)