Jetpack Compose With MVVM

 

Kể từ khi tôi làm việc trong khoảng 2 năm trở lại đây, tôi đã là một fan hâm mộ lớn của giao diện người dùng khai báo nên tự nhiên tôi đã rất vui mừng khi nghe nói về Jetpack Compose trong Google I/O 2019 .. gần đây tôi đã tải xuống android studio canary để thử bản xem trước dành cho nhà phát triển của nó và đó là tất cả những gì tôi mong đợi và hơn thế nữa ❤

Mục đích của bài viết này là để chứng minh việc sử dụng Jetpack Compose với Kiến trúc MVVM, chúng tôi sẽ tạo một danh sách người dùng đơn giản (từ dữ liệu cục bộ) và cập nhật các giá trị của nó nhưng trước khi chúng tôi bắt đầu với mã, đây là một số gợi ý nhanh:

• “@Composable” được chú thích trước một hàm để khai báo nó là hàm UI

• Chú thích “@model” trước một lớp mô hình sẽ tự động cập nhật UI tương ứng khi giá trị của mô hình đó thay đổi

• Luồng dữ liệu luôn từ trên xuống dưới nên trong MVVM, dữ liệu sẽ đến từ Kho lưu trữ -> viewModel -> hoạt động và từ trạng thái hoạt động Model sẽ được cập nhật giao diện người dùng

• Bây giờ để xử lý các sự kiện từ giao diện người dùng như nhấp vào nút, chúng tôi sẽ sử dụng lambdas để cập nhật hoạt động của sự kiện xảy ra, từ hoạt động, luồng sẽ là hoạt động -> viewModel -> kho lưu trữ và từ kho lưu trữ, dữ liệu sẽ được gửi trở lại theo luồng đã đề cập ở điểm trên

• Ứng dụng này chỉ dành cho mục đích trình diễn vì vậy tôi đã cố gắng giữ mã ở mức tối thiểu và để làm như vậy, tôi đã không sử dụng mẫu kho lưu trữ và dữ liệu tĩnh được tạo trong chính viewModel

…

Nếu bạn muốn viết code cùng với bài viết bạn sẽ cần thiết lập dự án với android studio canary(4.0) bạn có thể tải về tại đây

Khi nó được thiết lập, hãy tạo một dự án mới và chọn hoạt động Compose trống làm mẫu dự án

Bây giờ chúng ta hãy bắt đầu với mã hóa

Trước hết chúng ta sẽ cần một mô hình người dùng đơn giản vì chúng ta đang tạo một danh sách người dùng, tạo một lớp mới có tên UserModel

class UserModel(name:String,surName:String,job:String) {

var userName:String = name

var userSurName:String = surName

var userJob:String = job

}

Bây giờ hãy tạo một lớp Model để giữ danh sách UserModels. Chúng tôi sẽ cần thông báo cho UI khi danh sách được cập nhật, vì vậy chúng tôi sẽ chú thích mô hình này bằng “@model”

import androidx.compose.Model

@Model

class UsersState(var users:ArrayList<UserModel> = ArrayList())

Bây giờ tạo một lớp đối tượng để giữ các hàm có thể kết hợp cho giao diện người dùng, hàm của chúng ta sẽ lấy UserState làm tham số, một điều cần lưu ý ở đây là chúng ta có thể sử dụng mã Kotlin thông thường trong các hàm có thể kết hợp để đạt được nhiệm vụ của mình

import androidx.compose.Composable

import androidx.ui.core.Text

import androidx.ui.core.dp

import androidx.ui.foundation.VerticalScroller

import androidx.ui.graphics.Color

import androidx.ui.layout.Column

import androidx.ui.layout.FlexColumn

import androidx.ui.layout.Row

import androidx.ui.layout.WidthSpacer

import androidx.ui.material.*

