Android开发 kotlin jetpack compse 2026最新教程

王家视频教程图书馆2026-01-06 8:16

Row(){ } 行布局

Kotlin 复制代码 
Row(){
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
    }

Column(){ } 列布局

Kotlin 复制代码 
Column(){
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
    }

Box(){ } 层叠布局

Kotlin 复制代码 
Box(modifier=modifier.background(Color.Red).height(500.dp).width(500.dp)){

        Box(modifier=modifier.background(Color.Blue).height(400.dp).width(400.dp)){

            Box(modifier=modifier.background(Color.Cyan).height(300.dp).width(300.dp)){


                Text("hello kotlin !!! ")


            }


        }


    }

Jetpack Compose 组件学习清单（按优先级排序）

基础核心组件

Text 文本显示组件 的所有属性 加中文注释，写一个例子

Kotlin 复制代码 
Text(
            text = "Hello, Jetpack Compose!", // 要显示的文本内容（String 或 AnnotatedString）
            modifier = Modifier, // 用于布局、点击等修饰符
            color = Color.Blue, // 文字颜色
            fontSize = 20.sp, // 字体大小（TextUnit 类型，常用 sp）
            fontStyle = FontStyle.Italic, // 字体样式：正常/斜体
            fontWeight = FontWeight.Bold, // 字体粗细：Bold、Normal 等
            fontFamily = FontFamily.SansSerif, // 字体族：SansSerif、Serif、Monospace 或自定义
            letterSpacing = 1.sp, // 字符间距
            textDecoration = TextDecoration.Underline, // 文字装饰：下划线、删除线等
            textAlign = TextAlign.Center, // 文本对齐方式：Left/Center/Right/Justify 等
            lineHeight = 28.sp, // 行高（行间距）
            maxLines = 2, // 最大显示行数，超过会被截断
            overflow = TextOverflow.Ellipsis, // 超出时的处理方式：Ellipsis（...）、Clip、Fade
            softWrap = true, // 是否自动换行（true 会换行，false 不换行可能被截断）
            onTextLayout = { textLayoutResult ->
                // 布局完成回调，可用于获取文本尺寸、行数等信息
                // 例如：Log.d("TextLayout", "Line count: ${textLayoutResult.lineCount}")
            },
            style = TextStyle( // 整体文本样式，可覆盖上述单独设置的属性
                color = Color.Red,
                fontSize = 18.sp,
                fontWeight = FontWeight.Normal
                // 注意：如果同时设置了 style 和单独属性（如 color），单独属性优先级更高
            ),
            // 如果需要富文本，可使用 AnnotatedString
            // text = AnnotatedString("Styled Text"),
        )

Image 图片显示组件

Kotlin 复制代码 
package com.example.example

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {
                        GreetingWithClickableImage(name = "Android")

                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

//不用抽离
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {

    // 获取上下文用于 Toast
    val context = LocalContext.current

     //modifier.fillMaxSize()填充所有屏幕
    Column(modifier.fillMaxSize().background(Color.Red)) {

        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background), // 图片资源（本地 drawable）
            contentDescription = "示例图片", // 无障碍描述（必须提供，除非装饰性图片设为 null）
            modifier = Modifier
                .width(150.dp) // 设置图片宽度为150dp
                .height(200.dp) // 设置图片高度为200dp
                .clickable {
                    // 点击时显示 Toast
                    Toast.makeText(context, "你点击了一个图片", Toast.LENGTH_SHORT).show()
                },
            alignment = androidx.compose.ui.Alignment.Center, // 图片在容器内的对齐方式
            contentScale = ContentScale.Fit, // 缩放模式：保持比例完整显示
            colorFilter = ColorFilter.tint(Color.White), // 颜色过滤器，例如给图片整体着色（如变蓝）

        )

    }



}

// 如果你希望抽离点击逻辑，可以这样做：
@Composable
fun ClickableImage(onImageClicked: () -> Unit) {
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "抽离示例图片方法",
        modifier = Modifier
            .width(150.dp)
            .height(200.dp)
            .clickable(onClick = onImageClicked),
        alignment = androidx.compose.ui.Alignment.Center,
        contentScale = ContentScale.Fit,
        colorFilter = ColorFilter.tint(Color.Blue)
    )
}

//抽离的方法

