Compose

Compose

列表在普遍App中是一个十分重要组成部分，随处可见，而在Compose中是如何实现列表的呢？没错，就是使用LazyColumn实现纵向滚动列表，使用LazyRow实现横向滚动列表，下面是一个简单的例子。

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp


class Compose_08Activity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
//            compose_08_lazyColumn() // 纵向滚动列表
            compose_08_lazyRow() // 横向滚动列表
        }
    }
}



@Composable
fun compose_08_lazyColumn() {
    LazyColumn(modifier = Modifier.fillMaxWidth()) {
        items(40) { index ->
            Text(text = "第 $index 项", color = Color.White,
                fontSize = 14.sp,
                modifier = Modifier.background(Color.Blue))
        }

    }
}


@Composable
fun compose_08_lazyRow() {
    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(20) { index ->
            Text(text = "第 $index 项",
                fontSize = 14.sp,)
        }

    }
}

到这里，一个简单的纵向列表和横向列表就实现了，但是，如果我们想要围绕内容边缘添加内边距，我们可以给LazyColumn或LazyRow的contentPadding赋值：

// 纵向列表
LazyColumn(
    contentPadding = PaddingValues(horizontal = 10.dp, vertical = 5.dp),
) {
    // ...
}

// 横向列表
LazyRow(
    contentPadding = PaddingValues(horizontal = 10.dp, vertical = 5.dp),
) {
    // ...
}

注意：其中，horizontal是左侧和右侧边距，vertical是顶部和底部边距，此内边距不是作用与LazyColumn或LazyRow，而是应用于内容。如果是LazyColumn的话，第一个项会在顶部添加5.dp内边距，最后一个项会在底部添加5.dp内边距；如果是LazyRow的话，第一个项会在左侧添加10.dp内边距，最后一个项会在右侧添加10.dp内边距。

如果我们想在列表项之间添加间距，则可以使用Arrangement.spacedBy()方法，

// 纵向列表
LazyColumn(
    verticalArrangement = Arrangement.spacedBy(10.dp),
) {
    // ...
}


// 横向列表
LazyRow(
    horizontalArrangement = Arrangement.spacedBy(10.dp),
) {
    // ...
}

 加上contentPadding和Arrangement.spacedBy()的代码：

@Composable
fun compose_08_lazyColumn() {
    LazyColumn(modifier = Modifier.fillMaxWidth(),
        contentPadding = PaddingValues(10.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp),
    ) {
        items(40) { index ->
            Text(text = "第 $index 项",
                fontSize = 14.sp,
                color = Color.White,
                modifier = Modifier.background(Color.Blue))
        }

    }
}


@Composable
fun compose_08_lazyRow() {
    LazyRow(modifier = Modifier.fillMaxWidth(),
        contentPadding = PaddingValues(10.dp),
        horizontalArrangement =  Arrangement.spacedBy(10.dp)) {
        items(20) { index ->
            Text(text = "第 $index 项",
                fontSize = 14.sp,
                color = Color.White,
                modifier = Modifier.background(Color.Blue))
        }

    }
}