Android中Compose常用组件及布局使用方法示例详解

Text(
    text = "Hello Compose", // 必填，显示文本
    color = Color.Blue,      // 文字颜色
    fontSize = 24.sp,        // 字体大小（注意使用.sp单位）
    fontStyle = FontStyle.Italic, // 字体样式（斜体）
    fontWeight = FontWeight.Bold, // 字体粗细
    modifier = Modifier
        .padding(16.dp)     // 内边距
        .background(Color.LightGray) // 背景色
)

[浅灰色背景]
  Hello Compose（蓝色，24sp，粗体，斜体）

val context = LocalContext.current
Button(
    onClick = { // 必填，点击回调
        Toast.makeText(context, "Clicked!", Toast.LENGTH_SHORT).show()
    },
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Red, // 按钮背景
        contentColor = Color.White   // 内容颜色
    ),
    modifier = Modifier.padding(8.dp),
    enabled = true // 是否启用
) {
    Icon( // 图标
        imageVector = Icons.Filled.Favorite,
        contentDescription = "Like"
    )
    Spacer(Modifier.width(8.dp)) // 间距
    Text("Like") // 按钮文字
}

[红色按钮] ♥ Like（白色文字）
点击后弹出Toast

var text by remember { mutableStateOf("") } // 关键：状态管理
TextField(
    value = text, // 当前值（绑定状态）
    onValueChange = { newText -> // 输入变化回调
        text = newText 
    },
    label = { Text("Username") }, // 浮动标签
    placeholder = { Text("Enter your name") }, // 提示文字
    leadingIcon = { // 前缀图标
        Icon(Icons.Filled.Person, null) 
    },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Text, // 键盘类型
        imeAction = ImeAction.Done        // 键盘动作
    ),
    modifier = Modifier.fillMaxWidth()
)

// 加载本地资源
Image(
    painter = painterResource(R.drawable.dog),
    contentDescription = "Cute dog", // 必填（无障碍）
    modifier = Modifier
        .size(120.dp)
        .clip(CircleShape), // 圆形裁剪
    contentScale = ContentScale.Crop // 裁剪模式
)
// 加载网络图片（Coil）
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Network image",
    placeholder = { // 加载中显示
        CircularProgressIndicator()
    },
    error = { // 错误显示
        Icon(Icons.Filled.Error, null)
    }
)

// 圆形进度条
CircularProgressIndicator(
    progress = 0.7f, // 进度值（0-1）
    color = Color.Green,
    strokeWidth = 8.dp,
    modifier = Modifier.size(50.dp)
)
// 线性进度条
LinearProgressIndicator(
    progress = 0.4f,
    backgroundColor = Color.LightGray,
    color = MaterialTheme.colors.primary,
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
)

Column(
    modifier = Modifier
        .fillMaxSize() // 占满父布局
        .background(Color.LightGray),
    horizontalAlignment = Alignment.CenterHorizontally, // 水平居中
    verticalArrangement = Arrangement.SpaceEvenly // 等间距分布
) {
    Text("Item 1")
    Button(onClick = {}) { Text("Button") }
    Image(painterResource(R.drawable.icon), null)
}

┌───────────────────────────┐
│                           │
│          Item 1           │
│                           │
│         [ Button ]        │
│                           │
│          [图标]           │
│                           │
└───────────────────────────┘
（等间距分布）

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.LightGray)
        .padding(16.dp)
        .horizontalScroll(rememberScrollState()), // 水平滚动
    verticalAlignment = Alignment.CenterVertically, // 垂直居中
    horizontalArrangement = Arrangement.SpaceBetween // 两端对齐
) {
    Icon(Icons.Filled.Menu, "Menu")
    Text("Title", fontWeight = FontWeight.Bold)
    Icon(Icons.Filled.Search, "Search")
}

┌─[菜单]─────标题─────[搜索]─┐
（两端对齐，可横向滚动）

Box(
    modifier = Modifier
        .size(200.dp)
        .background(Color.Blue)
) {
    Image( // 底层
        painter = painterResource(R.drawable.bg),
        contentDescription = "Background",
        modifier = Modifier.fillMaxSize()
    )
    Text( // 中层
        "Overlay Text",
        color = Color.White,
        modifier = Modifier
            .align(Alignment.Center)
            .padding(8.dp)
    )
    Button( // 顶层
        onClick = {},
        modifier = Modifier
            .align(Alignment.BottomEnd)
            .padding(16.dp)
    ) {
        Text("Action")
    }
}

┌───────────────────────────┐
│   [背景图片]              │
│                           │
│        居中文字           │
│                           │
│                   [按钮]  │
└───────────────────────────┘
（三层叠加）

// 状态声明
var text by remember { mutableStateOf("") }
// 状态绑定
TextField(
    value = text, // 绑定状态值
    onValueChange = { newText -> 
        text = newText // 更新状态
    }
)
/*
1. 初始状态 text = ""
2. 用户输入 "A" -> 触发 onValueChange
3. text 更新为 "A"
4. 状态变化触发重组（Recomposition）
5. TextField 根据新值刷新界面
*/

Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
) { /* 长内容 */ }

LazyColumn {
    item { Header() }
    items(100) { index -> // 只渲染可见项
        ListItem(index)
    }
    item { Footer() }
}

Box(modifier = Modifier.fillMaxSize()) {
    // 左上角
    Text("TopStart", Modifier.align(Alignment.TopStart))
    // 右上角
    Button(onClick = {}, Modifier.align(Alignment.TopEnd)) { ... }
    // 正中央
    Image(..., Modifier.align(Alignment.Center))
    // 左下角
    Icon(..., Modifier.align(Alignment.BottomStart))
    // 右下角
    CircularProgressIndicator(Modifier.align(Alignment.BottomEnd))
}

@Composable
fun AdaptiveLayout() {
    // 根据屏幕宽度选择布局
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp
    if (screenWidth < 600.dp) {
        VerticalLayout() // 小屏：垂直布局
    } else {
        HorizontalLayout() // 大屏：水平布局
    }
}