@Composable
fun GreetingWithClickableImage(name: String, modifier: Modifier = Modifier) {
    // 获取上下文用于 Toast
    val context = LocalContext.current

    // 只返回一个可点击的图片，不包含布局
    ClickableImage {
        Toast.makeText(context, "你点击了 $name 的图片", Toast.LENGTH_SHORT).show()
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

Icon 图标组件

Kotlin 复制代码 
package com.example.example

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {


                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val context = LocalContext.current

    // 不再 fillMaxSize，交给外层控制
    Column(modifier = modifier) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(Icons.Default.Home, contentDescription = "主页", tint = Color.Blue)

            Icon(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                contentDescription = "喜欢",
                tint = Color.Red
            )

            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = "收藏",
                modifier = Modifier.size(48.dp),
                tint = Color.Magenta
            )

            Icon(Icons.Default.Email, contentDescription = "邮箱", tint = Color.Gray)
            Spacer(modifier = Modifier.width(8.dp))
            Text("example@gmail.com")

            // ✅ 正确的可点击图标
            Icon(
                imageVector = Icons.Default.Settings,
                contentDescription = "设置",
                tint = Color.Black,
                modifier = Modifier
                    .size(32.dp)
                    .clickable {
                        Toast.makeText(context, "打开设置", Toast.LENGTH_SHORT).show()
                    }
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

Button 基础按钮

Kotlin 复制代码 
package com.example.example

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {


                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val context = LocalContext.current


    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Jetpack Compose 按钮大全", fontWeight = FontWeight.Bold, fontSize = 20.sp)

        // 1. 基础主按钮（Filled Button）
        Button(
            onClick = {
                Toast.makeText(context, "主按钮被点击！", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("主操作按钮")
        }

        // 2. 带 Icon 的主按钮
        Button(
            onClick = {
                Toast.makeText(context, "收藏成功！", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier.fillMaxWidth(),
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFE91E63))
        ) {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = "收藏",
                modifier = Modifier.size(18.dp)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text("收藏")
        }

        // 3. OutlinedButton（边框按钮）
        OutlinedButton(
            onClick = {
                Toast.makeText(context, "边框按钮被点击！", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("次要操作")
        }

        // 4. TextButton（文字按钮）
        TextButton(
            onClick = {
                Toast.makeText(context, "取消操作", Toast.LENGTH_SHORT).show()
            }
        ) {
            Text("取消", color = Color.Gray)
        }

        // 5. 自定义圆角 & 颜色
        Button(
            onClick = { /* 自定义样式 */ },
            modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(24.dp), // 超大圆角
            colors = ButtonDefaults.buttonColors(
                containerColor = Color(0xFF2196F3),
                contentColor = Color.White
            )
        ) {
            Text("圆角蓝色按钮")
        }

        // 6. 禁用状态（自动变灰）
        Button(
            onClick = { /* 不会触发 */ },
            enabled = false, // 禁用
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("禁用按钮")
        }


        // 8. 小尺寸按钮（紧凑型）
        Button(
            onClick = { Toast.makeText(context, "小按钮", Toast.LENGTH_SHORT).show() },
            modifier = Modifier.height(40.dp),
            contentPadding = PaddingValues(horizontal = 12.dp, vertical = 8.dp)
        ) {
            Text("小按钮", fontSize = 14.sp)
        }

        Button(
            onClick = {
                Toast.makeText(context, "设置宽高 + 圆角 + 颜色", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier
                .height(100.dp)
                .width(100.dp),
            shape = RoundedCornerShape(12.dp), // 👈 设置圆角（12dp）
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Black,   // 👈 背景颜色
                contentColor = Color.Blue      // 👈 文字/内容颜色
            )
        ) {
            Text("按钮 Android", fontSize = 20.sp) // 文字太长会溢出，建议用单字或图标
        }



    }


}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

TextField 文本输入框

Kotlin 复制代码 
package com.example.example
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {


                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    var customText by remember { mutableStateOf("") }

    TextField(
        value = customText,
        onValueChange = { customText = it },
//        label = { Text("自定义颜色") },
        colors = TextFieldDefaults.colors(
            // ✅ 背景色（聚焦 / 未聚焦）
            focusedContainerColor = Color(0xFFF5F5F5),
            unfocusedContainerColor = Color(0xFFE0E0E0),

            // ✅ 下划线颜色（指示器）
            focusedIndicatorColor = Color.Green,
            unfocusedIndicatorColor = Color.Gray,

            // ✅ 光标颜色
            cursorColor = Color.Red,

            // ✅ 文本选中高亮色（可选）
            selectionColors = TextSelectionColors(
                handleColor = Color.Red,               // 选择手柄颜色
                backgroundColor = Color.Red.copy(alpha = 0.3f) // 选中文本背景
            ),

            // ✅ 文本颜色（可选，默认继承主题）
            focusedTextColor = Color.Black,
            unfocusedTextColor = Color.DarkGray,

            // ✅ 标签（label）颜色（可选）
            focusedLabelColor = Color.Blue,
            unfocusedLabelColor = Color.Gray
        ),
        modifier = Modifier.fillMaxWidth()
    )

}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

BasicTextField 基础文本输入框（自定义性更强）

Kotlin 复制代码 
package com.example.example
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {


                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // 1. 状态管理：使用 TextFieldValue 支持更复杂的输入（如选中文本、光标位置）
    var textFieldValue by remember { mutableStateOf(TextFieldValue("")) }

    // 2. 是否获得焦点（用于自定义聚焦样式）
    var isFocused by remember { mutableStateOf(false) }

    // 3. 自定义文本样式
    val textStyle = TextStyle(
        color = if (isFocused) Color.Blue else Color.Black,
        fontSize = 16.sp,
        lineHeight = 20.sp
    )

    BasicTextField(
        // ────────────────────────
        // 🔹 value: 当前输入内容（必须是 TextFieldValue 类型）
        // ────────────────────────
        value = textFieldValue,

        // ────────────────────────
        // 🔹 onValueChange: 内容变化回调（必须更新状态！）
        // 注意：这里接收的是 TextFieldValue，包含文本、选择范围、光标等
        // ────────────────────────
        onValueChange = { newValue ->
            // 可在此处添加输入验证、格式化等逻辑
            // 例如：只允许数字
            // if (newValue.text.all { it.isDigit() }) {
            textFieldValue = newValue
            // }
        },

        // ────────────────────────
        // 🔹 modifier: 布局与交互修饰符
        // ────────────────────────
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .border(
                width = 2.dp,
                color = if (isFocused) Color.Blue else Color.Gray,
                shape = androidx.compose.foundation.shape.RoundedCornerShape(8.dp)
            )
            .background(Color(0xFFF9F9F9))
            .padding(horizontal = 12.dp, vertical = 8.dp)
            // 监听焦点变化，用于更新边框/颜色
            .onFocusChanged { focusState ->
                isFocused = focusState.isFocused
            },

        // ────────────────────────
        // 🔹 textStyle: 文本显示样式（颜色、字体、大小等）
        // ────────────────────────
        textStyle = textStyle,

        // ────────────────────────
        // 🔹 keyboardOptions: 键盘行为配置
        // ────────────────────────
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Text,      // 键盘类型：文本/数字/邮箱等
            imeAction = ImeAction.Done,           // 软键盘"完成"按钮行为
            capitalization = androidx.compose.ui.text.input.KeyboardCapitalization.Sentences // 首字母大写
        ),

        // ────────────────────────
        // 🔹 keyboardActions: 软键盘动作回调（如点击"完成"）
        // ────────────────────────
        keyboardActions = KeyboardActions(
            onDone = {
                // 处理"完成"点击，例如隐藏键盘或提交
                // context?.hideKeyboard()
            }
        ),

        // ────────────────────────
        // 🔹 visualTransformation: 视觉变换（如密码掩码）
        // 默认为 VisualTransformation.None
        // ────────────────────────
        visualTransformation = VisualTransformation.None,

        // ────────────────────────
        // 🔹 onTextLayout: 布局完成回调（用于滚动、高亮等高级功能）
        // ────────────────────────
        onTextLayout = { textLayoutResult: TextLayoutResult ->
            // 可获取行高、字符位置等信息
            // 例如：textLayoutResult.getLineCount()
        },

        // ────────────────────────
        // 🔹 cursorBrush: 自定义光标颜色/画笔
        // ────────────────────────
        cursorBrush = androidx.compose.ui.graphics.Brush.verticalGradient(
            colors = listOf(Color.Red, Color.Magenta)
        ),

        // ────────────────────────
        // 🔹 decorationBox: 自定义装饰层（标签、图标、提示文字等）
        // 这是实现"带 label 的 BasicTextField"的关键！
        // ────────────────────────
        decorationBox = { innerTextField ->
            // innerTextField 是 Composable，代表输入区域本身
            Box(modifier = Modifier.fillMaxWidth()) {
                // 显示提示文字（placeholder）
                if (textFieldValue.text.isEmpty()) {
                    Text(
                        text = "请输入内容...",
                        style = textStyle.copy(color = Color.Gray),
                        modifier = Modifier.padding(start = 2.dp)
                    )
                }
                // 必须调用 innerTextField() 来渲染实际输入框
                innerTextField()
            }
        },

        // ────────────────────────
        // 🔹 maxLines / minLines: 控制行数（默认单行）
        // 注意：BasicTextField 默认单行，设 maxLines > 1 可启用多行
        // ────────────────────────
        maxLines = 1,

        // ────────────────────────
        // 🔹 singleLine: 是否强制单行（即使换行符也会忽略）
        // 通常与 maxLines=1 配合使用
        // ────────────────────────
        singleLine = true,

        // ────────────────────────
        // 🔹 enabled: 是否启用输入（禁用时不可编辑）
        // ────────────────────────
        enabled = true,

        // ────────────────────────
        // 🔹 readOnly: 只读模式（可聚焦但不可编辑）
        // ────────────────────────
        readOnly = false
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

OutlinedTextField 带边框的文本输入框

Kotlin 复制代码 
package com.example.example
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {


                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // 1. 普通文本输入（用户名）
    var username by remember { mutableStateOf("") }

    // 2. 邮箱输入（带验证）
    var email by remember { mutableStateOf("") }
    val isEmailValid = email.contains("@") && email.contains(".")

    // 3. 密码输入（支持切换明文/密文）
    var password by remember { mutableStateOf("") }
    var passwordVisible by remember { mutableStateOf(false) }

    // 4. 多行文本输入（评论）
    var comment by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        // ────────────────────────
        // 1. 基础 TextField：带 label 和 placeholder
        // ────────────────────────
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("用户名") }, // 输入框上方的浮动标签
            placeholder = { Text("请输入您的用户名") }, // 空时显示的提示文字
            modifier = Modifier.fillMaxWidth()
        )

        // ────────────────────────
        // 2. 带图标的邮箱输入框 + 错误状态
        // ────────────────────────
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("邮箱") },
            placeholder = { Text("example@gmail.com") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.Email,
                    contentDescription = "邮箱图标"
                )
            },
            // 当邮箱格式不正确时显示错误
            isError = email.isNotEmpty() && !isEmailValid,
            supportingText = {
                if (email.isNotEmpty() && !isEmailValid) {
                    Text(
                        text = "请输入有效的邮箱地址",
                        color = MaterialTheme.colorScheme.error
                    )
                }
            },
            // 设置键盘类型为邮箱
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
            modifier = Modifier.fillMaxWidth()
        )

        // ────────────────────────
        // 3. 密码输入框：带"眼睛"图标切换明文/密文
        // ────────────────────────
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("密码") },
            visualTransformation = if (passwordVisible) {
                VisualTransformation.None // 显示明文
            } else {
                PasswordVisualTransformation() // 显示为 ••••
            },
            trailingIcon = {
                IconButton(onClick = { passwordVisible = !passwordVisible }) {
                    Image(
                        painter = painterResource(id = if (passwordVisible) R.drawable.ic_launcher_foreground else R.drawable.ic_launcher_background),
                        contentDescription = if (passwordVisible) "隐藏密码" else "显示密码",
                        modifier = Modifier.size(24.dp) // 可以根据需要调整大小
                    )
                }
            },
            singleLine = true,
            modifier = Modifier.fillMaxWidth()
        )

        // ────────────────────────
        // 4. 多行文本输入（如评论、描述）
        // ────────────────────────
        OutlinedTextField(
            value = comment,
            onValueChange = { comment = it },
            label = { Text("评论") },
            placeholder = { Text("写下您的想法...") },
            maxLines = 4, // 最多显示 4 行
            minLines = 2, // 至少显示 2 行
            // 不设 singleLine = true，允许多行
            modifier = Modifier.fillMaxWidth()
        )

        // ────────────────────────
        // 5. 自定义颜色的 TextField（非 Outlined）
        // ────────────────────────
        var customText by remember { mutableStateOf("") }
        OutlinedTextField(
            value = customText,
            onValueChange = { customText = it },
            label = { Text("自定义颜色") },
            colors = OutlinedTextFieldDefaults.colors(
                focusedContainerColor = Color(0xFFF5F5F5),
                unfocusedContainerColor = Color(0xFFF5F5F5),
                focusedBorderColor = Color.Green,
                unfocusedBorderColor = Color.Gray,
                cursorColor = Color.Red
            ),
            modifier = Modifier.fillMaxWidth()
        )
    }

}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

