Chuyển đến nội dung chính

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.


  1. 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.





Nhãn:

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Thiết kế giao diện với DotNetBar (Phần 1)

Đây là phiên bản DotNetBar hỗ trợ C# và Visual Basic https://www.dropbox.com/s/wx80jpvgnlrmtux/DotNetBar.rar  , phiên bản này hỗ trợ giao diện Metro cực kỳ “dễ thương” Các bạn load về và cài đặt, khi cài đặt xong sẽ có source code mẫu của tất cả các control. Để sử dụng được các control của DotNetBar các bạn nhớ add item vào controls box. Thiết kế giao diện với DotNetBar, giao diện sẽ rất đẹp. Link các video hướng dẫn chi tiết cách sử dụng và coding: http://www.devcomponents.com/dotnetbar/movies.aspx Hiện tại DotNetBar có rất nhiều công cụ cực mạnh, trong đó có 3 công cụ dưới đây: DotNetBar for Windows Forms Requires with Visual Studio 2003, 2005, 2008, 2010 or 2012.   DotNetBar for WPF Requires with Visual Studio 2010 or 2012 and Windows Presentation Foundation.   DotNetBar for Silverlight Requires with Visual Studio 2010 or 2012 and Silverlight. Dưới đây là một số hình ảnh về các control trong DotnetBar.   Metro User Interface  controls with Metro Tiles, toolba...
1 nhận xét
Đọc thêm

Jetpack Compose: Lists

  Hai cách chúng ta có thể triển khai Lists trong Jetpack Compose. Lưu ý: Tôi đang sử dụng Jetpack Compose phiên bản 0.1.0-dev08 tại thời điểm viết bài này. Sử dụng AdapterList Chúng ta có thể sử dụng AdapterList composable - nó tương đương với RecyclerViews + RecyclerViewAdapters - nhưng với ít mã hơn đáng kể 😍 Phương thức khởi tạo AdapterList nhận dữ liệu, là danh sách các mục bạn muốn hiển thị và chuyển các mục riêng lẻ đến lambda. Ở đó bạn có thể xác định mục danh sách. Hiện tại, nó chỉ giới hạn ở việc cuộn dọc. Điều này có thể thay đổi trong các bản phát hành trong tương lai. Multiple Types Chúng ta có thể dễ dàng phân biệt giữa các loại chế độ xem khác nhau - chỉ cần thêm điều kiện if. Dưới đây là một ví dụ nếu chúng tôi muốn hiển thị một tiêu đề ở đầu danh sách: 2.Using Vertical and Horizontal Scrollers Một cách khác để triển khai danh sách là sử dụng các Scrollers đơn giản - những công cụ này sẽ không sử dụng các chế độ xem tái chế. Vì vậy, không thực sự lý tưởng cho lists...
Đăng nhận xét
Đọc thêm

5 concepts every Flutter dev should know

  Phụ lục: State management architecture Testing IDE Shortcuts Platform channel Maintaining a project Tôi đã làm việc với Flagship trong một thời gian dài, và đây là những điều mà tôi phát hiện ra là điều cần phải có đối với bất kỳ nhà phát triển Flagship nào, về tổng thể nó sẽ khiến bạn trở thành một nhà phát triển Flagship giỏi trong thời gian dài. 1. State management architecture Đây là một trong những chủ đề quan trọng nhất trong cộng đồng thiết bị rung, nó khá quan trọng nếu bạn muốn duy trì một dự án rung kích thước trung bình hoặc lớn. Nó sẽ giúp tạo một dự án suôn sẻ và thêm các tính năng mới một cách hoàn hảo.  2. Testing Đây là một chủ đề duy nhất mà tôi không hiểu tại sao nó lại quan trọng trước đó trong sự nghiệp của tôi, nhưng khi tôi tiến lên trong sự nghiệp của mình và có kinh nghiệm với nhiều dự án và vấn đề xảy ra trong môi trường sản xuất. Tôi đã nhận ra một cách khó khăn, tại sao điều này lại quan trọng như vậy. Nếu bạn vẫn muốn có thêm lý do để cân nhắc thử...
Đăng nhận xét
Đọc thêm