Android Jetpack Compose - 组件分类：布局组件、交互组件、文本组件

一、布局组件

1、基本介绍

1. Box：叠加布局，类似 FrameLayout

2. Column：垂直线性布局，类似 LinearLayout（vertical）

3. Row：水平线性布局，类似 LinearLayout（horizontal）

4. ConstraintLayout：约束布局

2、演示

（1）Box

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center,
) {
    Text("test content")
}

Box(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = "content1",
        modifier = Modifier.align(Alignment.TopStart)
    )
    Text(
        text = "content2",
        modifier = Modifier.align(Alignment.TopCenter)
    )
    Text(
        text = "content3",
        modifier = Modifier.align(Alignment.TopEnd)
    )

    Text(
        text = "content4",
        modifier = Modifier.align(Alignment.CenterStart)
    )
    Text(
        text = "content5",
        modifier = Modifier.align(Alignment.Center)
    )
    Text(
        text = "content6",
        modifier = Modifier.align(Alignment.CenterEnd)
    )

    Text(
        text = "content7",
        modifier = Modifier.align(Alignment.BottomStart)
    )
    Text(
        text = "content8",
        modifier = Modifier.align(Alignment.BottomCenter)
    )
    Text(
        text = "content9",
        modifier = Modifier.align(Alignment.BottomEnd)
    )
}

（2）Column

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.LightGray)
        .padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = "test123", modifier = Modifier.padding(4.dp))
    Text(text = "test123test123", modifier = Modifier.padding(4.dp))
    Text(text = "test123test123test123", modifier = Modifier.padding(4.dp))
}

（3）Row

Row(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.LightGray)
        .padding(16.dp),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "1", modifier = Modifier.padding(4.dp))
    Text(text = "12", modifier = Modifier.padding(4.dp))
    Text(text = "123", modifier = Modifier.padding(4.dp))
}

（4）ConstraintLayout

ConstraintLayout(
    modifier = Modifier.fillMaxSize()
) {
    val (button, text, image) = createRefs()

    Button(onClick = {}, modifier = Modifier.constrainAs(button) {
        top.linkTo(parent.top) // button 的顶部链接到父布局的顶部
        start.linkTo(parent.start) // button 的左侧链接到父布局的左侧
    }) {
        Text("test button")
    }

    Text("test content", modifier = Modifier.constrainAs(text) {
        top.linkTo(
            button.bottom, margin = 16.dp
        ) // text 的顶部链接到 button 的底部，底部距离 button 底部 16.dp
        start.linkTo(parent.start) // text 的左侧链接到父布局的左侧
        end.linkTo(parent.end) // text 的右侧链接到父布局的右侧
    })

    Image(
        painter = painterResource(R.drawable.ic_launcher_background),
        contentDescription = null,
        modifier = Modifier
            .size(100.dp)
            .constrainAs(image) {
                top.linkTo(text.bottom)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
    )
}

---

二、交互组件

1、基本介绍

1. Button：按钮

2. TextField：文本输入框

3. Checkbox：复选框

4. RadioButton：单选框

5. Switch：开关

6. Slider：滑块

2、演示

（1）Button

val context = LocalContext.current

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Button(onClick = {
        Toast.makeText(context, "Button Clicked", Toast.LENGTH_SHORT).show()
    }) {
        Text("Button")
    }

    FilledTonalButton(modifier = Modifier.padding(top = 16.dp), onClick = {
        Toast.makeText(context, "FilledTonalButton Clicked", Toast.LENGTH_SHORT).show()
    }) {
        Text("FilledTonalButton")
    }

    OutlinedButton(modifier = Modifier.padding(top = 16.dp), onClick = {
        Toast.makeText(context, "OutlinedButton Clicked", Toast.LENGTH_SHORT).show()
    }) {
        Text("OutlinedButton")
    }

    ElevatedButton(modifier = Modifier.padding(top = 16.dp), onClick = {
        Toast.makeText(context, "ElevatedButton Clicked", Toast.LENGTH_SHORT).show()
    }) {
        Text("ElevatedButton")
    }

    TextButton(modifier = Modifier.padding(top = 16.dp), onClick = {
        Toast.makeText(context, "TextButton Clicked", Toast.LENGTH_SHORT).show()
    }) {
        Text("TextButton")
    }
}

（2）TextField

val context = LocalContext.current

var text by remember { mutableStateOf("") }

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("留言") },
        placeholder = { Text("请输入留言") }
    )

    Button(
        onClick = {
            Toast.makeText(context, text, Toast.LENGTH_SHORT).show()
        }
    ) {
        Text("展示留言")
    }
}

（3）Checkbox

val context = LocalContext.current

var checked by remember { mutableStateOf(true) }

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Checkbox(
        checked = checked,
        onCheckedChange = {
            checked = it
            Toast.makeText(context, "checked: $checked", Toast.LENGTH_SHORT).show()
        }
    )
}

（4）RadioButton

var selected by remember { mutableStateOf(false) }

RadioButton(
    selected = selected,
    onClick = { selected = true }
)

（5）Switch

var checked by remember { mutableStateOf(true) }

Box(
    modifier = Modifier.fillMaxSize()
) {
    Switch(
        modifier = Modifier.align(Alignment.Center),
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

（6）Slider

var sliderPosition by remember { mutableFloatStateOf(0f) }

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Slider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it }
    )
    Text(text = sliderPosition.toString())
}

---

三、文本组件

1、基本介绍

1. Text：基础文本

2. AnnotatedString：富文本

2、演示

（1）Text

Box(
    modifier = Modifier.fillMaxSize()
) {
    Text("test content", modifier = Modifier.align(Alignment.Center), fontSize = 20.sp)
}

（2）AnnotatedString

Box(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        buildAnnotatedString {
            withStyle(SpanStyle(color = Color.Red, fontSize = 20.sp)) { append("test") }
            append(" content")
        },
        modifier = Modifier.align(Alignment.Center)
    )
}