Selamat siang semuanya! Setelah tiga artikel pertama, saya harap artikel ini bermanfaat bagi Anda.
Hari ini saya akan mencoba menjelaskan pola MVC dalam bahasa yang sederhana.
Dan tentu saja saya akan menunjukkan semuanya dalam praktik!
Pergilah!
Rencana kita
Bagian 1 - pengantar pembangunan, lampiran pertama, konsep negara;
Bagian 2 - file pubspec.yaml dan menggunakan flutter pada baris perintah;
Bagian 3 - BottomNavigationBar dan Navigator;
Bagian 4 (artikel saat ini) - MVC. Kami akan menggunakan pola khusus ini sebagai salah satu yang paling sederhana;
Bagian 5 - paket http. Pembuatan kelas Repositori, permintaan pertama, daftar posting;
Bagian 6 - Bekerja dengan gambar, menampilkan gambar dalam bentuk kisi, menerima gambar dari jaringan, menambahkan gambar Anda sendiri ke aplikasi;
Bagian 7 - Membuat tema Anda sendiri, menambahkan font dan animasi khusus;
Bagian 8 - Sedikit tentang pengujian;
Mengapa MVC dan prinsip arsitektur lainnya?
Mungkin, pada awalnya, benar-benar tidak dapat dipahami bagi pemula untuk tujuan apa menggunakan prinsip-prinsip arsitektur, karena tanpa mereka itu baik.
Mengapa mempersulit?
Alasan yang paling meyakinkan:
Kompleksitas kode - ketika Anda memiliki aplikasi kecil dengan satu atau dua layar, baik itu Flutter atau aplikasi Android / iOS asli, Anda mungkin dapat melakukannya tanpa memahami prinsip-prinsip arsitektur. Hal lain adalah ketika proyek memiliki ukuran yang layak, Anda tidak dapat melakukannya tanpa aturan dan prinsip yang seragam.
Kompleksitas tugas - misalnya: Anda perlu menerapkan peralihan antara 3, 5 atau bahkan 10 topik (mungkin tugas itu tidak umum). Tanpa pemahaman yang jelas tentang arsitektur, ini tidak mudah dilakukan.
Kompleksitas dukungan - jika Anda mengembangkan proyek komersial besar, katakan: Portal kota, dikombinasikan dengan berbagai layanan (peta, hotel, dll.), Anda setidaknya harus memiliki tim. Setiap anggota tim harus bertindak secara terkoordinasi. Dan untuk bertindak secara harmonis, Anda perlu memahami kode orang lain. Tanpa pendekatan satu ukuran untuk semua, tim Anda akan berada dalam kekacauan dan sistem akan runtuh.
Ini adalah alasan yang paling umum menurut saya.
Juga, arsitektur aplikasi yang baik membuat segala sesuatunya teratur di kepala programmer :)
Apa inti dari MVC?
MVC (Model - View - Controller) :
(Model) , . . : . , . , ( ). ( , , ). , - Dart, : Pony
(View), Flutter (, , ), . View . ( , ..). , , . , - : Text, Scaffold, AppBar, ListView .
(Controller) ( ) . - . . , , , : HomeController
MVC
.
Flutter pub-, II pubspec.yaml
:
# dependencies: flutter: sdk: flutter # pub- # # flutter_staggered_grid_view: ^0.4.0 # # MVC # Flutter mvc_pattern: ^7.0.0 # , # http # http: ^0.13.3
pub get
:
flutter pub get
Android Studio ( Flutter commands):
MVC.
:
:
, (View) , .
)
controllers
home_controller.dart
:
import 'package:flutter/material.dart';
import 'package:mvc_pattern/mvc_pattern.dart';
import '../models/tab.dart';
// mvc_pattern
// ControllerMVC,
// setState
class HomeController extends ControllerMVC {
//
static HomeController _this;
static HomeController get controller => _this;
// factory
// HomeController
//
// Singleton
//
// HomeController
factory HomeController() {
if (_this == null) _this = HomeController._();
return _this;
}
HomeController._();
// GlobalKey ,
//
// ,
// NavigatorState - Navigator
// _ ,
// private ,
// _navigatorKeys
final _navigatorKeys = {
TabItem.POSTS: GlobalKey<NavigatorState>(),
TabItem.ALBUMS: GlobalKey<NavigatorState>(),
TabItem.TODOS: GlobalKey<NavigatorState>(),
};
// get getter
// _navigatorKeys,
//
// ( )
Map<TabItem, GlobalKey> get navigatorKeys => _navigatorKeys;
//
var _currentTab = TabItem.POSTS;
//
TabItem get currentTab => _currentTab;
//
// selectTab
// HomePage
// , mvc_pattern
// setState
// ,
void selectTab(TabItem tabItem) {
setState(() => _currentTab = tabItem);
}
}
HomePage.dart
:
import 'package:flutter/material.dart';
import 'package:mvc_pattern/mvc_pattern.dart';
import '../../models/tab.dart';
import '../../controllers/home_controller.dart';
import 'bottom_navigation.dart';
import 'tab_navigator.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
//
// StateMVC mvc_pattern
class _HomePageState extends StateMVC {
//
HomeController _con;
// super StateMVC
//
_HomePageState() : super(HomeController()) {
//
_con = HomeController.controller;
}
//
// currentTab selectTab
//
@override
Widget build(BuildContext context) {
// WillPopScope
// Back
return WillPopScope(
// back
// :
// ()
// Back,
//
// : c , ,
//
onWillPop: () async {
if (_con.currentTab != TabItem.POSTS) {
if (_con.currentTab == TabItem.TODOS) {
_con.selectTab(TabItem.ALBUMS);
} else {
_con.selectTab(TabItem.POSTS);
}
return false;
} else {
return true;
}
},
child: Scaffold(
// Stack
// ,
// ,
body: Stack(children: <Widget>[
_buildOffstageNavigator(TabItem.POSTS),
_buildOffstageNavigator(TabItem.ALBUMS),
_buildOffstageNavigator(TabItem.TODOS),
]),
// MyBottomNavigation
bottomNavigationBar: MyBottomNavigation(
currentTab: _con.currentTab,
onSelectTab: _con.selectTab,
),
),);
}
// - ,
Widget _buildOffstageNavigator(TabItem tabItem) {
return Offstage(
// Offstage :
//
// ,
offstage: _con.currentTab != tabItem,
// TabNavigator
child: TabNavigator(
navigatorKey: _con.navigatorKeys[tabItem],
tabItem: tabItem,
),
);
}
}
, HomePage HomeController
.
! .
Flutter
Flutter Flutter StatefulWidget
'.
.
.
, MVC .
.
! .
: