¡Buen día a todos! Después de los primeros tres artículos, espero que encuentre este igualmente útil.
Hoy intentaré explicar el patrón MVC en un lenguaje sencillo.
¡Y por supuesto lo mostraré todo en la práctica!
¡Ir!
Nuestro plan
Parte 1 - introducción al desarrollo, primer apéndice, concepto de estado;
Parte 2 : archivo pubspec.yaml y uso de flutter en la línea de comandos;
Parte 3 - BottomNavigationBar y Navigator;
Parte 4 (artículo actual) - MVC. Usaremos este patrón en particular como uno de los más simples;
Parte 5 - paquete http. Creación de la clase Repository, primeras solicitudes, listado de publicaciones;
Parte 6 - Trabajar con imágenes, mostrar imágenes en forma de cuadrícula, recibir imágenes de la red, agregar las suyas a la aplicación;
Parte 7: creación de su propio tema, agregando fuentes y animaciones personalizadas;
Parte 8 - Un poco sobre las pruebas;
¿Por qué MVC y otros principios arquitectónicos?
Quizás, al principio, sea completamente incomprensible para los principiantes con qué propósito usar principios arquitectónicos, porque sin ellos es bueno.
¿Por qué complicar las cosas?
Las razones más convincentes:
Complejidad del código: cuando tiene una aplicación pequeña con una o dos pantallas, ya sea Flutter o una aplicación nativa de Android / iOS, probablemente pueda hacerlo sin comprender los principios de la arquitectura. Otra cosa es que cuando el proyecto tiene un tamaño decente, no se puede prescindir de reglas y principios uniformes.
La complejidad de la tarea, por ejemplo: debe implementar el cambio entre 3, 5 o incluso 10 temas (quizás la tarea no sea común). Sin una comprensión clara de la arquitectura, esto no es tan fácil de hacer.
Complejidad del soporte: si está desarrollando un gran proyecto comercial, digamos: un portal de una ciudad, combinado con varios servicios (mapa, hoteles, etc.), al menos debería tener un equipo. Cada miembro del equipo debe actuar de manera coordinada. Y para actuar en armonía, es necesario comprender el código de otra persona. Sin un enfoque único para todos, su equipo estará sumido en el caos y el sistema colapsará.
Estas son las razones más comunes en mi opinión.
Además, una buena arquitectura de aplicación pone las cosas en orden en la cabeza del programador :)
¿Cuál es la esencia de 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 .
.
! .
: