Android Studio(Compose 第四课--图片组件)
本章学习新的组件，帮我我们随心所欲添加自己的图片。
第一步：导入图片 (Resource Manager)
这是 AS 提供的一个很方便的工具。
准备一张图片（格式最好是 png 或 jpg），随便找一张电脑里的图，或者去网上搜个简单的图标。
在 Android Studio 左侧的项目目录中，找到
res(Resources)文件夹。展开
res，找到drawable文件夹。最简单的操作：直接把你的图片文件（比如
logo.png），复制 (Ctrl+C)，然后对着drawable文件夹粘贴 (Ctrl+V)。⚠️ 注意：弹出的对话框里，文件名必须全是小写字母（不能有大写！不能有空格！），比如
my_logo.png是对的，My Logo.png会报错。点击 OK。
第二步：写代码显示图片
新增代码（Image组件），将Image组件放到Column组件中，位置可以按自己的需求来
// === 新增的代码开始 === Image( // R.drawable.mylogo 对应你刚才复制进去的文件名，res(Resource)/drawable/mylogo // R 是 Resource(资源) 的缩写，AS 会自动生成这个索引 painter = painterResource(id = R.drawable.mylogo), contentDescription = "App Logo", // 给盲人读屏软件用的描述，必填（或者填 null） // 我们可以给图片加个修饰符，限制一下大小 modifier = Modifier .size(100.dp) // 大小 100dp .clip(CircleShape) // ✂️ 裁剪成圆形！(选做，如果不加就是原图矩形) ) // === 新增的代码结束 ===三、完整代码
package com.example.myapplication import android.os.Bundle 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.layout.Arrangement import androidx.compose.foundation.layout.Column 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.shape.CircleShape import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Scaffold import androidx.compose.material3.Text 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.draw.clip 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 import com.example.myapplication.ui.theme.MyApplicationTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() //setContent { ... }： 这就是 C 语言里的 main() 入口。程序一运行，就执行这里面的 UI 函数。 setContent { //MyApplicationTheme,不是绝对必要，删了也能跑，它定义了你 App 的主题，以及深浅色主题的自动切换。 MyApplicationTheme { //Scaffold，标准页面模版，预留好了标准位置：顶部应用栏、底部导航栏、悬浮按钮等等； //即使什么栏都不加，Scaffold也能给你一个标准的白色/深色背景，并管理好屏幕布局。 //Modifier，修饰符，决定了样式和布局； //Modifier.fillMaxSize()，“填满”fillMaxSize()； //innerPadding，为Scaffold的一个特别功能，能自动适应手机参数， //因为在实际应用当中，我们的背景应该是不包括最顶部或者最底部的状态栏的，否则（0,0）的字会嵌入到电池电量那一栏中； //所以Scaffold会自动识别预留出安全距离，使得背景和文字不被覆盖，把这个参数innerPadding传给子函数，告诉他们； Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -> Greeting( modifier = Modifier.padding(innerPadding) ) } } } } } //@Composable：这就好比告诉编译器：“这个函数不是用来做数学计算的，而是用来画界面的”。 // 这是一个自定义函数，但在 Compose 里叫 "Composable" @Composable fun Greeting(modifier: Modifier = Modifier) { // 注意：把 name 参数去掉了，我们在内部定义它 // 定义一个状态，用来存用户输入的名字 // 初始值是空字符串 "" var name by remember { mutableStateOf("") } Column( modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { // === 新增的代码开始 === Image( // R.drawable.mylogo 对应你刚才复制进去的文件名，res(Resource)/drawable/mylogo // R 是 Resource(资源) 的缩写，AS 会自动生成这个索引 painter = painterResource(id = R.drawable.mylogo), contentDescription = "App Logo", // 给盲人读屏软件用的描述，必填（或者填 null） // 我们可以给图片加个修饰符，限制一下大小 modifier = Modifier .size(100.dp) // 大小 100dp .clip(CircleShape) // ✂️ 裁剪成圆形！(选做，如果不加就是原图矩形) ) // === 新增的代码结束 === // 显示内容 // 如果名字是空的，就显示 "陌生人"，否则显示名字 // 这里用了一个简单的 if/else 逻辑 val showName = if (name.isNotEmpty()) name else "陌生人" Text( text = "你好，$showName", style = MaterialTheme.typography.headlineMedium // 加个样式，让字大一点 ) // 加点空隙，别挨太近 Spacer(modifier = Modifier.height(20.dp)) // 输入框组件 OutlinedTextField( value = name, // 输入框里显示的文字，绑定到我们的变量，输入框组件内置会实时显示“value” // onValueChange，顾名思义，当输入框内的值改变的时候调用这个函数，即为一个中断回调函数 onValueChange = { newText -> // 回调函数：每当你敲一个键盘，这里就会执行 // newText 就是输入框里最新的内容 name = newText // 更新状态 -> 触发界面刷新 }, label = { Text("请输入你的名字") } // 输入框左上角的小提示 ) } } //这里大概就是预览器吧，在编辑器里使用模拟器预览，需要用到，实际在真实手机上，这一段可以删去 @Preview(showBackground = true) @Composable fun GreetingPreview() { MyApplicationTheme { Greeting() } }