Compose 对齐方式

package com.abc.robot01.activity.compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.abc.robot01.R

class AlignmentDemo : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val scrollState = rememberScrollState()
            Column(modifier = Modifier
                .verticalScroll(scrollState)
                .fillMaxSize()) {
                BoxAlignmentExample()
                Spacer(modifier = Modifier.height(2.dp))
                BoxTopStartAlignmentExample()
                Spacer(modifier = Modifier.height(2.dp))
                BoxBottomEndAlignmentExample()
                Spacer(modifier = Modifier.height(2.dp))
                TwoImagesInBox()
                Spacer(modifier = Modifier.height(2.dp))
            }        }
    }
}

@Composable
fun BoxAlignmentExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Centered", color = Color.Black)
    }
}

@Composable
fun BoxTopStartAlignmentExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.LightGray),
        contentAlignment = Alignment.TopStart
    ) {
        Text(text = "Top Start", color = Color.Black)
    }
}

@Composable
fun BoxBottomEndAlignmentExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.LightGray),
        contentAlignment = Alignment.BottomEnd
    ) {
        Text(text = "Bottom End", color = Color.Black)
    }
}

@Composable
fun TwoImagesInBox() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray) // 背景色用于示例
    ) {
        // Image on the left
        Image(
            painter = painterResource(id = R.drawable.close), // 替换为你的图片资源
            contentDescription = "Left Image",
            modifier = Modifier
                .align(Alignment.CenterStart)
                .padding(start = 16.dp)
                .size(100.dp) // 设置图片大小
        )

        // Image on the right
        Image(
            painter = painterResource(id = R.drawable.open), // 替换为你的图片资源
            contentDescription = "Right Image",
            modifier = Modifier
                .align(Alignment.CenterEnd)
                .padding(end = 16.dp)
                .size(100.dp) // 设置图片大小
        )
    }
}








  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Compose中实现居中的方式有多种。你可以使用ConstraintLayout或使用Row和Modifier来实现居中效果。 一种简单的方法是使用ConstraintLayout。可以在Compose中使用ConstraintLayout的modifier设置水平和垂直居中对齐。例如,你可以使用以下代码实现水平居中和垂直居中对齐: ```kotlin ConstraintLayout(modifier = Modifier.fillMaxSize()) { val (text) = createRefs() Text( text = "居中的文本", modifier = Modifier.constrainAs(text) { centerTo(parent) } ) } ``` 另一种方法是使用Row和Modifier。你可以在Row中使用horizontalArrangement参数和verticalAlignment参数来设置水平和垂直居中对齐。例如,你可以使用以下代码实现水平居中和垂直居中对齐: ```kotlin Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically ) { Text(text = "居中的文本") } ``` 还可以使用Modifier的padding和align参数来实现居中。例如,你可以使用以下代码实现水平居中和垂直居中对齐: ```kotlin Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Text( text = "居中的文本", modifier = Modifier .padding(start = 15.dp, top = 18.dp, end = 15.dp, bottom = 18.dp) .fillMaxWidth() ) } ``` 希望这些方法能帮助你实现Compose中的居中效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值