@Composable、Modifier、三大布局（Column/Row/Box）、基础组件（Text/Image/Icon/ 网络图片）

核心思想

声明式 UI 框架

定义 State
↓
根据 State 描述 UI
↓
State 改变
↓
Compose 自动更新 UI

setContent

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // Compose UI
            Text("Hello Android")
        }
    }
}

执行流程

@ComposableMainActivity
↓
onCreate()
↓
setContent {}
↓
Compose UI

@Composable

告诉 Compose：这个函数用于构建 UI。

@Composable
fun Greeting() {
    Text("Hello Android")
}

常用组件

Text

Text(
    text = "Hello",
    fontSize = 20.sp,
    fontWeight = FontWeight.Bold
)

Button

Button(
    onClick = {
        println("点击按钮")
    }
) {
    Text("点击")
}

Column

Column {
    Text("第一行")
    Text("第二行")
    Button(
        onClick = {}
    ) {
        Text("按钮")
    }
}

Row

Row {
    Text("姓名：")
    Text("张三")
}

Box

Box {
    Text("底层")
    Text("上层")
}

图片 Image

Image(
    painter = painterResource(
        id = R.drawable.logo
    ),
    contentDescription = "Logo"
)

输入框 TextField

@Composable
fun InputDemo() {

    var name by remember {
        mutableStateOf("")
    }

    TextField(
        value = name,
        onValueChange = {
            name = it
        },
        label = {
            Text("请输入姓名")
        }
    )
}

Modifier修饰符

设置尺寸、间距、背景、点击、位置等 UI 属性。

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp) // 四周增加 16dp 间距
)

// 链式调用
Modifier
    .fillMaxWidth()
    .height(50.dp)
    .padding(16.dp)

// 例子
Button(
    onClick = {},
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Text("登录")
}

dp 和 sp

dp	sp
宽度、高度、padding、margin 类似效果	字体大小

Text(
    text = "Hello",
    fontSize = 18.sp,
    modifier = Modifier.padding(16.dp)
)

Color

@Composable
fun ColorDemo() {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 方式1：预设颜色
        Box(modifier = Modifier.size(60.dp).background(Color.Red))

        Spacer(modifier = Modifier.height(8.dp))

        // 方式2：ARGB 十六进制（最常用）
        // 0xFF=完全不透明，1A73E8=RGB色值
        Box(modifier = Modifier.size(60.dp).background(Color(0xFF1A73E8)))

        Spacer(modifier = Modifier.height(8.dp))

        // 方式3：带透明度
        Box(modifier = Modifier.size(60.dp).background(Color.Black.copy(alpha = 0.3f)))
    }
}

常用 Modifier 速查表

Modifier
    // 尺寸
    .width(100.dp)        // 固定宽度
    .height(50.dp)        // 固定高度
    .size(48.dp)          // 宽高相同
    .fillMaxWidth()       // 填满父容器宽度
    .fillMaxSize()        // 填满父容器
    .weight(1f)           // 按比例分配空间（仅在 Row / Column 中）

    // 间距
    .padding(16.dp)                               // 四周内边距
    .padding(horizontal = 16.dp, vertical = 8.dp) // 分别设置水平、垂直内边距

    // 外观
    .background(Color.White)                     // 背景色
    .clip(RoundedCornerShape(8.dp))              // 圆角裁剪
    .border(1.dp, Color.Gray, RoundedCornerShape(8.dp)) // 边框

    // 交互
    .clickable { onClick() }                     // 点击事件

    // 其他
    .aspectRatio(2.65f)                          // 宽高比（宽:高 = 2.65:1）
    .offset(x = 10.dp, y = -4.dp)                // 偏移

Modifier 从左到右依次应用

padding 在前，background 在后：padding 在背景外面，背景区域缩小。

background 在前，padding 在后：padding 在背景里面，背景铺满，内部留出空白。

例子（搜索框圆角）

// 先 clip 裁剪圆角，再绘制背景色，背景会跟着裁剪后的圆角形状显示。
Modifier.clip(RoundedCornerShape(8.dp)).background(Color.White)

结构

LazyColumn

Android Compose 中非常常见的列表组件

val names = listOf(
    "张三",
    "李四",
    "王五"
)

LazyColumn {
    items(names) { name ->
        Text(name)
    }
}

Scaffold

搭建常见页面结构

顶部标题栏 页面内容 底部导航 悬浮按钮

Scaffold(
    topBar = {
        Text("首页")
    }
) { paddingValues ->

    Column(
        modifier = Modifier.padding(paddingValues)
    ) {
        Text("页面内容")
    }
}

MaterialTheme

Compose 通常结合 Material Design 使用。

MaterialTheme {
    Text("Hello")
}

常见结构

setContent {
    MyApplicationTheme {
        MyPage()
    }
}

状态

状态改变 → UI 更新

@Composable
fun Counter() {

    var count by remember {
        mutableStateOf(0)
    }

    Button(
        onClick = {
            count++
        }
    ) {
        Text("点击次数：$count")
    }
}

remember

让 Compose 在重新执行 Composable 时记住这个状态

remember {
    mutableStateOf(0)
}

mutableStateOf

表示创建一个 Compose 可以观察的状态。

var count by remember {
    mutableStateOf(0)
}

重组 Recomposition

状态改变，Compose 自动重新渲染受影响的界面。

流程

State 改变
↓
Compose 检测变化
↓
重新执行相关 Composable
↓
更新 UI

完整入门页面

@Composable
fun UserPage() {

    var count by remember {
        mutableStateOf(0)
    }

    Column(
        modifier = Modifier.padding(16.dp)
    ) {

        Text(
            text = "Compose 入门",
            fontSize = 24.sp
        )

        Text(
            text = "点击次数：$count"
        )

        Button(
            onClick = {
                count++
            }
        ) {
            Text("点击")
        }
    }
}