常用tailwind标签在jetpack compose中的实现

flex布局对齐

item-center

Column(
    horizontalAlignment = Alignment.CenterHorizontally // 垂直方向居中
)
// 或
Row(
    verticalAlignment = Alignment.CenterVertically // 水平方向居中
)

justify-

Row(
    horizontalArrangement = Arrangement.Center // 居中
    // 其他值：Start, End, SpaceBetween, SpaceEvenly, SpaceAround
)
Column(
    verticalArrangement = Arrangement.Center // 居中
)

边距

p-? m-?

Modifier.padding(16.dp)   // p-4（内边距）
Modifier.padding(horizontal = 16.dp) // px-4
Modifier.padding(vertical = 16.dp)   // py-4
Modifier.padding(top = 16.dp)        // pt-4

间隔

space-x/y

(vertical)/(horizontal)Arrangement.Arrangement.spacedBy(16.dp)

响应式高宽

w/h-?/?

Modifier
    .fillMaxHeight(0.5f) // h-1/2
    .fillMaxWidth(0.8f) // w-4/5

圆角处理

rounded-full

Modifier
    .clip(CircleShape) // 圆形裁剪
    .size(48.dp)       // 确保宽高相同

rounded-?

Modifier.clip(RoundedCornerShape(16?.dp)) 

溢出处理

overflow-hidden

Modifier.clipToBounds() // 裁剪溢出部分

overflow-scroll

Modifier.verticalScroll(rememberScrollState()) // 垂直滚动
Modifier.horizontalScroll(rememberScrollState()) // 水平滚动

可见度

opacity-?

Modifier.alpha(0.5f) // opacity-50 → alpha(0.5)

hidden

Modifier.size(0.dp) // hidden（完全移除布局空间）

bg-opacity

Color.Red.copy(alpha = 0.5f) // 直接在颜色中设置透明度

图片填充

object-cover

Image(
    painter = painterResource(id = R.drawable.image),
    contentDescription = null,
    contentScale = ContentScale.Crop, // 裁剪填充
    modifier = Modifier.fillMaxSize()
)

定位

relative (相对定位)

Modifier.offset(x = 10.dp, y = 10.dp) // 相对偏移

absolute (绝对定位)

Box {
    Text(
        text = "Absolute",
        modifier = Modifier
            .align(Alignment.TopEnd) // 在 Box 内绝对定位
    )
}

层叠

z-index

Modifier.zIndex(1f) // z-10 → zIndex(10f)

字体

text-xl?

Text(
    text = "Hello",
    style = MaterialTheme.typography.h4 // 直接使用预设字体
    // 或自定义大小：
    style = TextStyle(fontSize = 24.sp)
)

font-bold, italic

TextStyle(
    fontWeight = FontWeight.Bold, // font-bold
    fontStyle = FontStyle.Italic  // italic
)

阴影

shadow-?

Modifier.shadow(
  elevation = 8.dp,        // shadow-lg
  shape = RoundedCornerShape(8.dp),
  clip = true // 是否裁剪阴影到形状
)

边框

border

Modifier
    .border(
        width = 2.dp,           // border-2
        color = Color.Gray,     // border-gray-500
        shape = RoundedCornerShape(4.dp) // 可选圆角
    )

悬停效果

hover:bg-gray-100, active:scale-95

var isHovered by remember { mutableStateOf(false) }
Modifier
    .hoverable { isHovered = it }
    .background(if (isHovered) Color.LightGray else Color.White)
    .clickable { /* 点击事件 */ }
    .scale(if (isPressed) 0.95f else 1f) // 需要跟踪按压状态