尧图网页设计 
先分享一个很多初学 Jetpack Compose 的朋友都会遇到的情况跟着文档写了一个OutlinedTextField结果发现输入框里的文字无论怎么打字都不变用Button点击后想弹出Snackbar又发现要么不显示要么必须写一堆晦涩的协程代码才弹得出来。网上资料零散Copy 下来的代码能跑但完全不知道原理。本文围绕 Jetpack Compose 中三个高频基础组件——输入框、按钮和 Snackbar从声明式 UI 的核心概念讲起再到参数拆解、完整可运行案例和常见坑点排查。新手可以把本文当作第一份 Compose 入门教程有 Java/Kotlin 基础的开发者也能直接跳到实战部分复用代码。Jetpack Compose 是 Android 官方推出的声明式 UI 工具包目前已经成为原生 Android 开发的主流方案。相比传统的 View 体系Compose 在界面描述方式、状态管理、重组机制上都有很大差异。本文的内容会聚焦在最常用、最基础的三类组件OutlinedTextField输入框、Button按钮、Snackbar轻提示掌握这三个组件基本就能搭建一个可交互的简单页面。1. 背景与核心概念1.1 什么是声明式 UI在了解输入框和按钮之前先弄清楚声明式 UI 到底是什么。传统 Android 开发使用 View 体系时是典型的命令式 UI。你拿到一个TextView调用它的setText()方法界面才会更新。如果页面有多处地方需要同步状态就需要手动找到每个 View 并更新它界面越复杂状态同步就越容易出现遗漏。Jetpack Compose 则完全不同。它采用声明式的思想UI 是状态State的函数。你只需要描述 “当数据是什么样时界面显示成什么样”剩下的交给 Compose 框架处理。当状态变化时Compose 会自动重新执行对应的 Composable 函数更新界面中变化的部分这个机制被称为重组Recomposition。举个例子用传统 View 更新一个输入框内容代码大致是EditText editText findViewById(R.id.edit_text); editText.setText(新的内容);而在 Compose 中输入框的写法是Composable fun GreetingInput() { var text by remember { mutableStateOf() } OutlinedTextField( value text, onValueChange { text it } ) }这里value就是输入框展示的内容onValueChange是用户输入后回调的新内容。界面不再是一个需要手动操作的控件对象而是由状态驱动的一次渲染结果。1.2 Compose 中三个基础组件的定位组件作用对应传统 View 控件OutlinedTextField文本输入框EditTextButton可点击按钮ButtonAppCompatSnackbar页面底部轻提示SnackbarMaterial DesignOutlinedTextField是 Material Design 风格的外框输入框视觉上有明显的边框和标签适合表单场景。Button是点击触发动作的组件配合onClick回调使用。Snackbar则用于在不打断用户操作的前提下显示一条短暂的提示信息经常和按钮点击事件配合使用。这里要特别强调一个认知Compose 里的组件不是控件而是函数。它们没有findViewById没有实例引用没有生命周期。你写的每个Button在编译后会参与 UI 树的构建但你在代码层面操作的是函数参数和回调而不是对象本身。1.3 为什么推荐从这三个组件开始学习原因很直接几乎所有 App 的表单、登录注册、设置页面都会用到输入框和按钮而操作反馈经常会用到 Snackbar。这三个组件组合起来已经能实现一个完整的最小业务闭环用户输入信息、点击按钮、看到操作结果。掌握了它们你就能开始写有交互的 Compose 页面而不是停留在静态界面。2. 环境准备与开发工具2.1 Android Studio 与 SDK 版本开发 Jetpack Compose 应用推荐使用最新稳定版 Android Studio。本文示例以常见环境为例重点演示代码和配置思路具体版本号请根据你的开发环境调整。需要满足的条件如下项目说明IDEAndroid Studio Hedgehog 或更新版本语言Kotlin 1.9 或更新版本SDKAndroid 5.0API 21及以上JDKJDK 17构建工具Gradle 8.0 或更新版本如果你的项目是旧项目迁移到 Compose需要在build.gradle.kts中开启 Compose 编译选项。2.2 新建 Compose 项目在 Android Studio 中新建项目时选择Empty Activity并在语言处选择 Kotlin。新版 Android Studio 会默认生成支持 Compose 的项目模板。模板中的模块级build.gradle.kts通常包含以下内容android { namespace com.example.composebasic compileSdk 34 defaultConfig { applicationId com.example.composebasic minSdk 24 targetSdk 34 versionCode 1 versionName 1.0 } buildFeatures { compose true } compileOptions { sourceCompatibility JavaVersion.VERSION_17 targetCompatibility JavaVersion.VERSION_17 } kotlinOptions { jvmTarget 17 } } dependencies { implementation(platform(androidx.compose:compose-bom:2024.02.00)) implementation(androidx.compose.ui:ui) implementation(androidx.compose.ui:ui-graphics) implementation(androidx.compose.ui:ui-tooling-preview) implementation(androidx.compose.material3:material3) implementation(androidx.activity:activity-compose:1.8.0) }2.3 依赖说明项目使用了 Compose BOMBill of Materials来统一管理各 Compose 库版本。BOM 可以让所有 Compose 相关库保持在兼容的版本组合上升级时只需修改 BOM 版本即可。activity-compose库提供了setContent扩展函数是 Compose Activity 与传统 Activity 之间的桥梁。只要新项目模板会自带这些依赖不需要手动添加。如果你的项目无法访问远程仓库执行 Gradle 同步时报依赖下载失败请检查阿里云镜像或仓库配置是否正常。不要在代码层面强行屏蔽错误先确保基础依赖构建通过。3. 输入框OutlinedTextField 详解3.1 最简单的输入框在 Compose 中使用OutlinedTextField核心是两个参数value和onValueChange。value是当前输入框的内容onValueChange是内容变化时的回调。先写一个最基础的版本Composable fun BasicTextField() { var text by remember { mutableStateOf() } OutlinedTextField( value text, onValueChange { newText - text newText }, label { Text(用户名) }, placeholder { Text(请输入用户名) } ) }这里的remember { mutableStateOf() }是 Compose 状态管理的核心。mutableStateOf创建了一个可观察的状态容器当text的值改变时Compose 会自动标记当前组合需要重组重新执行BasicTextField函数从而刷新界面。label和placeholder都是可组合函数类型的参数。label是输入框的常驻标签输入内容后标签会浮动到边框上方placeholder是输入框为空时的灰色占位提示输入内容后自动隐藏。3.2 常用参数拆解OutlinedTextField有很多可选参数下面挑几个高频使用场景说明。单行输入OutlinedTextField( value text, onValueChange { text it }, singleLine true )设置singleLine true后输入框不会换行软键盘的换行键会变成“完成”或“搜索”。键盘类型OutlinedTextField( value text, onValueChange { text it }, keyboardOptions KeyboardOptions(keyboardType KeyboardType.Password) )KeyboardOptions控制软键盘的显示类型。KeyboardType.Password虽然会在键盘层面切换密码模式但不会自动做密文显示需要配合visualTransformation。密码输入框var password by remember { mutableStateOf() } OutlinedTextField( value password, onValueChange { password it }, label { Text(密码) }, visualTransformation PasswordVisualTransformation(), keyboardOptions KeyboardOptions(keyboardType KeyboardType.Password) )PasswordVisualTransformation()会把输入内容显示为圆点实现密码不可见的效果。只看明文这里有一个关键点visualTransformation只是修改了显示效果value中保存的仍然是用户输入的原文提交时直接读取password即可。限制输入长度OutlinedTextField( value text, onValueChange { if (it.length 10) { text it } } )在onValueChange中做截断判断超过长度就丢弃新值。这就是声明式 UI 的特点不是“限制输入框的长度属性”而是“当状态超过长度时不更新状态”。前置图标与后置图标OutlinedTextField( value text, onValueChange { text it }, leadingIcon { Icon(Icons.Default.Search, contentDescription 搜索) }, trailingIcon { if (text.isNotEmpty()) { IconButton(onClick { text }) { Icon(Icons.Default.Close, contentDescription 清空) } } } )leadingIcon是输入框左侧图标trailingIcon是右侧图标。上面的示例实现了一个可点击清空输入内容的按钮Icons.Default.Search和Icons.Default.Close来自androidx.compose.material.icons包。错误提示var hasError by remember { mutableStateOf(false) } OutlinedTextField( value text, onValueChange { text it }, isError hasError, supportingText { if (hasError) { Text(输入内容不能为空) } } )isError true时输入框边框会变红supportingText可以显示辅助说明文字适合表单校验场景。3.3 输入框的状态存储remember 还是 rememberSaveable先看一个简单的对比// 屏幕旋转或进程恢复后丢失 var text by remember { mutableStateOf() } // 屏幕旋转或进程恢复后保留 var text by rememberSaveable { mutableStateOf() }remember只在当前的组合期间保持状态当 Activity 旋转重建、进程被系统回收后数据会丢失。rememberSaveable会把状态存入 Bundle能够跨配置变更和进程重建存活。实际项目中表单输入框的内容建议尽量使用rememberSaveable避免用户输入一半时旋转屏幕导致数据清空体验很差。rememberSaveable可以保存可序列化对象。如果状态是自定义数据类要么让它实现Parcelable要么传入自定义Saver。初学者先掌握基本用法复杂场景后续再深入。3.4 输入框的常见误区误区原因正确做法输入后文字不变没有把onValueChange的新值写回状态在onValueChange中执行text it密码显示为明文缺少PasswordVisualTransformation()添加visualTransformation旋转屏幕后内容丢失使用了remember换成rememberSaveable输入框无限增高缺少singleLine true或固定高度设置singleLine或maxLines其中“输入后文字不变”是最常见的问题。根本原因是 Compose 中OutlinedTextField是一个受控组件value参数决定了它的显示内容如果用户输入了新的内容但不更新value输入框会一直停留在旧值上。这一点和传统 Android 的EditText有本质区别。4. 按钮Button 系列组件4.1 Button 的基本用法Compose 提供多个按钮组件都位于androidx.compose.material3包中。最常用的是Button、OutlinedButton和TextButton。最简单的按钮Composable fun SimpleButton() { Button( onClick { println(按钮被点击了) } ) { Text(提交) } }Button的第一个参数onClick是点击回调后面的 Lambda 是按钮的内容区域。内容区域可以放Text、Icon、Row等多种可组合函数自由度很高。4.2 不同风格的按钮Material 3 中按钮风格区分如下按钮组件适用场景视觉特征Button主要操作、强调操作填充底色视觉权重最高OutlinedButton次要操作、辅助操作透明背景有边框TextButton低优先级操作、列表内操作纯文字无背景无边框FilledTonalButton中等强调操作浅色填充背景使用时根据操作的重要程度选择合适的按钮风格。页面上通常只有一个主要的Button其余操作用OutlinedButton或TextButton弱化。Row( horizontalArrangement Arrangement.spacedBy(8.dp) ) { Button(onClick { /* 主要操作 */ }) { Text(保存) } OutlinedButton(onClick { /* 次要操作 */ }) { Text(取消) } TextButton(onClick { /* 链接操作 */ }) { Text(忘记密码) } }4.3 按钮的启用与禁用状态Button有一个enabled参数默认是true。设置为false时按钮不可点击并显示为灰色禁用态。var inputText by rememberSaveable { mutableStateOf() } Button( onClick { // 提交逻辑 }, enabled inputText.isNotEmpty() ) { Text(提交) }这个用法非常契合表单场景输入框内容为空时按钮不可点有内容时才可点。由于inputText是 Compose 状态当它变化时按钮会重组enabled的值会自动更新无需手动刷新。4.4 按钮的样式定制Material 3 的Button可以通过ButtonDefaults定制颜色、形状和高度Button( onClick { /* 点击逻辑 */ }, shape RoundedCornerShape(12.dp), colors ButtonDefaults.buttonColors( containerColor Color(0xFF3F51B5), contentColor Color.White ), elevation ButtonDefaults.buttonElevation( defaultElevation 6.dp, pressedElevation 2.dp ) ) { Icon( Icons.Default.Check, contentDescription null, modifier Modifier.size(18.dp) ) Spacer(modifier Modifier.width(6.dp)) Text(确认) }containerColor是按钮背景色contentColor是内容文字和图标颜色。shape控制整体形状elevation控制阴影高度。按压时阴影高度降低可以制造“按钮被按下”的视觉反馈。4.5 按钮的点击范围与节流生产环境中按钮容易遇到重复点击问题例如支付提交被快速点击两次。Compose 的Button默认不做点击节流需要开发者自己控制。最简单的方案是通过状态加锁var isSubmitting by remember { mutableStateOf(false) } Button( onClick { if (isSubmitting) returnButton isSubmitting true // 模拟提交 // 提交完成后恢复 isSubmitting false } ) { Text(if (isSubmitting) 提交中... else 提交) }更规范的做法是使用协程或自定义Modifier.pointerInput做节流。初学者先掌握状态加锁方案够用且容易理解。5. Snackbar轻提示组件5.1 Snackbar 与 Toast 的区别很多从传统 View 开发过来的同学会问Snackbar 和 Toast 有什么区别对比项ToastSnackbar交互不可交互展示完自动消失可以带 Action 按钮用户可点击位置系统控制通常在屏幕底部页面内底部可指定位置依赖全局系统服务页面内的 Scaffold 容器样式固定风格定制能力弱可定制颜色、形状、时长在 Compose 项目中推荐优先使用 Snackbar 做操作反馈尤其是需要“撤销”之类交互的轻提示场景。5.2 Scaffold 与 SnackbarHostCompose 中的Snackbar必须搭配SnackbarHost使用。而SnackbarHost通常放在页面的Scaffold容器中这样 Snackbar 会自动定位在屏幕底部安全区域内。基本结构如下OptIn(ExperimentalMaterial3Api::class) Composable fun SnackbarDemo() { val snackbarHostState remember { SnackbarHostState() } val scope rememberCoroutineScope() Scaffold( snackbarHost { SnackbarHost(snackbarHostState) } ) { innerPadding - Column( modifier Modifier .padding(innerPadding) .padding(16.dp) ) { Button( onClick { scope.launch { snackbarHostState.showSnackbar(操作成功) } } ) { Text(显示 Snackbar) } } } }SnackbarHostState持有 Snackbar 的显示状态。rememberCoroutineScope()创建一个与当前组合生命周期绑定的协程作用域通过scope.launch启动一个协程来调用showSnackbar。5.3 为什么 showSnackbar 必须在协程中调用这是新手最容易疑惑的地方。showSnackbar是一个挂起函数suspend function它会等待 Snackbar 显示完毕、超时或用户消费完事件后再返回。这个等待过程可能导致几秒的阻塞不能在主线程中以同步方式调用。而通过协程挂起主线程不会被阻塞Snackbar 显示期间用户可以继续操作界面。在 Compose 中比较常见的调用方式有两种方式一通过 rememberCoroutineScope 启动协程这种方式适合在 Button 点击回调中调用val scope rememberCoroutineScope() Button( onClick { scope.launch { snackbarHostState.showSnackbar(操作成功) } } ) { Text(显示 Snackbar) }方式二通过 LaunchedEffect 启动协程这种方式适合在 Composable 初次进入或状态满足条件时自动弹出var showMessage by remember { mutableStateOf(false) } if (showMessage) { LaunchedEffect(snackbarHostState) { snackbarHostState.showSnackbar(欢迎使用) showMessage false } }LaunchedEffect会在组合期间启动一个协程当 key 变化或离开组合时会取消协程。注意上面的showMessage false写在showSnackbar完成后执行表示 Snackbar 显示结束后重置触发状态。5.4 Snackbar 的时长与 Action 按钮showSnackbar支持多个参数snackbarHostState.showSnackbar( message 删除成功, actionLabel 撤销, duration SnackbarDuration.Short, withDismissAction true )参数类型说明messageString提示内容actionLabelString?操作按钮文案durationSnackbarDuration展示时长withDismissActionBoolean是否显示关闭按钮duration有三个取值SnackbarDuration.Short短时间展示SnackbarDuration.Long较长时间展示SnackbarDuration.Indefinite一直展示直到被关闭或新 Snackbar 替代如果设置了actionLabelSnackbar 会显示一个可点击的 Action 按钮。showSnackbar的返回值是一个SnackbarResult枚举可以通过判断返回值来处理用户点击了 Action 还是 Snackbar 自动消失scope.launch { val result snackbarHostState.showSnackbar( message 删除成功, actionLabel 撤销, duration SnackbarDuration.Long ) when (result) { SnackbarResult.ActionPerformed - { // 用户点击了撤销 } SnackbarResult.Dismissed - { // Snackbar 超时消失或被关闭 } } }5.5 Snackbar 不显示或只显示一次的排查思路在实际开发中“Snackbar 不显示”是很常见的问题原因通常有以下几种问题现象常见原因解决思路Snackbar 完全不显示SnackbarHost没有放到Scaffold中在Scaffold的snackbarHost参数中绑定连续点击只显示一次前一个协程还没结束后一个启动在scope.launch前加判断或使用currentSnackbarDataSnackbar 被内容遮挡innerPadding未应用到页面内容在内容外层 Modifier 上.padding(innerPadding)Snackbar 显示后立即消失duration设置为Short且消息过长调整为Long或Indefinite页面销毁后协程还在弹协程作用域绑定错误使用rememberCoroutineScope或LaunchedEffect不要创建全局作用域连续点击只显示一次的问题很多人遇到过。原因是snackbarHostState.showSnackbar是挂起函数前一个协程还在等待显示完成后一个协程又调用了同一个SnackbarHostState。可以采用以下方式处理val snackbarHostState remember { SnackbarHostState() } if (snackbarHostState.currentSnackbarData null) { scope.launch { snackbarHostState.showSnackbar(新的提示) } }currentSnackbarData如果为null说明当前没有正在显示的 Snackbar才启动新的协程。6. 完整实战输入框 按钮 Snackbar 联动前面把三个组件分开讲完了现在把它们组合在一个完整的业务场景中。这个需求很常见用户输入内容点击提交按钮校验输入通过后弹出 Snackbar 提示成功失败则提示错误。6.1 项目结构app/src/main/java/com/example/composebasic/ ├── MainActivity.kt ├── ui/ │ └── theme/ │ ├── Color.kt │ ├── Theme.kt │ └── Type.kt └── screen/ └── LoginScreen.kt这里把页面逻辑拆到screen/LoginScreen.kt中MainActivity只负责承载内容。6.2 MainActivity 代码// 文件路径app/src/main/java/com/example/composebasic/MainActivity.kt package com.example.composebasic import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.ui.Modifier import com.example.composebasic.screen.LoginScreen import com.example.composebasic.ui.theme.ComposeBasicTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeBasicTheme { Surface( modifier Modifier.fillMaxSize(), color MaterialTheme.colorScheme.background ) { LoginScreen() } } } } }6.3 LoginScreen 核心代码// 文件路径app/src/main/java/com/example/composebasic/screen/LoginScreen.kt package com.example.composebasic.screen import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Lock import androidx.compose.material.icons.filled.Person 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.text.input.PasswordVisualTransformation import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import kotlinx.coroutines.launch Composable fun LoginScreen() { var username by rememberSaveable { mutableStateOf() } var password by rememberSaveable { mutableStateOf() } var passwordVisible by remember { mutableStateOf(false) } var isSubmitting by remember { mutableStateOf(false) } val snackbarHostState remember { SnackbarHostState() } val scope rememberCoroutineScope() Scaffold( snackbarHost { SnackbarHost(snackbarHostState) } ) { innerPadding - Column( modifier Modifier .fillMaxSize() .padding(innerPadding) .verticalScroll(rememberScrollState()) .padding(horizontal 24.dp), horizontalAlignment Alignment.CenterHorizontally, verticalArrangement Arrangement.Center ) { Text( text 欢迎登录, style MaterialTheme.typography.headlineMedium, color MaterialTheme.colorScheme.primary ) Spacer(modifier Modifier.height(32.dp)) OutlinedTextField( value username, onValueChange { username it }, label { Text(用户名) }, placeholder { Text(请输入用户名) }, singleLine true, leadingIcon { Icon(Icons.Default.Person, contentDescription 用户名) }, modifier Modifier.fillMaxWidth() ) Spacer(modifier Modifier.height(16.dp)) OutlinedTextField( value password, onValueChange { password it }, label { Text(密码) }, placeholder { Text(请输入密码) }, singleLine true, leadingIcon { Icon(Icons.Default.Lock, contentDescription 密码) }, trailingIcon { IconButton(onClick { passwordVisible !passwordVisible }) { Icon( if (passwordVisible) Icons.Default.Info else Icons.Default.Info, contentDescription if (passwordVisible) 隐藏密码 else 显示密码 ) } }, visualTransformation if (passwordVisible) { VisualTransformation.None } else { PasswordVisualTransformation() }, keyboardOptions KeyboardOptions(keyboardType androidx.compose.ui.text.input.KeyboardType.Password), modifier Modifier.fillMaxWidth() ) Spacer(modifier Modifier.height(24.dp)) Button( onClick { if (isSubmitting) returnButton when { username.isBlank() - { scope.launch { snackbarHostState.showSnackbar(用户名不能为空) } } password.length 6 - { scope.launch { snackbarHostState.showSnackbar(密码长度至少 6 位) } } else - { isSubmitting true scope.launch { // 模拟网络请求 Thread.sleep(1000) snackbarHostState.showSnackbar(登录成功) isSubmitting false } } } }, enabled username.isNotBlank() password.isNotBlank(), modifier Modifier .fillMaxWidth() .height(48.dp) ) { Text(登录) } Spacer(modifier Modifier.height(12.dp)) TextButton( onClick { scope.launch { snackbarHostState.showSnackbar(此处跳转忘记密码页) } }, modifier Modifier.align(Alignment.CenterHorizontally) ) { Text(忘记密码) } } } }6.4 代码运行逻辑说明这段示例覆盖了前文讲到的全部知识点rememberSaveable保存用户名和密码防止旋转屏幕导致内容丢失。OutlinedTextField的value和onValueChange形成状态闭环输入内容会实时更新状态。密码框通过passwordVisible状态控制明文/密文显示点击右侧图标切换。登录按钮的enabled绑定输入状态用户名和密码都不为空时才可点击。点击后先做输入校验失败时通过scope.launch显示对应 Snackbar 提示。校验通过后设置isSubmitting true模拟提交利用Thread.sleep(1000)模拟耗时网络请求场景中应使用实际请求代码。提交完成后显示“登录成功” Snackbar并恢复isSubmitting。6.5 运行与验证连接模拟器或真机运行项目预期效果如下输入框为空时登录按钮为灰色不可点状态。输入用户名后输入框中内容正常显示。输入少于 6 位的密码后点击登录底部弹出“密码长度至少 6 位”提示。输入合法内容后点击登录按钮短暂处于不可点状态随后弹出“登录成功”提示。点击密码框右侧图标可以切换密码明文和密文显示。7. 常见问题与排查思路7.1 输入框的输入内容不更新现象在输入框里打字屏幕上的文字没有变化。原因OutlinedTextField的value没有和onValueChange形成正确闭环。常见的情况是onValueChange中只打印了日志没有把新值写回状态变量。解决var text by rememberSaveable { mutableStateOf() } OutlinedTextField( value text, onValueChange { text it } )value text负责显示onValueChange { text it }负责更新。这两行缺一不可。7.2 点击 Snackbar 不弹出现象点击按钮后页面上没有任何提示。原因和排查步骤检查Scaffold是否正确设置了snackbarHost { SnackbarHost(snackbarHostState) }。检查showSnackbar是否在协程中调用直接写snackbarHostState.showSnackbar(提示)会编译报错因为挂起函数必须在协程中调用。检查当前是否有 Snackbar 正在显示如果有新的调用会被忽略。检查SnackbarHostState是否在remember中创建是否被多个组件共用相同实例。7.3 enabled 生效但按钮仍可点击现象给Button设置了enabled false但按钮仍然有点击效果。原因enabled false时onClick回调不会触发但视觉上可能因为主题样式原因仍然看起来像可点击状态。Material 3 默认会降低禁用态的不透明度和对比度通常不需要额外修改。如果确实需要可通过自定义ButtonDefaults.buttonColors(disabledContainerColor ...)调整。7.4 键盘把输入框挡住现象输入框在页面底部软键盘弹出后输入框被遮挡。解决思路在AndroidManifest.xml的 Activity 配置中设置android:windowSoftInputModeadjustResize这样软键盘弹出时 Activity 会调整大小配合Scaffold的innerPadding可以避免遮挡activity android:name.MainActivity android:windowSoftInputModeadjustResize /另外输入内容不多时可以给Column加上verticalScroll(rememberScrollState())支持滚动后输入框会自动滚到可见区域。7.5 Snackbar 提示与页面生命周期如果使用rememberCoroutineScope()创建协程协程会绑定在当前 Composable 的组合生命周期上。页面销毁时协程会被取消不会出现泄漏问题。不要使用GlobalScope.launch去弹 Snackbar任务无法取消且容易引发内存泄漏。8. 最佳实践与工程建议8.1 统一管理界面状态实际项目中不建议把username、password直接散落在各个 Composable 函数中。可以采用状态提升State Hoisting的模式把状态集中到一个 ViewModel 中管理class LoginViewModel : ViewModel() { var username by mutableStateOf() private set var password by mutableStateOf() private set fun onUsernameChange(newValue: String) { username newValue } fun onPasswordChange(newValue: String) { password newValue } }Compose 中的mutableStateOf也可以放在 ViewModel 中使用配合by委托可以直接读取和赋值。这样输入框的value就不会有多个来源状态变更路径清晰可追踪。8.2 避免在 Composable 中执行业务逻辑Composable 函数只负责界面渲染不应包含网络请求、数据库操作等耗时逻辑。特别是按钮的onClick中应该只做事件转发把真正的业务处理放到 ViewModel 或 Repository 层。示例中的Thread.sleep(1000)只是模拟耗时真实项目中一定要用协程的delay或实际网络请求不要在主线程做阻塞操作。8.3 输入校验的时机选择表单校验分为实时校验和提交时校验两种实时校验适合用户需要即时反馈的场景例如确认密码是否一致。提交时校验适合操作门槛较低的场景比如用户名非空、密码长度限制。在 Compose 中可以这样区分// 实时校验 OutlinedTextField( value email, onValueChange { email it }, isError email.isNotEmpty() !email.contains() ) // 提交时校验 Button( onClick { if (email.isBlank()) { scope.launch { snackbarHostState.showSnackbar(邮箱不能为空) } returnButton } // 继续提交 } ) { Text(提交) }实时校验展示在组件内的supportingText或isError中提交时校验使用 Snackbar 提示两者结合能获得比较好的交互体验。8.4 关注 Compose 的重组范围Compose 性能优化的一个重点是最小化重组范围。以登录页为例如果username状态变化导致整个LoginScreen函数重组其中包含password输入框、Button、Text等所有组件这在复杂页面上可能造成不必要的性能损耗。在实践中可以把输入框封装成独立 Composable让状态尽量靠近使用者Composable fun UsernameField( value: String, onValueChange: (String) - Unit ) { OutlinedTextField( value value, onValueChange onValueChange, label { Text(用户名) } ) }这样当username变化时只有UsernameField内部会重组其他区域不受影响。8.5 安全与合规提示密码输入框不要明文打印日志。提交用户输入时在服务端再次校验参数合法性客户端校验不能代替服务端校验。涉及用户隐私数据时遵循最小权限原则只申请必要权限。9. 总结与下一步学习建议到这里Jetpack Compose 中三个最常用的基础组件就讲完了。通过实际案例我们已经掌握了OutlinedTextField的状态绑定和常见参数、Button的样式和点击状态管理、Snackbar的协程调用方式和 Action 交互逻辑。这些能力已经足够支撑你开始搭建一个简单的 Compose 表单页面。接下来可以按照下面的路线继续深入学习阶段建议内容初级掌握Column、Row、Box布局理解Modifier常用属性中级学习remember、rememberSaveable、mutableStateOf的状态机制进阶学习ViewModel集成、Navigation 路由、列表LazyColumn高级学习自定义布局、动画、Compose 与 View 的互操作在开始下一个项目前建议把本文的登录页面自己动手写一遍然后尝试加入“显示/隐藏密码切换”“正则校验邮箱格式”“提交时按钮显示加载状态”这几个功能。自己敲一遍代码和你只看文章跑一遍示例完全是两种体验。Compose 的 API 演进速度比较快如果遇到编译报错优先检查 Compose BOM 版本和 Material3 API 的变化再搜索对应错误信息。如果本文对你有帮助可以收藏备用。后续我会继续更新 Jetpack Compose 布局、状态管理、网络请求等实战文章欢迎持续关注。 Jetpack Compose入门：输入框、按钮与Snackbar实战详解
先分享一个很多初学 Jetpack Compose 的朋友都会遇到的情况跟着文档写了一个OutlinedTextField结果发现输入框里的文字无论怎么打字都不变用Button点击后想弹出Snackbar又发现要么不显示要么必须写一堆晦涩的协程代码才弹得出来。网上资料零散Copy 下来的代码能跑但完全不知道原理。本文围绕 Jetpack Compose 中三个高频基础组件——输入框、按钮和 Snackbar从声明式 UI 的核心概念讲起再到参数拆解、完整可运行案例和常见坑点排查。新手可以把本文当作第一份 Compose 入门教程有 Java/Kotlin 基础的开发者也能直接跳到实战部分复用代码。Jetpack Compose 是 Android 官方推出的声明式 UI 工具包目前已经成为原生 Android 开发的主流方案。相比传统的 View 体系Compose 在界面描述方式、状态管理、重组机制上都有很大差异。本文的内容会聚焦在最常用、最基础的三类组件OutlinedTextField输入框、Button按钮、Snackbar轻提示掌握这三个组件基本就能搭建一个可交互的简单页面。1. 背景与核心概念1.1 什么是声明式 UI在了解输入框和按钮之前先弄清楚声明式 UI 到底是什么。传统 Android 开发使用 View 体系时是典型的命令式 UI。你拿到一个TextView调用它的setText()方法界面才会更新。如果页面有多处地方需要同步状态就需要手动找到每个 View 并更新它界面越复杂状态同步就越容易出现遗漏。Jetpack Compose 则完全不同。它采用声明式的思想UI 是状态State的函数。你只需要描述 “当数据是什么样时界面显示成什么样”剩下的交给 Compose 框架处理。当状态变化时Compose 会自动重新执行对应的 Composable 函数更新界面中变化的部分这个机制被称为重组Recomposition。举个例子用传统 View 更新一个输入框内容代码大致是EditText editText findViewById(R.id.edit_text); editText.setText(新的内容);而在 Compose 中输入框的写法是Composable fun GreetingInput() { var text by remember { mutableStateOf() } OutlinedTextField( value text, onValueChange { text it } ) }这里value就是输入框展示的内容onValueChange是用户输入后回调的新内容。界面不再是一个需要手动操作的控件对象而是由状态驱动的一次渲染结果。1.2 Compose 中三个基础组件的定位组件作用对应传统 View 控件OutlinedTextField文本输入框EditTextButton可点击按钮ButtonAppCompatSnackbar页面底部轻提示SnackbarMaterial DesignOutlinedTextField是 Material Design 风格的外框输入框视觉上有明显的边框和标签适合表单场景。Button是点击触发动作的组件配合onClick回调使用。Snackbar则用于在不打断用户操作的前提下显示一条短暂的提示信息经常和按钮点击事件配合使用。这里要特别强调一个认知Compose 里的组件不是控件而是函数。它们没有findViewById没有实例引用没有生命周期。你写的每个Button在编译后会参与 UI 树的构建但你在代码层面操作的是函数参数和回调而不是对象本身。1.3 为什么推荐从这三个组件开始学习原因很直接几乎所有 App 的表单、登录注册、设置页面都会用到输入框和按钮而操作反馈经常会用到 Snackbar。这三个组件组合起来已经能实现一个完整的最小业务闭环用户输入信息、点击按钮、看到操作结果。掌握了它们你就能开始写有交互的 Compose 页面而不是停留在静态界面。2. 环境准备与开发工具2.1 Android Studio 与 SDK 版本开发 Jetpack Compose 应用推荐使用最新稳定版 Android Studio。本文示例以常见环境为例重点演示代码和配置思路具体版本号请根据你的开发环境调整。需要满足的条件如下项目说明IDEAndroid Studio Hedgehog 或更新版本语言Kotlin 1.9 或更新版本SDKAndroid 5.0API 21及以上JDKJDK 17构建工具Gradle 8.0 或更新版本如果你的项目是旧项目迁移到 Compose需要在build.gradle.kts中开启 Compose 编译选项。2.2 新建 Compose 项目在 Android Studio 中新建项目时选择Empty Activity并在语言处选择 Kotlin。新版 Android Studio 会默认生成支持 Compose 的项目模板。模板中的模块级build.gradle.kts通常包含以下内容android { namespace com.example.composebasic compileSdk 34 defaultConfig { applicationId com.example.composebasic minSdk 24 targetSdk 34 versionCode 1 versionName 1.0 } buildFeatures { compose true } compileOptions { sourceCompatibility JavaVersion.VERSION_17 targetCompatibility JavaVersion.VERSION_17 } kotlinOptions { jvmTarget 17 } } dependencies { implementation(platform(androidx.compose:compose-bom:2024.02.00)) implementation(androidx.compose.ui:ui) implementation(androidx.compose.ui:ui-graphics) implementation(androidx.compose.ui:ui-tooling-preview) implementation(androidx.compose.material3:material3) implementation(androidx.activity:activity-compose:1.8.0) }2.3 依赖说明项目使用了 Compose BOMBill of Materials来统一管理各 Compose 库版本。BOM 可以让所有 Compose 相关库保持在兼容的版本组合上升级时只需修改 BOM 版本即可。activity-compose库提供了setContent扩展函数是 Compose Activity 与传统 Activity 之间的桥梁。只要新项目模板会自带这些依赖不需要手动添加。如果你的项目无法访问远程仓库执行 Gradle 同步时报依赖下载失败请检查阿里云镜像或仓库配置是否正常。不要在代码层面强行屏蔽错误先确保基础依赖构建通过。3. 输入框OutlinedTextField 详解3.1 最简单的输入框在 Compose 中使用OutlinedTextField核心是两个参数value和onValueChange。value是当前输入框的内容onValueChange是内容变化时的回调。先写一个最基础的版本Composable fun BasicTextField() { var text by remember { mutableStateOf() } OutlinedTextField( value text, onValueChange { newText - text newText }, label { Text(用户名) }, placeholder { Text(请输入用户名) } ) }这里的remember { mutableStateOf() }是 Compose 状态管理的核心。mutableStateOf创建了一个可观察的状态容器当text的值改变时Compose 会自动标记当前组合需要重组重新执行BasicTextField函数从而刷新界面。label和placeholder都是可组合函数类型的参数。label是输入框的常驻标签输入内容后标签会浮动到边框上方placeholder是输入框为空时的灰色占位提示输入内容后自动隐藏。3.2 常用参数拆解OutlinedTextField有很多可选参数下面挑几个高频使用场景说明。单行输入OutlinedTextField( value text, onValueChange { text it }, singleLine true )设置singleLine true后输入框不会换行软键盘的换行键会变成“完成”或“搜索”。键盘类型OutlinedTextField( value text, onValueChange { text it }, keyboardOptions KeyboardOptions(keyboardType KeyboardType.Password) )KeyboardOptions控制软键盘的显示类型。KeyboardType.Password虽然会在键盘层面切换密码模式但不会自动做密文显示需要配合visualTransformation。密码输入框var password by remember { mutableStateOf() } OutlinedTextField( value password, onValueChange { password it }, label { Text(密码) }, visualTransformation PasswordVisualTransformation(), keyboardOptions KeyboardOptions(keyboardType KeyboardType.Password) )PasswordVisualTransformation()会把输入内容显示为圆点实现密码不可见的效果。只看明文这里有一个关键点visualTransformation只是修改了显示效果value中保存的仍然是用户输入的原文提交时直接读取password即可。限制输入长度OutlinedTextField( value text, onValueChange { if (it.length 10) { text it } } )在onValueChange中做截断判断超过长度就丢弃新值。这就是声明式 UI 的特点不是“限制输入框的长度属性”而是“当状态超过长度时不更新状态”。前置图标与后置图标OutlinedTextField( value text, onValueChange { text it }, leadingIcon { Icon(Icons.Default.Search, contentDescription 搜索) }, trailingIcon { if (text.isNotEmpty()) { IconButton(onClick { text }) { Icon(Icons.Default.Close, contentDescription 清空) } } } )leadingIcon是输入框左侧图标trailingIcon是右侧图标。上面的示例实现了一个可点击清空输入内容的按钮Icons.Default.Search和Icons.Default.Close来自androidx.compose.material.icons包。错误提示var hasError by remember { mutableStateOf(false) } OutlinedTextField( value text, onValueChange { text it }, isError hasError, supportingText { if (hasError) { Text(输入内容不能为空) } } )isError true时输入框边框会变红supportingText可以显示辅助说明文字适合表单校验场景。3.3 输入框的状态存储remember 还是 rememberSaveable先看一个简单的对比// 屏幕旋转或进程恢复后丢失 var text by remember { mutableStateOf() } // 屏幕旋转或进程恢复后保留 var text by rememberSaveable { mutableStateOf() }remember只在当前的组合期间保持状态当 Activity 旋转重建、进程被系统回收后数据会丢失。rememberSaveable会把状态存入 Bundle能够跨配置变更和进程重建存活。实际项目中表单输入框的内容建议尽量使用rememberSaveable避免用户输入一半时旋转屏幕导致数据清空体验很差。rememberSaveable可以保存可序列化对象。如果状态是自定义数据类要么让它实现Parcelable要么传入自定义Saver。初学者先掌握基本用法复杂场景后续再深入。3.4 输入框的常见误区误区原因正确做法输入后文字不变没有把onValueChange的新值写回状态在onValueChange中执行text it密码显示为明文缺少PasswordVisualTransformation()添加visualTransformation旋转屏幕后内容丢失使用了remember换成rememberSaveable输入框无限增高缺少singleLine true或固定高度设置singleLine或maxLines其中“输入后文字不变”是最常见的问题。根本原因是 Compose 中OutlinedTextField是一个受控组件value参数决定了它的显示内容如果用户输入了新的内容但不更新value输入框会一直停留在旧值上。这一点和传统 Android 的EditText有本质区别。4. 按钮Button 系列组件4.1 Button 的基本用法Compose 提供多个按钮组件都位于androidx.compose.material3包中。最常用的是Button、OutlinedButton和TextButton。最简单的按钮Composable fun SimpleButton() { Button( onClick { println(按钮被点击了) } ) { Text(提交) } }Button的第一个参数onClick是点击回调后面的 Lambda 是按钮的内容区域。内容区域可以放Text、Icon、Row等多种可组合函数自由度很高。4.2 不同风格的按钮Material 3 中按钮风格区分如下按钮组件适用场景视觉特征Button主要操作、强调操作填充底色视觉权重最高OutlinedButton次要操作、辅助操作透明背景有边框TextButton低优先级操作、列表内操作纯文字无背景无边框FilledTonalButton中等强调操作浅色填充背景使用时根据操作的重要程度选择合适的按钮风格。页面上通常只有一个主要的Button其余操作用OutlinedButton或TextButton弱化。Row( horizontalArrangement Arrangement.spacedBy(8.dp) ) { Button(onClick { /* 主要操作 */ }) { Text(保存) } OutlinedButton(onClick { /* 次要操作 */ }) { Text(取消) } TextButton(onClick { /* 链接操作 */ }) { Text(忘记密码) } }4.3 按钮的启用与禁用状态Button有一个enabled参数默认是true。设置为false时按钮不可点击并显示为灰色禁用态。var inputText by rememberSaveable { mutableStateOf() } Button( onClick { // 提交逻辑 }, enabled inputText.isNotEmpty() ) { Text(提交) }这个用法非常契合表单场景输入框内容为空时按钮不可点有内容时才可点。由于inputText是 Compose 状态当它变化时按钮会重组enabled的值会自动更新无需手动刷新。4.4 按钮的样式定制Material 3 的Button可以通过ButtonDefaults定制颜色、形状和高度Button( onClick { /* 点击逻辑 */ }, shape RoundedCornerShape(12.dp), colors ButtonDefaults.buttonColors( containerColor Color(0xFF3F51B5), contentColor Color.White ), elevation ButtonDefaults.buttonElevation( defaultElevation 6.dp, pressedElevation 2.dp ) ) { Icon( Icons.Default.Check, contentDescription null, modifier Modifier.size(18.dp) ) Spacer(modifier Modifier.width(6.dp)) Text(确认) }containerColor是按钮背景色contentColor是内容文字和图标颜色。shape控制整体形状elevation控制阴影高度。按压时阴影高度降低可以制造“按钮被按下”的视觉反馈。4.5 按钮的点击范围与节流生产环境中按钮容易遇到重复点击问题例如支付提交被快速点击两次。Compose 的Button默认不做点击节流需要开发者自己控制。最简单的方案是通过状态加锁var isSubmitting by remember { mutableStateOf(false) } Button( onClick { if (isSubmitting) returnButton isSubmitting true // 模拟提交 // 提交完成后恢复 isSubmitting false } ) { Text(if (isSubmitting) 提交中... else 提交) }更规范的做法是使用协程或自定义Modifier.pointerInput做节流。初学者先掌握状态加锁方案够用且容易理解。5. Snackbar轻提示组件5.1 Snackbar 与 Toast 的区别很多从传统 View 开发过来的同学会问Snackbar 和 Toast 有什么区别对比项ToastSnackbar交互不可交互展示完自动消失可以带 Action 按钮用户可点击位置系统控制通常在屏幕底部页面内底部可指定位置依赖全局系统服务页面内的 Scaffold 容器样式固定风格定制能力弱可定制颜色、形状、时长在 Compose 项目中推荐优先使用 Snackbar 做操作反馈尤其是需要“撤销”之类交互的轻提示场景。5.2 Scaffold 与 SnackbarHostCompose 中的Snackbar必须搭配SnackbarHost使用。而SnackbarHost通常放在页面的Scaffold容器中这样 Snackbar 会自动定位在屏幕底部安全区域内。基本结构如下OptIn(ExperimentalMaterial3Api::class) Composable fun SnackbarDemo() { val snackbarHostState remember { SnackbarHostState() } val scope rememberCoroutineScope() Scaffold( snackbarHost { SnackbarHost(snackbarHostState) } ) { innerPadding - Column( modifier Modifier .padding(innerPadding) .padding(16.dp) ) { Button( onClick { scope.launch { snackbarHostState.showSnackbar(操作成功) } } ) { Text(显示 Snackbar) } } } }SnackbarHostState持有 Snackbar 的显示状态。rememberCoroutineScope()创建一个与当前组合生命周期绑定的协程作用域通过scope.launch启动一个协程来调用showSnackbar。5.3 为什么 showSnackbar 必须在协程中调用这是新手最容易疑惑的地方。showSnackbar是一个挂起函数suspend function它会等待 Snackbar 显示完毕、超时或用户消费完事件后再返回。这个等待过程可能导致几秒的阻塞不能在主线程中以同步方式调用。而通过协程挂起主线程不会被阻塞Snackbar 显示期间用户可以继续操作界面。在 Compose 中比较常见的调用方式有两种方式一通过 rememberCoroutineScope 启动协程这种方式适合在 Button 点击回调中调用val scope rememberCoroutineScope() Button( onClick { scope.launch { snackbarHostState.showSnackbar(操作成功) } } ) { Text(显示 Snackbar) }方式二通过 LaunchedEffect 启动协程这种方式适合在 Composable 初次进入或状态满足条件时自动弹出var showMessage by remember { mutableStateOf(false) } if (showMessage) { LaunchedEffect(snackbarHostState) { snackbarHostState.showSnackbar(欢迎使用) showMessage false } }LaunchedEffect会在组合期间启动一个协程当 key 变化或离开组合时会取消协程。注意上面的showMessage false写在showSnackbar完成后执行表示 Snackbar 显示结束后重置触发状态。5.4 Snackbar 的时长与 Action 按钮showSnackbar支持多个参数snackbarHostState.showSnackbar( message 删除成功, actionLabel 撤销, duration SnackbarDuration.Short, withDismissAction true )参数类型说明messageString提示内容actionLabelString?操作按钮文案durationSnackbarDuration展示时长withDismissActionBoolean是否显示关闭按钮duration有三个取值SnackbarDuration.Short短时间展示SnackbarDuration.Long较长时间展示SnackbarDuration.Indefinite一直展示直到被关闭或新 Snackbar 替代如果设置了actionLabelSnackbar 会显示一个可点击的 Action 按钮。showSnackbar的返回值是一个SnackbarResult枚举可以通过判断返回值来处理用户点击了 Action 还是 Snackbar 自动消失scope.launch { val result snackbarHostState.showSnackbar( message 删除成功, actionLabel 撤销, duration SnackbarDuration.Long ) when (result) { SnackbarResult.ActionPerformed - { // 用户点击了撤销 } SnackbarResult.Dismissed - { // Snackbar 超时消失或被关闭 } } }5.5 Snackbar 不显示或只显示一次的排查思路在实际开发中“Snackbar 不显示”是很常见的问题原因通常有以下几种问题现象常见原因解决思路Snackbar 完全不显示SnackbarHost没有放到Scaffold中在Scaffold的snackbarHost参数中绑定连续点击只显示一次前一个协程还没结束后一个启动在scope.launch前加判断或使用currentSnackbarDataSnackbar 被内容遮挡innerPadding未应用到页面内容在内容外层 Modifier 上.padding(innerPadding)Snackbar 显示后立即消失duration设置为Short且消息过长调整为Long或Indefinite页面销毁后协程还在弹协程作用域绑定错误使用rememberCoroutineScope或LaunchedEffect不要创建全局作用域连续点击只显示一次的问题很多人遇到过。原因是snackbarHostState.showSnackbar是挂起函数前一个协程还在等待显示完成后一个协程又调用了同一个SnackbarHostState。可以采用以下方式处理val snackbarHostState remember { SnackbarHostState() } if (snackbarHostState.currentSnackbarData null) { scope.launch { snackbarHostState.showSnackbar(新的提示) } }currentSnackbarData如果为null说明当前没有正在显示的 Snackbar才启动新的协程。6. 完整实战输入框 按钮 Snackbar 联动前面把三个组件分开讲完了现在把它们组合在一个完整的业务场景中。这个需求很常见用户输入内容点击提交按钮校验输入通过后弹出 Snackbar 提示成功失败则提示错误。6.1 项目结构app/src/main/java/com/example/composebasic/ ├── MainActivity.kt ├── ui/ │ └── theme/ │ ├── Color.kt │ ├── Theme.kt │ └── Type.kt └── screen/ └── LoginScreen.kt这里把页面逻辑拆到screen/LoginScreen.kt中MainActivity只负责承载内容。6.2 MainActivity 代码// 文件路径app/src/main/java/com/example/composebasic/MainActivity.kt package com.example.composebasic import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.ui.Modifier import com.example.composebasic.screen.LoginScreen import com.example.composebasic.ui.theme.ComposeBasicTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeBasicTheme { Surface( modifier Modifier.fillMaxSize(), color MaterialTheme.colorScheme.background ) { LoginScreen() } } } } }6.3 LoginScreen 核心代码// 文件路径app/src/main/java/com/example/composebasic/screen/LoginScreen.kt package com.example.composebasic.screen import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Lock import androidx.compose.material.icons.filled.Person 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.text.input.PasswordVisualTransformation import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import kotlinx.coroutines.launch Composable fun LoginScreen() { var username by rememberSaveable { mutableStateOf() } var password by rememberSaveable { mutableStateOf() } var passwordVisible by remember { mutableStateOf(false) } var isSubmitting by remember { mutableStateOf(false) } val snackbarHostState remember { SnackbarHostState() } val scope rememberCoroutineScope() Scaffold( snackbarHost { SnackbarHost(snackbarHostState) } ) { innerPadding - Column( modifier Modifier .fillMaxSize() .padding(innerPadding) .verticalScroll(rememberScrollState()) .padding(horizontal 24.dp), horizontalAlignment Alignment.CenterHorizontally, verticalArrangement Arrangement.Center ) { Text( text 欢迎登录, style MaterialTheme.typography.headlineMedium, color MaterialTheme.colorScheme.primary ) Spacer(modifier Modifier.height(32.dp)) OutlinedTextField( value username, onValueChange { username it }, label { Text(用户名) }, placeholder { Text(请输入用户名) }, singleLine true, leadingIcon { Icon(Icons.Default.Person, contentDescription 用户名) }, modifier Modifier.fillMaxWidth() ) Spacer(modifier Modifier.height(16.dp)) OutlinedTextField( value password, onValueChange { password it }, label { Text(密码) }, placeholder { Text(请输入密码) }, singleLine true, leadingIcon { Icon(Icons.Default.Lock, contentDescription 密码) }, trailingIcon { IconButton(onClick { passwordVisible !passwordVisible }) { Icon( if (passwordVisible) Icons.Default.Info else Icons.Default.Info, contentDescription if (passwordVisible) 隐藏密码 else 显示密码 ) } }, visualTransformation if (passwordVisible) { VisualTransformation.None } else { PasswordVisualTransformation() }, keyboardOptions KeyboardOptions(keyboardType androidx.compose.ui.text.input.KeyboardType.Password), modifier Modifier.fillMaxWidth() ) Spacer(modifier Modifier.height(24.dp)) Button( onClick { if (isSubmitting) returnButton when { username.isBlank() - { scope.launch { snackbarHostState.showSnackbar(用户名不能为空) } } password.length 6 - { scope.launch { snackbarHostState.showSnackbar(密码长度至少 6 位) } } else - { isSubmitting true scope.launch { // 模拟网络请求 Thread.sleep(1000) snackbarHostState.showSnackbar(登录成功) isSubmitting false } } } }, enabled username.isNotBlank() password.isNotBlank(), modifier Modifier .fillMaxWidth() .height(48.dp) ) { Text(登录) } Spacer(modifier Modifier.height(12.dp)) TextButton( onClick { scope.launch { snackbarHostState.showSnackbar(此处跳转忘记密码页) } }, modifier Modifier.align(Alignment.CenterHorizontally) ) { Text(忘记密码) } } } }6.4 代码运行逻辑说明这段示例覆盖了前文讲到的全部知识点rememberSaveable保存用户名和密码防止旋转屏幕导致内容丢失。OutlinedTextField的value和onValueChange形成状态闭环输入内容会实时更新状态。密码框通过passwordVisible状态控制明文/密文显示点击右侧图标切换。登录按钮的enabled绑定输入状态用户名和密码都不为空时才可点击。点击后先做输入校验失败时通过scope.launch显示对应 Snackbar 提示。校验通过后设置isSubmitting true模拟提交利用Thread.sleep(1000)模拟耗时网络请求场景中应使用实际请求代码。提交完成后显示“登录成功” Snackbar并恢复isSubmitting。6.5 运行与验证连接模拟器或真机运行项目预期效果如下输入框为空时登录按钮为灰色不可点状态。输入用户名后输入框中内容正常显示。输入少于 6 位的密码后点击登录底部弹出“密码长度至少 6 位”提示。输入合法内容后点击登录按钮短暂处于不可点状态随后弹出“登录成功”提示。点击密码框右侧图标可以切换密码明文和密文显示。7. 常见问题与排查思路7.1 输入框的输入内容不更新现象在输入框里打字屏幕上的文字没有变化。原因OutlinedTextField的value没有和onValueChange形成正确闭环。常见的情况是onValueChange中只打印了日志没有把新值写回状态变量。解决var text by rememberSaveable { mutableStateOf() } OutlinedTextField( value text, onValueChange { text it } )value text负责显示onValueChange { text it }负责更新。这两行缺一不可。7.2 点击 Snackbar 不弹出现象点击按钮后页面上没有任何提示。原因和排查步骤检查Scaffold是否正确设置了snackbarHost { SnackbarHost(snackbarHostState) }。检查showSnackbar是否在协程中调用直接写snackbarHostState.showSnackbar(提示)会编译报错因为挂起函数必须在协程中调用。检查当前是否有 Snackbar 正在显示如果有新的调用会被忽略。检查SnackbarHostState是否在remember中创建是否被多个组件共用相同实例。7.3 enabled 生效但按钮仍可点击现象给Button设置了enabled false但按钮仍然有点击效果。原因enabled false时onClick回调不会触发但视觉上可能因为主题样式原因仍然看起来像可点击状态。Material 3 默认会降低禁用态的不透明度和对比度通常不需要额外修改。如果确实需要可通过自定义ButtonDefaults.buttonColors(disabledContainerColor ...)调整。7.4 键盘把输入框挡住现象输入框在页面底部软键盘弹出后输入框被遮挡。解决思路在AndroidManifest.xml的 Activity 配置中设置android:windowSoftInputModeadjustResize这样软键盘弹出时 Activity 会调整大小配合Scaffold的innerPadding可以避免遮挡activity android:name.MainActivity android:windowSoftInputModeadjustResize /另外输入内容不多时可以给Column加上verticalScroll(rememberScrollState())支持滚动后输入框会自动滚到可见区域。7.5 Snackbar 提示与页面生命周期如果使用rememberCoroutineScope()创建协程协程会绑定在当前 Composable 的组合生命周期上。页面销毁时协程会被取消不会出现泄漏问题。不要使用GlobalScope.launch去弹 Snackbar任务无法取消且容易引发内存泄漏。8. 最佳实践与工程建议8.1 统一管理界面状态实际项目中不建议把username、password直接散落在各个 Composable 函数中。可以采用状态提升State Hoisting的模式把状态集中到一个 ViewModel 中管理class LoginViewModel : ViewModel() { var username by mutableStateOf() private set var password by mutableStateOf() private set fun onUsernameChange(newValue: String) { username newValue } fun onPasswordChange(newValue: String) { password newValue } }Compose 中的mutableStateOf也可以放在 ViewModel 中使用配合by委托可以直接读取和赋值。这样输入框的value就不会有多个来源状态变更路径清晰可追踪。8.2 避免在 Composable 中执行业务逻辑Composable 函数只负责界面渲染不应包含网络请求、数据库操作等耗时逻辑。特别是按钮的onClick中应该只做事件转发把真正的业务处理放到 ViewModel 或 Repository 层。示例中的Thread.sleep(1000)只是模拟耗时真实项目中一定要用协程的delay或实际网络请求不要在主线程做阻塞操作。8.3 输入校验的时机选择表单校验分为实时校验和提交时校验两种实时校验适合用户需要即时反馈的场景例如确认密码是否一致。提交时校验适合操作门槛较低的场景比如用户名非空、密码长度限制。在 Compose 中可以这样区分// 实时校验 OutlinedTextField( value email, onValueChange { email it }, isError email.isNotEmpty() !email.contains() ) // 提交时校验 Button( onClick { if (email.isBlank()) { scope.launch { snackbarHostState.showSnackbar(邮箱不能为空) } returnButton } // 继续提交 } ) { Text(提交) }实时校验展示在组件内的supportingText或isError中提交时校验使用 Snackbar 提示两者结合能获得比较好的交互体验。8.4 关注 Compose 的重组范围Compose 性能优化的一个重点是最小化重组范围。以登录页为例如果username状态变化导致整个LoginScreen函数重组其中包含password输入框、Button、Text等所有组件这在复杂页面上可能造成不必要的性能损耗。在实践中可以把输入框封装成独立 Composable让状态尽量靠近使用者Composable fun UsernameField( value: String, onValueChange: (String) - Unit ) { OutlinedTextField( value value, onValueChange onValueChange, label { Text(用户名) } ) }这样当username变化时只有UsernameField内部会重组其他区域不受影响。8.5 安全与合规提示密码输入框不要明文打印日志。提交用户输入时在服务端再次校验参数合法性客户端校验不能代替服务端校验。涉及用户隐私数据时遵循最小权限原则只申请必要权限。9. 总结与下一步学习建议到这里Jetpack Compose 中三个最常用的基础组件就讲完了。通过实际案例我们已经掌握了OutlinedTextField的状态绑定和常见参数、Button的样式和点击状态管理、Snackbar的协程调用方式和 Action 交互逻辑。这些能力已经足够支撑你开始搭建一个简单的 Compose 表单页面。接下来可以按照下面的路线继续深入学习阶段建议内容初级掌握Column、Row、Box布局理解Modifier常用属性中级学习remember、rememberSaveable、mutableStateOf的状态机制进阶学习ViewModel集成、Navigation 路由、列表LazyColumn高级学习自定义布局、动画、Compose 与 View 的互操作在开始下一个项目前建议把本文的登录页面自己动手写一遍然后尝试加入“显示/隐藏密码切换”“正则校验邮箱格式”“提交时按钮显示加载状态”这几个功能。自己敲一遍代码和你只看文章跑一遍示例完全是两种体验。Compose 的 API 演进速度比较快如果遇到编译报错优先检查 Compose BOM 版本和 Material3 API 的变化再搜索对应错误信息。如果本文对你有帮助可以收藏备用。后续我会继续更新 Jetpack Compose 布局、状态管理、网络请求等实战文章欢迎持续关注。