[译]Flutter设计模式：0——入门

Sunbreak
2,545 阅读5分钟
原文地址：Flutter Design Patterns: 0 — Introduction

原文作者：mkazlauskas

Hi，我是Mangirdas，一个来自立陶宛的软件工程师，也是Flutter信徒。我从Flutter 0.11.0就开始尝试了，今天才发现还没有给Flutter社区做过贡献。所以我尝试着发布这套系列文章——Flutter设计模式。在这套文章中，我将会描述OOP的设计模式，展示这些模式的Dart实现，并列举在开发Flutter时的应用场景

内容目录

  • 关于本系列
  • OOP，设计模式……？？
  • 应用程序概览
  • 系列中的其他文章
  • 一起参与进来

关于本系列

在本系列的文章中，我将会概述一种设计模式，用Dart实现它，尽可能设计一个Flutter的例子加入到Flutter Design Patterns移动APP中。其中的理论部分主要来自于GoF书《设计模式 : 可复用面向对象软件的基础》，我认为这本书是软件工程领域介绍软件设计模式最标志性的书籍。书中包含了20多种OOP设计模式，在本系列中也将包含20多篇文章。我会尽可能一周更新一篇。

OOP，设计模式……？？


呃……可能我说的太快了些，还没有介绍这个系列的内容……

什么是OOP？

OOP全称“面向对象编程”（Object-Oriented Programming）。简单来说，它是一种编程范式，含义是我们使用对象去表示数据和操作数据的方法。这种范式帮助软件工程师，借助响应的代码结构，去模拟现实世界的物体、物体包含的数据、和其他物体的联系。如果你曾经写过Dart或者其他OOP编程语言（C#、C++、Java等），你很可能见到并使用过“类“，在类中定义过”属性“或者”方法“，创建过类的实例并操作过它们，阐明过类/对象和彼此间的关系——这些就是面向对象编程了

什么是OOP设计模式？

OOP设计模式是软件设计领域针对通用问题的一个典型的解决方案。在GoF书中这样描述设计模式的作用：

一种设计模式命名了、抽象了并确定了一种通用的设计结构的关键特点，使之便于创建可以复用的面向对象设计

一种软件设计模式不是为了解决特定的交互界面/交互体验（UI/UX）问题（虽然从”设计“一词很容易产生这种联想），它更多指的是代码结构，就像是解决特定种类面向对象设计难点、错误的蓝图。使用设计模式后，你会更快地开发，写出更灵活、可复用代码。但是设计模式中最困难的地方在于理解它们的核心思想，找到你的代码中适用它们的位置，以及它们能解决的问题。这正是此系列文章将要阐述——介绍并提供基本的几种设计模式，帮助大家选择适合你的问题的那款。

应用程序概览

就像我前面提到的，我将在介绍设计模式的同时，创建一个Flutter Design Patterns的移动APP，并一步一步地扩展其中的模式。当然这个APP是开源的，已经在Github上向大家开放了！这个APP由三个不同页面组成——主菜单，设计模式分类页面，和设计模式页面。


希望你注意到，主菜单上面有一个小小的爱心动画，此外，我还加入了一些动画来进行页面切换和内容转换，这样这个APP看起来就生动多啦（做这些动画花了我好几个小时呢，所以前辈们一定要看看哦！）


为了说明APP如何展示设计模式，我创建了一个独立的分支到repository。我将不会合并到主分支（这个分支仅作为演示说明），而是使用这些changes来说明如何将一个新的设计模式添加到APP中

首先添加一个数据对象到”assets/data/design_patterns.json“，其中包含设计模式的id、title、description和route：

{
  "id": "introduction",
  "title": "Introduction",
  "description": "Laborum qui ea velit sint officia culpa aute ad sint fugiat excepteur ex pariatur consectetur.",
  "route": "/introduction"
}

然后添加一个Markdown文件到assets/markdown文件夹下，Markdown文件名与添加到JSON的数据对象的id相同。这个Markdown包含了该设计模式的详细信息——通常是实现设计模式的代码块以及说明文档。然后我们需要实现这个设计模式，并准备示例放到APP中。为了说明，我准备了一个”Hello, World“的控件（introduction.dart）：

import 'package:flutter/material.dart';

class Introduction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Hello world!'),
    );
  }
}

最后，一个新的路由需要添加到”route.dart“的”_DesignPatternRoutes“类中（路由的名称需要匹配JSON文件新增数据对象的route字段），并新增一个DesignPatternDetails的控件到提前创建好的示例中（25-32行）：

import 'package:flutter/material.dart';

import 'package:flutter_design_patterns/constants.dart';
import 'package:flutter_design_patterns/data/models/design_pattern.dart';
import 'package:flutter_design_patterns/data/models/design_pattern_category.dart';
import 'package:flutter_design_patterns/screens/category/category.dart';
import 'package:flutter_design_patterns/screens/design_pattern_details/design_pattern_details.dart';
import 'package:flutter_design_patterns/screens/main_menu/main_menu.dart';
import 'package:flutter_design_patterns/widgets/introduction/introduction.dart';

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case initialRoute:
        return MaterialPageRoute(
          builder: (_) => MainMenu(),
        );
      case categoryRoute:
        var category = settings.arguments as DesignPatternCategory;
        return MaterialPageRoute(
          builder: (_) => Category(
            category: category,
          ),
        );
      case _DesignPatternRoutes.introductionRoute:
        var designPattern = settings.arguments as DesignPattern;
        return MaterialPageRoute(
          builder: (_) => DesignPatternDetails(
            designPattern: designPattern,
            example: Introduction(),
          ),
        );
      default:
        return MaterialPageRoute(
          builder: (_) => MainMenu(),
        );
    }
  }
}

class _DesignPatternRoutes {
  static const String introductionRoute = '/introduction';
}

完成！这些搞定之后，一个新的设计模式就在Flutter Design Patterns中出现了：


如果我遗漏了什么，请不要犹豫，赶紧来问我吧，或者直接下载代码。代码是开源并且免费的！

我希望这篇文章能帮助你学习OOP、设计模式以及编程。新的文章马上就发布，敬请期待，享受编程吧！

系列中的其他文章

一起参与进来

TODO



avatar
文章
阅读
粉丝