布局容器组件

Column 垂直布局容器

Kotlin 复制代码 
package com.example.example
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {


                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // Column：垂直布局容器（默认从上到下排列子项）
    Column(
        // ────────────────────────
        // 🔹 modifier: 布局修饰符（大小、边距、背景等）
        // ────────────────────────
        modifier = Modifier
            .fillMaxSize()          // 占满父容器
            .padding(16.dp)         // 外边距
            .background(Color.LightGray), // 背景色（便于观察布局范围）

        // ────────────────────────
        // 🔹 verticalArrangement: 子项在主轴（垂直方向）上的排列方式
        // 可选值：
        // - Arrangement.Top（默认）
        // - Arrangement.Center
        // - Arrangement.Bottom
        // - Arrangement.SpaceBetween
        // - Arrangement.SpaceAround
        // - Arrangement.SpaceEvenly
        // ────────────────────────
        verticalArrangement = Arrangement.spacedBy(12.dp), // 子项之间固定间距 12dp
        // 或使用：Arrangement.Center（整体居中），但通常配合 fillMaxHeight()

        // ────────────────────────
        // 🔹 horizontalAlignment: 子项在交叉轴（水平方向）上的对齐方式
        // 可选值：
        // - Alignment.Start（左对齐，默认）
        // - Alignment.CenterHorizontally（水平居中）
        // - Alignment.End（右对齐）
        // - Alignment.Center（等价于 CenterHorizontally）
        // ────────────────────────
        horizontalAlignment = Alignment.CenterHorizontally,

        // ────────────────────────
        // 🔹 reverseLayout: 是否反转排列顺序（从下往上）
        // 默认 false（从上到下）
        // ────────────────────────

    ) {
        // 子项 1：普通文本
        Text(
            text = "第一行",
            fontSize = 18.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .background(Color.White)
                .padding(8.dp)
        )

        // 子项 2：带固定高度的 Box
        Box(
            modifier = Modifier
                .size(width = 200.dp, height = 50.dp)
                .background(Color.Cyan)
        ) {
            Text("第二行 - 居中", modifier = Modifier.align(Alignment.Center))
        }

        // 子项 3：可扩展的文本（占剩余空间）
        Text(
            text = "第三行（如果 Column 有剩余空间，它不会自动拉伸，除非用 weight）",
            fontSize = 14.sp,
            color = Color.Gray,
            modifier = Modifier
                .background(Color.Yellow.copy(alpha = 0.3f))
                .padding(8.dp)
        )

        // 子项 4：使用 weight 占据剩余空间
        Box(
            modifier = Modifier
                .weight(1f) // 👈 关键：占据 Column 剩余的所有垂直空间
                .fillMaxWidth()
                .background(Color.Green.copy(alpha = 0.2f))
        ) {
            Text(
                text = "第四行 - 使用 weight(1f) 占满剩余空间",
                modifier = Modifier.align(Alignment.Center)
            )
        }

        // 子项 5：另一个普通文本（如果上面用了 weight，它会在底部）
        Text(
            text = "第五行（在 weight 之后）",
            fontSize = 16.sp,
            modifier = Modifier
                .background(Color.Magenta.copy(alpha = 0.2f))
                .padding(8.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

Row 水平布局容器

Kotlin 复制代码 
package com.example.example
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {

                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                            .background(Color.Red),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {


                        Greeting("World") // ✅ 修复：传入 name 参数
                    }
                }


            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // Row：水平布局容器（默认从左到右排列子项）
    Row(
        // ────────────────────────
        // 🔹 modifier: 控制 Row 自身的尺寸、边距、背景等
        // ────────────────────────
        modifier = Modifier
            .fillMaxWidth()         // 占满父容器宽度
            .height(80.dp)          // 固定高度（便于观察垂直对齐）
            .padding(16.dp)
            .background(Color.LightGray),

        // ────────────────────────
        // 🔹 horizontalArrangement: 子项在主轴（水平方向）上的排列方式
        // 可选值：
        // - Arrangement.Start（默认，左对齐）
        // - Arrangement.Center
        // - Arrangement.End（右对齐）
        // - Arrangement.SpaceBetween
        // - Arrangement.SpaceAround
        // - Arrangement.SpaceEvenly
        // - Arrangement.spacedBy(x.dp) ← 推荐用于固定间距
        // ────────────────────────
        horizontalArrangement = Arrangement.spacedBy(12.dp),

        // ────────────────────────
        // 🔹 verticalAlignment: 子项在交叉轴（垂直方向）上的对齐方式
        // 可选值：
        // - Alignment.Top（顶部对齐）
        // - Alignment.CenterVertically（垂直居中，默认）
        // - Alignment.Bottom（底部对齐）
        // - Alignment.Center（等价于 CenterVertically）
        // ────────────────────────
        verticalAlignment = Alignment.CenterVertically,

        // ────────────────────────
        // 🔹 reverseLayout: 是否反转排列顺序（从右到左）
        // 在 LTR 语言中设为 true 会变成 RTL 效果
        // 默认 false（从左到右）
        // ────────────────────────

    ) {
        // 子项 1：普通文本
        Text(
            text = "左",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier
                .background(Color.White)
                .padding(8.dp)
        )

        // 子项 2：按钮
        Button(
            onClick = { /* 点击事件 */ },
            modifier = Modifier.height(40.dp)
        ) {
            Text("中间按钮")
        }

        // 子项 3：使用 weight 占据剩余水平空间
        Box(
            modifier = Modifier
                .weight(1f) // 👈 关键：占据 Row 剩余的所有水平空间
                .fillMaxHeight()
                .background(Color.Green.copy(alpha = 0.2f))
        ) {
            Text(
                text = "弹性区域 - weight(1f)",
                modifier = Modifier.align(Alignment.Center)
            )
        }

        // 子项 4：图标或小元素（靠右）
        Text(
            text = "右",
            fontSize = 16.sp,
            modifier = Modifier
                .background(Color.Magenta.copy(alpha = 0.3f))
                .padding(6.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ExampleTheme {
        Greeting("Android")
    }
}

Box 层叠布局容器

ModalNavigationDrawer 侧边栏抽屉

复制代码 
implementation ("androidx.compose.material3:material3:1.3.0") // 或更高
implementation ("androidx.activity:activity-compose:1.9.0")
Kotlin 复制代码 
package com.example.example
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background



import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar

import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

import com.example.example.ui.theme.ExampleTheme
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
// 定义菜单项数据类
data class DrawerItem(
    val title: String,
    val icon: @Composable () -> Unit,
    val route: String
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ExampleTheme {
                MainScreenWithDrawer()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreenWithDrawer() {
    // ✅ 第一步：声明所有状态和作用域（放在最前面！）
    val drawerStateObj = rememberDrawerState(initialValue = DrawerValue.Closed)
    val coroutineScope = rememberCoroutineScope() // 👈 必须在使用前声明！

    val drawerItems = listOf(
        DrawerItem("首页", { Icon(Icons.Default.Home, contentDescription = null) }, "home"),
        DrawerItem("收藏", { Icon(Icons.Default.Favorite, contentDescription = null) }, "favorites"),
        DrawerItem("邮件", { Icon(Icons.Default.Email, contentDescription = null) }, "email"),
        DrawerItem("设置", { Icon(Icons.Default.Settings, contentDescription = null) }, "settings")
    )

    var selectedItem by remember { mutableStateOf(drawerItems[0]) }

    // ✅ 第二步：构建 UI
    ModalNavigationDrawer(
        drawerState = drawerStateObj,
        drawerContent = {
            DrawerContent(
                items = drawerItems,
                onItemClicked = { item ->
                    selectedItem = item
                    if (drawerStateObj.isOpen) {
                        coroutineScope.launch {
                            drawerStateObj.close()
                        }
                    }
                },
                selectedItem = selectedItem
            )
        },
        gesturesEnabled = true,
        content = {
            Scaffold(
                topBar = {
                    TopAppBar(
                        title = { Text(selectedItem.title) },
                        navigationIcon = {
                            IconButton(onClick = {
                                coroutineScope.launch {
                                    drawerStateObj.open()
                                }
                            }) {
                                Icon(Icons.Default.Menu, contentDescription = "Open drawer")
                            }
                        }
                    )
                },
                modifier = Modifier.fillMaxSize()
            ) { innerPadding ->
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(innerPadding)
                        .padding(16.dp)
                ) {
                    Text(
                        text = "当前页面: ${selectedItem.title}",
                        style = MaterialTheme.typography.headlineMedium
                    )
                }
            }
        }
    )
}

// 抽屉内容组件
@Composable
fun DrawerContent(
    items: List<DrawerItem>,
    onItemClicked: (DrawerItem) -> Unit,
    selectedItem: DrawerItem,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.surface)
            .padding(vertical = 16.dp)
    ) {
        // 可选：顶部用户头像或标题
        Spacer(modifier = Modifier.height(16.dp))

        // 菜单项列表
        items.forEach { item ->
            NavigationDrawerItem(
                icon = { item.icon() },
                label = { Text(item.title) },
                selected = item == selectedItem,
                onClick = {
                    onItemClicked(item)
                },
                modifier = Modifier.padding(horizontal = 8.dp)
            )
        }

        // 可选：底部设置项
        Spacer(modifier = Modifier.weight(1f)) // 推到下方
        NavigationDrawerItem(
            icon = { Icon(Icons.Default.Settings, contentDescription = null) },
            label = { Text("应用设置") },
            selected = false,
            onClick = { /* TODO */ },
            modifier = Modifier.padding(horizontal = 8.dp)
        )
    }
}

// 预览（注意：Drawer 在预览中可能不显示，但代码逻辑正确）
@Preview(showBackground = true)
@Composable
fun MainScreenWithDrawerPreview() {
    ExampleTheme {
        MainScreenWithDrawer()
    }
}
Kotlin 复制代码 
package com.example.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp

// 自定义紫色（你可以替换成自己的品牌色）
val SELECTED_TAB_TEXT_COLOR = Color(0xFF9C27B0) // Material Purple 500

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface {
                    MainScreenWithBottomNavigation()
                }
            }
        }
    }
}

enum class MainTab(
    val title: String,
    val iconResId: Int,
    val selectedIconResId: Int
) {
    NStore("N店", R.drawable.n_dian, R.drawable.n_dian_on),
    Academy("学院", R.drawable.xue_yuan, R.drawable.xue_yuan_on),
    Video("视频", R.drawable.ship_pin, R.drawable.ship_pin_on),
    Communication("通信", R.drawable.tong_xin, R.drawable.tong_xin_on),
    Profile("我的", R.drawable.wo_de, R.drawable.wo_de_on)
}

@Composable
fun MainScreenWithBottomNavigation() {
    var currentTab by remember { mutableStateOf(MainTab.NStore) }

    Scaffold(
        bottomBar = {
            NavigationBar(
                containerColor = Color.Black, // 👈 设置黑色背景
                contentColor = Color.White     // 可选：设置默认文字/图标颜色（未选中状态）
            ) {
                MainTab.values().forEach { tab ->
                    NavigationBarItem(
                        selected = currentTab == tab,
                        onClick = { currentTab = tab },
                        icon = {
                            Icon(
                                painter = painterResource(
                                    id = if (currentTab == tab) tab.selectedIconResId else tab.iconResId
                                ),
                                contentDescription = tab.title,
                                tint = Color.Unspecified,
                                modifier = Modifier.size(24.dp) // ← 强制标准尺寸
                            )
                        },
                        label = {
                            Text(
                                text = tab.title,
                                color = if (currentTab == tab) {
                                    SELECTED_TAB_TEXT_COLOR
                                } else {
                                    MaterialTheme.colorScheme.onSurfaceVariant
                                }
                            )
                        },
                        colors = NavigationBarItemDefaults.colors(
                            indicatorColor = Color.Transparent, // 去除背景色
                            selectedIconColor = Color.Unspecified, // 使用原始颜色
                            unselectedIconColor = Color.Unspecified, // 使用原始颜色
                            selectedTextColor = SELECTED_TAB_TEXT_COLOR, // 选中文本颜色
                            unselectedTextColor = Color.White // 未选中文本颜色
                        ),
                        alwaysShowLabel = true
                    )
                }
            }
        },
        content = { paddingValues ->
            Box(
                modifier = Modifier.fillMaxSize().padding(paddingValues),
                contentAlignment = Alignment.Center
            ) {
                Text("当前页面: ${currentTab.title}")
            }
        }
    )
}

@Preview(showBackground = true)
@Composable
fun MainScreenWithBottomNavigationPreview() {
    MaterialTheme {
        MainScreenWithBottomNavigation()
    }
}

LazyColumn 高效垂直滚动列表

LazyRow 高效水平滚动列表

LazyVerticalGrid 高效垂直网格列表

LazyHorizontalGrid 高效水平网格列表

ConstraintLayout 约束布局容器

FlowRow 流式水平布局

FlowColumn 流式垂直布局

Material 3 常用组件

OutlinedButton 带边框按钮

TextButton 文本按钮

ElevatedButton 带阴影按钮

IconButton 图标按钮

Checkbox 复选框

RadioButton 单选按钮

Switch 开关组件

Slider 滑块组件

TopAppBar 顶部应用栏

BottomAppBar 底部应用栏

TabRow 标签栏

FloatingActionButton 悬浮操作按钮

Card 卡片组件

Surface 表面容器（带背景、阴影）

AlertDialog 警告对话框

Snackbar 轻量提示条

Chip 芯片组件

AssistChip 辅助芯片

FilterChip 筛选芯片

InputChip 输入芯片

SuggestionChip 建议芯片

Badge 徽章组件

Divider 分割线

Spacer 间距占位符

CircularProgressIndicator 圆形进度指示器

LinearProgressIndicator 线性进度指示器

DatePicker 日期选择器

TimePicker 时间选择器

DateRangePicker 日期范围选择器

BottomSheetScaffold 底部抽屉布局框架

动画与交互组件

AnimatedVisibility 可见性动画组件

AnimatedContent 内容切换动画组件

Crossfade 淡入淡出切换组件

Animatable 动画值控制器

rememberInfiniteTransition 无限循环动画

Clickable 可点击修饰符（非组件，核心交互）

Draggable 可拖拽修饰符

Swipeable 可滑动修饰符

Scrollable 可滚动修饰符

弹窗与窗口组件

ModalBottomSheet 模态底部抽屉

状态与副作用相关

remember 状态记忆函数

rememberSaveable 可持久化状态记忆函数

LaunchedEffect 协程作用域副作用

DisposableEffect 可释放资源副作用

SideEffect 组合副作用

其他辅助组件

BackHandler 返回键处理器

FocusRequester 焦点请求器

Semantics 语义化辅助组件

TestTag 测试标记组件

相关推荐
superman超哥4 小时前
Rust 内部可变性模式：突破借用规则的受控机制
开发语言·后端·rust·rust内部可变性·借用规则·受控机制
豆沙沙包?4 小时前
2026年--Lc329-735. 小行星碰撞(栈）--java版
java·开发语言
weibkreuz4 小时前
收集表单数据@10
开发语言·前端·javascript
PuddingSama4 小时前
Gson 很好，但在Kotlin上有更合适的序列化工具「Kotlin Serialization」
android·kotlin·gson
教程分享大师5 小时前
移动云电脑W132D安卓9当贝固件线刷机包_ROM刷机教程
android
程序之巅5 小时前
VS code 远程python代码debug
android·java·python
liulilittle5 小时前
XDP VNP虚拟以太网关（章节：一）
linux·服务器·开发语言·网络·c++·通信·xdp
我不是8神5 小时前
Qt 知识点全面总结
开发语言·qt
Ralph_Y5 小时前
多重继承与虚继承
开发语言·c++
今晚务必早点睡5 小时前
写一个Python接口：发送支付成功短信
开发语言·python
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！05Labelme从安装到标注：零基础完整指南06jdk21下载、安装（Windows、Linux、macOS）07GitLab 零基础入门指南：从安装到项目管理全流程08UV安装并设置国内源09【踩坑笔记】50系显卡适配的 PyTorch 安装102025-04-03 Latex学习1——本地配置Latex + VScode环境