State Management in Jetpack Compose

 

Làm việc với Jetpack Compose trong Android và muốn cập nhật giao diện người dùng trong thời gian chạy có thể được xử lý bằng cách quản lý trạng thái trong Jetpack Compose. Trong bài viết này, chúng ta sẽ tìm hiểu:

• Làm thế nào để quản lý trạng thái trong Jetpack Compose?

• Quản lý các cách Trạng thái trong Compose

1. Làm thế nào để quản lý trạng thái trong Jetpack Compose?

Trước hết, Trạng thái là gì? Chúng ta hãy nhìn vào nó. Trạng thái nói chung là một đối tượng có chứa dữ liệu nhất định được ánh xạ tới một hoặc nhiều widget. Giá trị của trạng thái có thể thay đổi trong thời gian chạy, điều này sẽ giúp chúng tôi cập nhật tiện ích con với dữ liệu được cập nhật.

Trong Compose, bản cập nhật có thể tổng hợp được dựa trên giá trị của trạng thái. Khi giá trị được cập nhật, hàm có thể tổng hợp chỉ tái tạo lại giá trị có thể kết hợp có dữ liệu được cập nhật.

2. Quản lý các cách Trạng thái trong Compose

Trong Compose, chúng ta có thể quản lý trạng thái bằng MutableState

Bây giờ, chúng ta hãy hiểu làm thế nào chúng ta có thể sử dụng nó?

Trước tiên, hãy tạo một ứng dụng và thiết lập cơ bản. MainActivity của chúng tôi trông giống như:

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

MainScreen()

}

}

}

@Composable

fun MainScreen() {

}

Trong ứng dụng này, chúng tôi muốn thiết kế một textField.Thông thường chúng tôi biết nó là editText.Khi chúng ta nhấp vào textField và viết một cái gì đó bên trong, hiển thị những gì được viết trên màn hình.

Vì vậy, bây giờ chúng ta hãy bắt đầu triển khai.

Sử dụng MutableState trong Compose

Đầu tiên, chúng tôi sẽ tạo một hàm có thể kết hợp được gọi là:

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

MainScreen()

}

}

}

@Composable

fun MainScreen() {

}

@Composable

fun SpecialTextField(string: String, function: (String) -> Unit){

TextField(value = string ,onValueChange = function,modifier = Modifier.padding(5.dp))

}

Ở đây, chúng tôi đã thêm cấu trúc cơ bản của một TextField. Trong TextField, tôi đã thêm, onValueChange nơi sẽ cập nhật giá trị và trong TextField, chúng tôi sẽ cập nhật giá trị.

Bây giờ, chúng ta sẽ tạo một biến kiểu MutableState sẽ giữ giá trị ban đầu là “”. Khi chúng ta viết bên trong trạng thái Textfield sẽ biên soạn lại thành UI.

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

MainScreen()

}

}

}

@Composable

fun MainScreen() {

var myString = remember { mutableStateOf("")}

SpecialTextField(myString.value){ myString.value = it }

}

@Composable

fun SpecialTextField(string: String, function: (String) -> Unit){

TextField(value = string ,onValueChange = function,modifier = Modifier.padding(5.dp))

}

MutableState cung cấp cho chúng ta thuộc tính giá trị khi thực thi. Hàm Composable đăng ký với MutableState và khi giá trị thay đổi, thành phần lại của có thể soạn lại xảy ra và do đó giá trị được cập nhật.

Ở đây, trong ví dụ của chúng tôi, chúng tôi đang sử dụng ghi nhớ với MutableState. Các hàm tổng hợp có thể lưu trữ một đối tượng duy nhất trong bộ nhớ bằng cách sử dụng hàm tổng hợp có thể nhớ. Một giá trị được tính toán bởi nhớ được lưu trữ trong Thành phần trong quá trình tạo ban đầu và giá trị được lưu trữ được trả về trong quá trình bố cục lại. Hãy nhớ rằng có thể được sử dụng để lưu trữ cả các đối tượng có thể thay đổi và bất biến.

Bằng cách này, chúng tôi đảm bảo rằng đầu vào được in trên màn hình mỗi lần ghi nhớ.

Chúc bạn học tốt.