创建组件
接下来,创建一个名为“组件”的包,并在该包中添加一个名为“PhotoGrid”的新 Kotlin 文件。
接下来添加以下源代码:
package com.example.photogalleryexample.components
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.material.Card
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PhotoGrid(photos: List<Int>) {
LazyVerticalGrid(
cells = GridCells.Fixed(1),
content = {
items(photos.size) { index ->
Card(modifier = Modifier.height(300.dp)) {
Image(
painter = painterResource(id = photos.get(index)),
contentDescription = "Photo",
contentScale = ContentScale.FillBounds
)
}
}
}
)
}
由于懒惰的虚拟网格仍然是实验性的,因此您需要在可组合注释上方添加Optin。
由于我使用的图像非常大,我给出的网格单元格大小为1,但可以随意尝试这个数字。
Lazy用于防止性能问题,如果您打算显示大量图像,我强烈建议您使用它。
我还设置了照片以填充卡片的边界。
如果不使用它,创建组件是没有用的,所以接下来让我们编辑MainActivity.kt。
编辑主活动文件
要向用户实际显示照片网格,我们需要实际使用它。
更改“主要活动”的内容,使其类似于以下内容:
package com.example.photogalleryexample
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.photogalleryexample.ui.theme.PhotoGalleryExampleTheme
import com.example.photogalleryexample.components.PhotoGrid
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
PhotoGalleryExampleTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
MainScreen()
}
}
}
}
}
@Composable
fun MainScreen() {
val photos = listOf<Int>(
R.drawable.pexels_photo_12284667,
R.drawable.pexels_photo_13046458,
R.drawable.pexels_photo_13366951,
R.drawable.pexels_photo_13624924,
R.drawable.pexels_photo_13675780,
R.drawable.pexels_photo_9969158,
R.drawable.pexels_photo_5422596,
R.drawable.pexels_photo_13850240,
)
Scaffold() {
Column(modifier = Modifier.padding(20.dp)) {
PhotoGrid(photos = photos)
}
}
}
显然,您需要将照片列表替换为自己的可绘制内容。
网友评论