M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Expressive TextField：状态决定形状1.5.0-alpha25
理解 TextField/OutlinedTextField 的 Expressive 重载、focused shape 和完整输入状态。
最后更新 2026-08-01
Expressive 不只是换颜色
catalog 提供 filled 与 outlined 两组示例，并覆盖 icon、placeholder、prefix/suffix、supporting text、error 和 password。核心差异是新的形状与状态表达，而不是删掉传统 TextField 能力。
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { text = it },
label = { Text("名称") },
shapes = TextFieldDefaults.shapes(),
)请以当前源码具体重载为准：TextField 同时存在兼容重载，只有接收新 shapes/状态参数的调用才会启用相应 Expressive 行为。
错误状态不是红色装饰
isError 应和 supporting text、语义描述一起提供。Password 示例还管理内容可见性和 trailing icon；不要因为页面展示新形状，就省略键盘类型、单行限制和可访问性描述。
状态所有权
输入内容仍由调用者或 TextFieldState 管理。形状动画不会自动完成校验、保存、焦点跳转或输入法动作。
复制即用
带形状与标签的输入框：
import androidx.compose.material3.Text
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
@Composable
fun NameField() {
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { text = it },
label = { Text("名称") },
shapes = TextFieldDefaults.shapes(),
)
}OutlinedTextField 使用相同的 shapes 重载；错误状态记得同时提供 isError 和 supporting text。