Compopse使用LazyColumn对列表进行布局

话不多说直接上代码

@Composable
fun YydsTestPage() {
    SwipeRefresh(
        modifier = Modifier
            .background(Color(0xFFf5f5f5))
            .fillMaxSize(),
        state = rememberSwipeRefreshState(isRefreshing = true),//刷新完成后置为false
        indicator = { state, trigger ->
            SwipeRefreshIndicator(
                state = state,
                refreshTriggerDistance = trigger,
                contentColor = Main_color
            )
        },
        onRefresh = {
            //需要刷新的方法
        }) {
        Column {
            //列表
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .weight(1f),
                state = rememberLazyListState(),
                contentPadding = PaddingValues(vertical = 10.dp),
                verticalArrangement = Arrangement.spacedBy(24.dp),//列表之间间距
                content = {
                    item {
                        Header()  //头布局 可以通过添加item的形式添加多个不一样的布局，所以可以用LazyColumn来实现多布局
                    }

                    items(testData) { //此处建议将列表项的UI封装出来
                        Text(
                            text = it,
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(30.dp)
                                .background(Color.Cyan),
                            textAlign = TextAlign.Center
                        )
                    }
                }
            )
            Footer()  //固定在底部不跟随滑动
        }

    }

}

@Composable
fun Footer() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .background(Color.Blue)
    )
}

@Composable
fun Header() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(180.dp)
            .background(Color.Yellow)
    )
}

val testData = listOf<String>("1", "2", "3", "4", "5", "8", "9")

效果