如何在 jetpack compose 中使用 lazy column 和 lazyverticalgrid？

Question

I wanted a layout similar to

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

this is my compose code related to the issue

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)
        )
    }
}

When I try to achieve it in jetpack compose. The list scrolls under it's own layout but doesn't expand making the whole scrolling. Horizontal one is fine but the vertical one tends to have a small height not making it the sameheight as the list itself.

Needed a view something like this so that the view can expand as well as scroll with the layout.

Answer 1

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

something like this you can create fr lazycolum

for gride you can try this(Not sure for this) is it right or not

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

)

Answer 2

Don't forget to import this library explicitly

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