如何在 jetpack compose 中使用惰性列和惰性垂直网格？

Question

我想要一个类似于

的布局

`<Scrollview>
  <Relativelayout>
     <Recyclerview/>(Horizontal)
     <Recyclerview/>(Vertical)
  </Relativelayout>
</Scrollview>`

这是我与问题相关的撰写代码

import androidx.compose.foundation.*
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composeappdemo.R
import com.example.composeappdemo.model.Feature
import com.example.composeappdemo.ui.theme.*

@ExperimentalFoundationApi
@Composable
fun HomeScreen(list: List<String>) {
    var features = listOf(
        Feature(
            title = "Summer Times",
            R.drawable.ic__search,
            BlueViolet1,
            BlueViolet1,
            BlueViolet1
        ),
        Feature(
            title = "Winter Vibes",
            R.drawable.ic__search,
            LightGreen1,
            BlueViolet1,
            BlueViolet1
        ),
        Feature(
            title = "Spring Times",
            R.drawable.ic__search,
            LightRed,
            BlueViolet1,
            BlueViolet1
        )
    )

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(DeepBlue)
    ) {
        LazyColumn() {
            item {
                GreetingScreen("Android")
            }
            item {
                ChipSection(list)
            }
            item {
                CurrentMeditation()
            }
            item {
                Text(
                    text = "Features",
                    color = Color.White,
                    style = MaterialTheme.typography.h6,
                    modifier = Modifier.padding(15.dp)
                )
            }
            items(features.windowed(2, 2, true)) { list ->
                Row(Modifier.fillMaxWidth()) {
                    list.forEach {
                        FeatureItem(it)
                    }
                }
            }
        }
    }
}

@Composable
fun GreetingScreen(name: String = "Android") {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .padding(15.dp)
    ) {
        Column(
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "Good Morning , $name",
                style = MaterialTheme.typography.h6,
                color = Color.White
            )
            Text(
                text = "We wish you a good day today",
                style = MaterialTheme.typography.body1,
                color = Color.White
            )
        }
        Icon(
            painter = painterResource(id = R.drawable.ic__search),
            contentDescription = "Search",
            tint = Color.White,
            modifier = Modifier.size(24.dp)
        )
    }
}

@Composable
fun ChipSection(
    chips: List<String>
) {
    var selectedChipIndex by remember {
        mutableStateOf(0)
    }
    LazyRow {
        items(chips.size) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .padding(start = 15.dp, top = 15.dp, bottom = 15.dp)
                    .clickable {
                        selectedChipIndex = it
                    }
                    .clip(RoundedCornerShape(10.dp))
                    .background(
                        if (selectedChipIndex == it) ButtonBlue
                        else DarkerButtonBlue
                    )
                    .padding(15.dp)
            ) {
                Text(text = chips[it], color = Color.White)
            }
        }
    }
}

@Composable
fun CurrentMeditation(
    color: Color = LightRed
) {
    Box(
        modifier = Modifier
            .padding(15.dp)
            .clip(RoundedCornerShape(15.dp))
            .background(color)
            .fillMaxWidth()
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(15.dp)
        ) {
            Column(verticalArrangement = Arrangement.Center) {
                Text(
                    text = "Daily Thought",
                    color = TextWhite,
                    fontSize = 18.sp
                )
                Text(
                    text = "Meditation 3 - 10 mins",
                    color = TextWhite,
                    fontSize = 13.sp
                )
            }
            Icon(
                painter = painterResource(id = R.drawable.ic__play),
                contentDescription = "Play",
                tint = Color.White
            )
        }
    }
}

@ExperimentalFoundationApi
@Composable
fun FeatureSection(features: List<Feature>) {
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        item {
            Text(
                text = "Features",
                color = Color.White,
                style = MaterialTheme.typography.h6,
                modifier = Modifier.padding(15.dp)
            )
        }
        items(features.windowed(2, 2, true)) { list ->
            Row(Modifier.fillMaxWidth()) {
                list.forEach {
                    FeatureItem(feature = it)
                }
            }
        }
        /*LazyVerticalGrid(
            cells = GridCells.Fixed(2),
            contentPadding = PaddingValues(start = 5.dp, top = 5.dp, bottom = 5.dp),
            modifier = Modifier.fillMaxHeight()
        ) {
            items(features.size) {

            }
        }*/
    }
}

@Composable
fun FeatureItem(feature: Feature) {
    Box(
        modifier = Modifier
            .padding(15.dp)
            .fillMaxWidth(.3f)
            .clip(RoundedCornerShape(15.dp))
            .aspectRatio(1f)
            .background(color = feature.lightColor)
    ) {
        Text(
            text = feature.title,
            color = Color.White,
            style = MaterialTheme.typography.h6,
            lineHeight = 24.sp,
            modifier = Modifier.align(Alignment.TopStart)
        )
        Icon(
            painter = painterResource(id = feature.iconId),
            contentDescription = feature.title,
            tint = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
        )
        Text(
            text = "Start",
            color = TextWhite,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .clickable {

                }
                .align(
                    Alignment.BottomEnd
                )
                .clip(RoundedCornerShape(10.dp))
                .background(ButtonBlue)
                .padding(vertical = 6.dp, horizontal = 15.dp)
        )
    }
}

当我尝试在 jetpack compose 中实现它时。该列表在其自己的布局下滚动，但不会展开整个滚动。水平的很好，但垂直的高度往往很小，与列表本身的高度不同。

需要一个类似这样的视图，以便视图可以扩展以及随布局滚动。

Answer 1

@Composable
fun NewsList() {
LazyColumn {
    items(rows) { item ->
        Text(
            modifier = Modifier
                .height(80.dp),
            text = item
        )
    }
}

这样的东西你可以创建 frlazycolum

对于gride你可以试试这个（不确定这个）是否正确

LazyVerticalGrid(
cells = GridCells.Fixed(cellState),
content = {
    
    }
   
}

)

Answer 2

别忘了显式导入这个库

 import androidx.compose.foundation.lazy.items
    @Composable
    fun Conversation(messages: List<Message>) {
        LazyColumn {
            items(messages) { message ->
                MessageCard(message)
            }
        }
    }