compose布局

compose布局

在布局的时候2个控件之间不添加一些约束的话就会把2个元素直接重合在一起。所以需要添加一些组合和约束

Column

使用 Column 可将多个项垂直地放置在屏幕上。

@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

Row

使用 Row 可将多个项水平地放置在屏幕上。

@Composable
fun ArtistCardRow(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}

Box

使用 Box 可将元素放在其他元素上。

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}

在布局模型中，界面树是在单次传递中布局的。首先，系统会要求每个节点对自身进行测量，然后以递归方式完成所有子节点的测量，并将尺寸约束条件沿着树向下传递给子节点。再后，确定叶节点的尺寸和放置位置，并将经过解析的尺寸和放置指令沿着树向上回传。

简而言之，父节点会在其子节点之前进行测量，但会在其子节点的尺寸和放置位置确定之后再对自身进行调整。

布局的顺序：

界面树布局遵循以下顺序：

1. 系统要求根节点 Row 对自身进行测量。
2. 根节点 Row 要求其第一个子节点（即 Image）进行测量。
3. Image 是一个叶节点（也就是说，它没有子节点），因此该节点会报告尺寸并返回放置指令。
4. 根节点 Row 要求其第二个子节点（即 Column）进行测量。
5. 节点 Column 要求其第一个子节点 Text 进行测量。
6. 由于第一个节点 Text 是叶节点，因此该节点会报告尺寸并返回放置指令。
7. 节点 Column 要求其第二个子节点 Text 进行测量。
8. 由于第二个节点 Text 是叶节点，因此该节点会报告尺寸并返回放置指令。
9. 现在，节点 Column 已测量其子节点，并已确定其子节点的尺寸和放置位置，接下来它可以确定自己的尺寸和放置位置了。
10. 现在，根节点 Row 已测量其子节点，并已确定其子节点的尺寸和放置位置，接下来它可以确定自己的尺寸和放置位置了。

Compose 通过只测量一次子项来实现高性能。单遍测量对性能有利，使 Compose 能够高效地处理较深的界面树。如果某个元素测量了它的子元素两次，而该子元素又测量了它的子元素两次，依此类推，那么一次尝试布置整个界面就不得不做大量的工作，这将很难让应用保持良好的性能。

如果布局由于某种原因需要多次测量，Compose 会提供一个特殊的系统，即“固有特性测量”。如需详细了解此功能，请参阅 Compose 布局中的固有特性测量。

由于测量和放置是布局传递的不同子阶段，因此任何仅影响项的放置而不影响测量的更改都可以单独执行。

Scaffold

脚手架

这种脚手架是把activity的整体架构都定义好了，只是把例如topbar，bottombar等一些曹伟开好，你只需要填进去就好了。如果是需要高度自定义的一些界面的话就不适合使用这种方法了。

其他

。。。

文档地址