Android日志：Jetpack Compose中的布局

基本布局方式

image.png
图片来源

Material组件

Compose附带内置的Material组件可组合项。我们可以用它们创建应用。最高级别的可组合项是Scaffold。
Scaffold可让我们实现具有基本Material Design布局结构的界面。Scaffold可以为最常见的顶层Material组件（如TopAppBar、BottomAppBar、FloatingActionButton和Drawer）提供槽位。使用Scaffold时，我们可以确保这些组件能够正确放置并协同工作。

---

@Composable
fun LayoutsWay(){
    Scaffold {innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }

}
@Composable
fun BodyContent(modifier: Modifier = Modifier){
    Column(modifier = modifier) {
        Text(text = "Hi Android!")
        Text(text = "Hi Kotlin")
    }
}

测试1

我们将Scaffold可组合项添加到示例中，以便我们能够使用典型的Material Design结构。Scaffold API中的所有参数都是可选的，除了@Composable(InnerPadding)->Unit类型的正文内容：lambda会接受内边距作为参数。这是应该应用于内容根可组合项的内边距，用于在界面上适当地限制列表项。

---

TopAppBar

Scaffold包含一个顶部应用栏的槽位，其topBar参数为@Composable()->Unit类型，这意味着我们可以用任何想要的可组合项填充该槽位。

@Composable
fun LayoutsWay(){
    Scaffold (
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "LayoutsWay")
                },
                actions = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(imageVector = Icons.Filled.Favorite, contentDescription =null )
                    }
                }
            )
        }
            ){innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }

}

测试2

顶部应用栏中的操作项槽位为actions参数，该参数在内部使用Row，因此系统会水平放置多个操作。如需使用某个预定义图标，可结合使用IconButton可组合项和其中的Icon。

---

使用列表

verticalScroll修饰符：使Column支持滚动。

@Composable
fun SimpleList() {
    // We save the scrolling position with this state that can also
    // be used to programmatically scroll the list
    val scrollState = rememberScrollState()

    Column(Modifier.verticalScroll(scrollState)) {
        repeat(100) {
            Text("Item #$it")
        }
    }
}

LazyColumn

Jetpack Compose中的LazyColumn就等同于Android视图中的RecyclerView
LazyColumn内部支持滚动，所以不需要设置verticalScrollView修饰符。

@Composable
fun ImageListItem(index: Int) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = rememberImagePainter(
                data = "https://developer.android.com/images/brand/Android_Robot.png"
            ),
            contentDescription = "Android Logo",
            modifier = Modifier.size(50.dp)
        )
        Spacer(Modifier.width(10.dp))
        Text("Item #$index", style = MaterialTheme.typography.subtitle1)
    }
}

@Composable
fun ScrollingList() {
    val listSize = 100
    // We save the scrolling position with this state
    val scrollState = rememberLazyListState()
    // We save the coroutine scope where our animated scroll will be executed
    val coroutineScope = rememberCoroutineScope()

    Column {
        Row {
            Button(onClick = {
                coroutineScope.launch {
                    // 0第一个item的索引值
                    scrollState.animateScrollToItem(0)
                }
            }) {
                Text("Scroll to the top")
            }

            Button(onClick = {
                coroutineScope.launch {
                    // listSize - 1是最后一个item的索引值
                    scrollState.animateScrollToItem(listSize - 1)
                }
            }) {
                Text("Scroll to the end")
            }
        }

        LazyColumn(state = scrollState) {
            items(listSize) {
                ImageListItem(it)
            }
        }
    }
}