TextField
cho phép người dùng nhập và sửa đổi văn bản. Trang này mô tả cách bạn có thể triển khai TextField
, tạo kiểu cho phương thức nhập TextField
và định cấu hình các tuỳ chọn TextField
khác, chẳng hạn như tuỳ chọn bàn phím và biến đổi hình ảnh đầu vào của người dùng.
Chọn cách triển khai TextField
Có 2 cấp độ triển khai TextField
:
TextField
là cách triển khai Material Design. Bạn nên chọn cách triển khai này vì cách triển khai này tuân theo nguyên tắc Material Design:BasicTextField
cho phép người dùng chỉnh sửa văn bản thông qua bàn phím phần cứng hoặc phần mềm, nhưng không cung cấp thành phần trang trí như gợi ý hoặc phần giữ chỗ.
@Composable fun SimpleFilledTextFieldSample() { var text by remember { mutableStateOf("Hello") } TextField( value = text, onValueChange = { text = it }, label = { Text("Label") } ) }
@Composable fun SimpleOutlinedTextFieldSample() { var text by remember { mutableStateOf("") } OutlinedTextField( value = text, onValueChange = { text = it }, label = { Text("Label") } ) }
Kiểu TextField
TextField
và BasicTextField
cùng có chung nhiều thông số phổ biến để tuỳ chỉnh
các thông số đó. Danh sách đầy đủ cho TextField
có trong mã nguồn TextField
.
Đây là danh sách không đầy đủ một vài thông số hữu ích:
singleLine
maxLines
textStyle
@Composable fun StyledTextField() { var value by remember { mutableStateOf("Hello\nWorld\nInvisible") } TextField( value = value, onValueChange = { value = it }, label = { Text("Enter text") }, maxLines = 2, textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold), modifier = Modifier.padding(20.dp) ) }
Bạn nên dùng TextField
thay vì BasicTextField
khi thiết kế gọi cho Material TextField
hoặc OutlineTextField
. Tuy nhiên, bạn nên sử dụng BasicTextField
khi xây dựng các thiết kế không cần phần trang trí từ thông số Material.
Nhập kiểu bằng API Bút vẽ
Bạn có thể dùng Brush API để tạo kiểu nâng cao hơn trong TextField
. Phần sau đây mô tả cách bạn có thể dùng Bút vẽ để thêm độ dốc màu vào đầu vào TextField
.
Để biết thêm thông tin về cách sử dụng API Bút vẽ để tạo kiểu cho văn bản, hãy xem phần Bật tính năng tạo kiểu nâng cao bằng API Bút vẽ.
Triển khai độ dốc màu bằng TextStyle
Để triển khai độ dốc màu khi bạn nhập trong TextField
, hãy đặt bút vẽ mà bạn chọn là TextStyle
cho TextField
. Trong ví dụ này, chúng ta sử dụng bút vẽ tích hợp sẵn có linearGradient
để xem hiệu ứng chuyển màu cầu vồng khi nhập văn bản vào TextField
.
var text by remember { mutableStateOf("") } val brush = remember { Brush.linearGradient( colors = rainbowColors ) } TextField( value = text, onValueChange = { text = it }, textStyle = TextStyle(brush = brush) )
Đặt tuỳ chọn bàn phím
TextField
cho phép bạn cài đặt các tuỳ chọn cấu hình bàn phím, chẳng hạn như bố cục
bàn phím hoặc bật tính năng tự động sửa lỗi nếu được bàn phím hỗ trợ. Một số
tuỳ chọn có thể không được đảm bảo nếu bàn phím phần mềm không tuân thủ
các tuỳ chọn được cung cấp ở đây. Dưới đây là danh sách các tuỳ chọn bàn phím được hỗ trợ:
capitalization
autoCorrect
keyboardType
imeAction
Định dạng phương thức nhập
TextField
cho phép bạn thiết lập VisualTransformation
trên giá trị nhập, ví dụ như thay thế các ký tự bằng *
đối với mật khẩu hoặc chèn dấu gạch ngang cứ sau 4 chữ số đối với số thẻ tín dụng:
@Composable fun PasswordTextField() { var password by rememberSaveable { mutableStateOf("") } TextField( value = password, onValueChange = { password = it }, label = { Text("Enter password") }, visualTransformation = PasswordVisualTransformation(), keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password) ) }
Bạn có thể xem thêm ví dụ trong mã nguồn VisualTransformationSamples
.
Xoá dữ liệu đầu vào
Một tác vụ phổ biến khi chỉnh sửa văn bản là xoá các ký tự ở đầu hoặc biến đổi chuỗi nhập vào mỗi khi có sự thay đổi.
Như một mô hình, bạn nên giả định rằng bàn phím có thể tạo ra chỉnh sửa lớn và tuỳ ý cho từng onValueChange
. Điều này có thể xảy ra, ví dụ như khi người dùng sử dụng
tính năng tự động sửa, thay thế một từ bằng một biểu tượng cảm xúc hoặc các tính năng chỉnh sửa thông minh khác. Để
xử lý chính xác điều này, hãy viết bất kỳ logic chuyển đổi nào với giả định rằng
văn bản hiện tại đã được chuyển đến onValueChange
không liên quan đến các giá trị
trước đó hoặc tiếp theo sẽ được chuyển tới onValueChange
.
Để triển khai trường văn bản không cho phép các số 0 ở đầu, bạn có thể thực hiện bằng cách loại bỏ tất cả số 0 đứng đầu trên mọi thay đổi giá trị.
@Composable fun NoLeadingZeroes() { var input by rememberSaveable { mutableStateOf("") } TextField( value = input, onValueChange = { newText -> input = newText.trimStart { it == '0' } } ) }
Để kiểm soát vị trí con trỏ khi xóa văn bản, hãy sử dụng phương thức nạp chồng TextFieldValue
của TextField
như là một phần của trạng thái.
Các phương pháp hay nhất về trạng thái
Sau đây là một loạt phương pháp hay nhất để xác định và cập nhật trạng thái TextField
nhằm ngăn chặn các vấn đề về dữ liệu đầu vào trong ứng dụng.
- Sử dụng
MutableState
để biểu thị trạng tháiTextField
: Tránh sử dụng các luồng phản ứng nhưStateFlow
để biểu thị trạng tháiTextField
, vì các cấu trúc này có thể gây ra độ trễ không đồng bộ.
class SignUpViewModel : ViewModel() { var username by mutableStateOf("") private set /* ... */ }
- Tránh chậm trễ khi cập nhật trạng thái: Khi bạn gọi
onValueChange
, hãy cập nhậtTextField
một cách đồng bộ và ngay lập tức:
// SignUpViewModel.kt class SignUpViewModel(private val userRepository: UserRepository) : ViewModel() { var username by mutableStateOf("") private set fun updateUsername(input: String) { username = input } } // SignUpScreen.kt @Composable fun SignUpScreen(/*...*/) { OutlinedTextField( value = viewModel.username, onValueChange = { username -> viewModel.updateUsername(username) } /*...*/ ) }
- Nơi xác định trạng thái: Nếu trạng thái
TextField
yêu cầu xác thực logic nghiệp vụ khi bạn nhập, thì việc chuyển trạng thái lênViewModel
là chính xác. Nếu không, bạn có thể sử dụng các thành phần kết hợp hoặc lớp phần tử giữ trạng thái làm nguồn đáng tin cậy. Để tìm hiểu thêm về vị trí chuyển trạng thái lên trên, hãy xem tài liệu về chuyển trạng thái lên trên.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Thiết kế giao diện Compose
- Trạng thái và Jetpack Compose
- Lưu trạng thái giao diện người dùng trong Compose