首页 > 解决方案 > 如何将文本和图像与自定义位置对齐?

问题描述

我已经尝试过下面提到的但我没有得到所需的输出。

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
){
    Text("NOTES", modifier = Modifier.align(Alignment.CenterHorizontally,) Text("Select Department",color =Color.Blue)}@ExperimentalFoundationApi
@Composable
fun MainScreen() {
    val images = (0..7).toList()
    LazyVerticalGrid(
        cells = GridCells.Fixed(3),
        contentPadding = PaddingValues(15.dp),
    ) {
        item {
            Column(modifier = Modifier.fillMaxSize(),
            horizontalAlignment =  Alignment.CenterHorizontally) {
                Image(ImageBitmap.imageResource(id = R.drawable.comp),
                    contentDescription = "",
                    modifier = Modifier
                        .width(100.dp)
                        .height(100.dp)
                        .padding(15.dp)
                        .clickable(
                            onClick = {  }
                        )
                )
                Text(
                    "BCA",
                    fontSize = 12.sp,
                    textAlign = TextAlign.Center,

                    )
            }
        }
        item {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Image(ImageBitmap.imageResource(id = R.drawable.chip),
                    contentDescription = "",
                    modifier = Modifier
                        .width(100.dp)
                        .height(100.dp)
                        .padding(15.dp)
                        .clickable(
                            onClick ={}
                        )

                )
                Text(
                    "IT",
                    fontSize = 12.sp,
                    textAlign = TextAlign.Center
                )
            }
        }}}

我使用网格布局是因为我需要以网格格式添加更多内容。

我得到这样的输出:

但我需要这样:

怎么做这样的?

标签: android-studiokotlinandroid-jetpack-compose

解决方案


推荐阅读