object UsersListUi {

@Composable

fun addList(state: UsersState) {

MaterialTheme {

FlexColumn {

inflexible {

// Item height will be equal content height

TopAppBar( // App Bar with title

title = { Text("Users") }

)

VerticalScroller {

Column {

state.users.forEach {

Column {

Row {

Text(text = it.userName)

WidthSpacer(width = 2.dp)

Text(text = it.userSurName)

}

Text(text = it.userJob)

}

Divider(color = Color.Black, height = 1.dp)

}

}

}

}

}

}

}

}

Ở đây trong mã trên, chúng tôi đang sử dụng cho vòng lặp để hiển thị danh sách không hiệu quả lắm, để mã hóa nó hiệu quả hơn google trêu chọc một cái gì đó được gọi là ScrollingList ... hiện tại khi viết bài viết này, nó chưa phải là một phần của Jetpack Compose nhưng nếu bạn đang đọc nó đôi khi trong tương lai hãy cố gắng thay thế dòng này bằng vòng lặp, nếu ScrollingList được phát hành, nó sẽ hoạt động nếu không bạn sẽ phải chờ đợi.

//state.users.forEach {

ScrollingList(state.users) {it ->

Bây giờ, hãy tạo một viewModel chứa logic nghiệp vụ, chúng tôi sẽ sử dụng livedata cho danh sách userModel

Thêm các phần phụ thuộc này vào tệp build.gradle của bạn

implementation 'android.arch.lifecycle:runtime:1.1.1'

implementation 'android.arch.lifecycle:extensions:1.1.1'

Tạo một tệp mới cho UsersListViewModel

import androidx.lifecycle.MutableLiveData

class UsersListViewModel {

private val usersList: MutableLiveData<ArrayList<UserModel>> by lazy {

MutableLiveData<ArrayList<UserModel>>()

}

private val users:ArrayList<UserModel> = ArrayList()

fun addUsers(){

users.add(UserModel("jon","doe","android developer"))

users.add(UserModel("john","doe","flutter developer"))

users.add(UserModel("jonn","dove","ios developer"))

usersList.value = users

}

fun getUsers():MutableLiveData<ArrayList<UserModel>>{

return usersList

}

}

Bây giờ hãy kết hợp mọi thứ lại với nhau trong MainActivity

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import androidx.lifecycle.Observer

import androidx.ui.core.setContent

class MainActivity : AppCompatActivity() {

private val usersState: UsersState = UsersState()

private val usersListViewModel:UsersListViewModel = UsersListViewModel()

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

usersListViewModel.getUsers().observe(this, Observer {

usersState.users.addAll(it)

})

usersListViewModel.addUsers()

setContent {

UsersListUi.addList(usersState)

}

}

}

• Chạy ứng dụng

Tất cả các mã cho đến bây giờ đều có sẵn ở đây

Những người muốn hiểu sâu hơn và thêm và xóa dữ liệu khỏi danh sách, đây là những gì bạn có thể làm 

trong lớp UsersListUi

thay đổi hàm tạo của phương thức addList để chấp nhận 2 lamdas để thông báo hoạt động khi nhấp vào nút

@Composable

fun addList(state: UsersState, onAddClick: () -> Unit, onRemoveClick: () -> Unit) {

sau đó thêm 2 nút và gọi lamdas khi nhấp chuột

FlexRow() {

expanded(flex = 1f) {

Button(

text = "add",

onClick = { onAddClick.invoke() },

style = OutlinedButtonStyle()

)

}

expanded(flex = 1f) {

Button(

text = "sub",

onClick = { onRemoveClick.invoke() },

style = OutlinedButtonStyle()

)

}

}

Từ MainActivity gửi lamdas đến hàm

UsersListUi.addList(

usersState,

onAddClick = { usersListViewModel.addNewUser() },

onRemoveClick = { usersListViewModel.removeFirstUser() })

Tại đây khi một nút được nhấp vào, nó sẽ gọi lamda sẽ thông báo hoạt động và hoạt động sẽ gọi các phương thức từ viewModel để cập nhật dữ liệu trong danh sách.

Cảm ơn bạn đã đọc!