Kiến thức

DataTable với triển khai MobX trong Flutter

Bạn đang xem: DataTable với triển khai MobX trong Flutter

DataTable với triển khai MobX trong Flutter

Hôm nay chúng ta sẽ xem xét cách triển khai Flutter DataTable được hỗ trợ bởi MobX. Chúng tôi sẽ tạo Bảng hóa đơn hàng tháng . Nó hiển thị hóa đơn cá nhân hàng tháng cho một người dùng cụ thể (bất kể người dùng là gì). Tất cả dữ liệu cần thiết mà chúng tôi sẽ đọc, nó sẽ nằm trong một tệp json cục bộ được chỉ định là Chemicals.json trong tài sản / thư mục.

GIF:

TL: DR / Mã nguồn:

Bài viết này không nhằm mục đích giới thiệu MobX. Vì vậy, chúng tôi sẽ giả định rằng bạn đã có kiến ​​thức cơ bản về MobX. Nếu không, bạn có thể đọc cơ sở trên

trang web của họ

. Tôi nghĩ rằng nó dễ dàng để tìm hiểu và thực hiện như chống lại BLoC. Ý tôi là đừng sợ hãi khi sử dụng. 🙂

Đầu tiên, chúng ta phải chuẩn bị mô hình hóa đơn của mình để phân tích cú pháp json như được chỉ định bên dưới. Như bạn có thể thấy, nó bao gồm id, ngày tháng và số tiền. Các thuộc tính này cho chúng ta thấy hóa đơn sẽ như thế nào.

Lớp phi tiêu tương ứng là:

Lớp này có thể được tạo dễ dàng bằng cách sử dụng

trang web

bằng cách sao chép tệp json của chúng tôi. Bạn cũng có thể sử dụng gói

json_serializable

. Để đơn giản, chúng tôi sẽ không sử dụng gói này trong bài viết này.

Bây giờ chúng ta hãy xem xét mô hình khung nhìn của chúng tôi. Bạn có thể nghĩ về một mô hình dạng xem vì nó chứa tất cả logic ứng dụng, lệnh gọi api, quy tắc nghiệp vụ, v.v.

Chúng tôi sẽ cố gắng cho biết mã làm gì từng dòng một.

Hãy bắt đầu.

Các chú thích có thể quan sát, tính toán và hành động đã được giải thích rất nhiều trong

trang web

của họ . Tóm lại, bạn có thể nghĩ đến Observable, chúng tôi theo dõi biến được chú thích để thay đổi ui theo giá trị của chúng, Computed là một dạng bắt nguồn của biến quan sát và Action là cách thay đổi giá trị có thể quan sát.

@observable ObservableList<ExInvoiceModel> invoices = <ExInvoiceModel>[].asObservable(); 

isSelected chỉ là một thuộc tính logic. Để thay đổi hộp kiểm và thẻ tổng số tiền, chúng ta cần theo dõi giá trị của nó, vì vậy chúng ta phải đặt chú thích có thể quan sát được bên trên nó.

ObservableList 

@observable ObservableList<ExInvoiceModel> invoices = <ExInvoiceModel>[].asObservable(); 

.asObservable(); 

@computed List<ExInvoiceModel> get selectedInvoices => invoices.where((invoice) => invoice.isSelected).toList(); 

@computed bool get selectedInvoicesIsEmpty => selectedInvoices.isEmpty; 

@computed int get totalAmount => selectedInvoices.fold(0, (previousValue, element) => previousValue + element.amount); 

fetchInvoices

Đặt hành động trên phương thức fetchInvoices cho biết MobX, nhờ phương thức này, chúng ta sẽ thay đổi biến hóa đơn . Hãy theo dõi nó. Nếu bạn cẩn thận thì những gì phương pháp làm về cơ bản không có gì khác ngoài việc đọc json cục bộ và giải mã InvoiceModel của chúng tôi và thêm biến hóa đơn có thể quan sát được của chúng tôi. Để lấy dữ liệu, chúng ta cần gọi phương thức này.

Bây giờ, chúng ta sẽ xem xét giao diện người dùng hoàn chỉnh của mình.

Chúng ta sẽ xem xét từng phần một.

Để lấy dữ liệu ban đầu, chúng ta cần gọi phương thức fetchInvoices trong vòng đời initState.

Chúng ta sẽ cần bao bọc DataTable của mình bằng tiện ích Người quan sát. Vì chúng tôi sẽ kích hoạt giao diện người dùng mà các thay đổi biến của chúng tôi. Chúng tôi sẽ ánh xạ danh sách có thể quan sát của chúng tôi tới DataRow, vì vậy chúng tôi cần gọi phương thức

bản đồ

.

Hai tài sản quan trọng trong đó. Nếu bạn muốn chọn cột hộp kiểm trong mỗi hàng, chúng ta phải xác định onSelectedChanged . Hãy nhớ rằng, chúng tôi đã xác định thuộc tính isSelected của mình là có thể quan sát được, MobX theo dõi thay đổi trong biến đó và kích hoạt tiện ích Người quan sát để làm mới giao diện người dùng của chúng tôi và chúng tôi sẽ thấy sự thay đổi của chúng tôi trên màn hình.

Chúng tôi sẽ bao bọc chân trang của mình bằng tiện ích người quan sát. Vì chúng ta cần vẽ ui của mình theo mảng Hóa đơn đã chọn . Nếu mảng của chúng ta đã lấp đầy các mục, chúng ta sẽ cần tính tổng số tiền. Nếu không, chúng tôi có thể hiển thị widget trống.

Okey, thế là xong. Nếu bạn muốn xem thêm chi tiết, bạn có thể kiểm tra mã nguồn.

Chuyên mục: Kiến thức

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Check Also
Close
Back to top button
444 live app 444 live 444 live app 444live kisslive kiss live yy live yylive