Flutter开发实战:建造者模式（Builder Pattern）

0160

建造者模式（Builder Pattern）是一种创建型设计模式，旨在将对象的构造与表示分离，以便在相同的构造过程中可以创建不同的表示。该模式的主要目的是将复杂对象的构造过程和其表示分离，使得同样的构造过程可以创建不同的表示。

在实际的开发中，经常会遇到构造复杂对象的情况，例如创建一个包含多个组成部分的对象，或者创建一个具有多种配置选项的对象。直接在类的构造函数中传递所有可能的参数可能会变得非常冗长和难以管理。建造者模式就是为了解决这个问题而诞生的。

建造者模式通常包含以下几个角色：

  1. 产品（Product）： 表示要构造的复杂对象。它通常包含多个部分或组件。

  2. 抽象建造者（Builder）： 定义了创建产品各个部分的接口，声明了用于构造产品的方法。

  3. 具体建造者（Concrete Builder）： 实现抽象建造者接口，负责实际构造产品的各个部分，并提供返回构造好的产品的方法。

  4. 指挥者（Director）： 负责使用具体建造者来构建产品。它定义了一个构造方法，该方法接受一个具体建造者作为参数，并根据需要进行构造操作。

建造者模式的优点：

  • 将对象的构造与表示分离，使得构造过程更加灵活和可复用。
  • 可以通过不同的具体建造者来创建不同的表示，从而实现构造过程的变化和定制化。
  • 简化了客户端代码，客户端只需要指导指挥者进行构造，而无需直接与具体建造者交互。
  • 隐藏了产品的内部结构和表示，对客户端代码进行了解耦。

然而，建造者模式也存在一些缺点，其中最主要的是代码量较大，需要定义多个类和接口来实现。对于简单的对象，建造者模式可能显得过于繁琐，这时候可以考虑是否真的需要使用该模式。

建造者模式在构造复杂对象时是一个非常有用的设计模式，它使得构造过程更加灵活、可维护，并且可以有效地隐藏产品的内部表示细节。

下面让我们通过两个示例来看一下在 Flutter 开发中，如何使用建造者模式（Builder Pattern）创建一些包含多个步骤和多个组件的复杂界面上。

场景一：聊天界面

一个简单的聊天界面，包含了消息列表和输入框两个部分。根据建造者模式，可以将其分为以下几个部分：

  1. 产品（Product）： 聊天界面，它由消息列表和输入框两个部分组成。
  2. 抽象建造者（Builder）： 定义创建聊天界面各个部分的接口。
  3. 具体建造者（Concrete Builder）： 实现创建聊天界面各个部分的接口，返回一个完整的聊天界面。
  4. 指挥者（Director）： 负责使用具体建造者来构建聊天界面。

代码实现：

import 'package:flutter/material.dart';



// Product

class ChatPage extends StatelessWidget {
  final Widget messageList;
  final Widget inputBar;

  ChatPage({required this.messageList, required this.inputBar});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Builder Pattern Example'),
      ),
      body: Column(
        children: <Widget>[Expanded(child: messageList), inputBar],
      ),
    );
  }
}

// Abstract Builder
abstract class Builder {
  Widget build();
}

// Concrete Builder 1
class MessageListBuilder implements Builder {
  @override
  Widget build() {
    return ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 50,
          margin: const EdgeInsets.all(2),
          color: Colors.blue[100 * ((index % 9) + 1)],
          child: Center(child: Text('Message ${index + 1}')),
        );
      },
    );
  }
}

// Concrete Builder 2
class InputBarBuilder implements Builder {
  @override
  Widget build() {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter a message',
              ),
            ),
          ),
          IconButton(
            icon: Icon(Icons.send),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}


// Director
class Director {
  ChatPage buildChatPage() {
    Builder messageListBuilder = MessageListBuilder();
    Builder inputBarBuilder = InputBarBuilder();

    return ChatPage(
      messageList: messageListBuilder.build(),
      inputBar: inputBarBuilder.build(),
    );
  }
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat Builder Pattern Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Director().buildChatPage(),
    );
  }
}

void main() {
  runApp(MyApp());
}
  • ChatPage 是产品(Product），它由一个消息列表和一个输入框组成。
  • Builder 是抽象建造者(Builder)，定义了创建聊天界面各个部分的接口。
  • MessageListBuilder 和 InputBarBuilder 是具体建造者(Concrete Builder)，他们实现了 Builder 接口，并负责实际构造产品的各个部分，并提供返回构造好的产品的方法。
  • Director 是指挥者(Director)，它负责使用具体建造者来构建产品。它定义了一个构造方法，该方法接受一个具体建造者作为参数，并根据需要进行构造操作。

场景二：个人信息界面

构建一个简单的个人信息页面，该页面包括头像、名称和详细信息三个部分。

  1. 产品（Product）： 个人信息界面，它由头像、名称和详细信息三个部分组成。
  2. 抽象建造者（Builder）： 定义创建个人信息页面各个部分的接口。
  3. 具体建造者（Concrete Builder）： 实现创建个人信息界面各个部分的接口，返回一个完整的个人信息界面。
  4. 指挥者（Director）： 负责使用具体建造者来构建个人信息界面。

代码实现：

import 'package:flutter/material.dart';



// Product

class ProfilePage extends StatelessWidget {
  final Widget avatar;
  final Widget name;
  final Widget details;

  ProfilePage({required this.avatar, required this.name, required this.details});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Builder Pattern Example'),
      ),
      body: Column(
        children: <Widget>[avatar, name, Expanded(child: details)],
      ),
    );
  }
}

// Abstract Builder
abstract class Builder {
  Widget build();
}

// Concrete Builder 1
class AvatarBuilder implements Builder {
  @override
  Widget build() {
    return CircleAvatar(
      radius: 50,
      backgroundImage: NetworkImage('https://via.placeholder.com/150'),
    );
  }
}

// Concrete Builder 2
class NameBuilder implements Builder {
  @override
  Widget build() {
    return Text(
      'John Doe',
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    );
  }
}

// Concrete Builder 3
class DetailsBuilder implements Builder {
  @override
  Widget build() {
    return ListView(
      padding: const EdgeInsets.all(8),
      children: <Widget>[
        Text('Email: demo.doe@example.com'),
        Text('Phone: +1 234 567 890'),
        // More details...
      ],
    );
  }
}

// Director
class Director {
  ProfilePage buildProfilePage() {
    Builder avatarBuilder = AvatarBuilder();
    Builder nameBuilder = NameBuilder();
    Builder detailsBuilder = DetailsBuilder();


    return ProfilePage(
      avatar: avatarBuilder.build(),
      name: nameBuilder.build(),
      details: detailsBuilder.build(),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Profile Builder Pattern Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Director().buildProfilePage(),
    );
  }
}
void main() {
  runApp(MyApp());
}

在这个示例中：

  • ProfilePage 是产品(Product)，它由头像、名称和详细信息三个部分组成。
  • Builder 是抽象建造者(Builder)，定义了创建个人信息页面各个部分的接口。
  • AvatarBuilder、NameBuilder 和 DetailsBuilder 是具体建造者(Concrete Builder)，他们实现了 Builder 接口，并负责实际构造产品的各个部分，并提供返回构造好的产品的方法。
  • Director 是指挥者(Director)，它负责使用具体建造者来构建产品。它定义了一个构造方法，该方法接受一个具体建造者作为参数，并根据需要进行构造操作。

总结

在面向对象的软件设计中，设计模式是一种经过实践证明的、可以重复使用的解决特定问题的策略。其中，建造者模式是一种专门用于处理复杂对象创建过程的设计模式，通过将一个复杂对象的构建与其表示分离，使得同样的构建过程可以创建不同的表示。在本文中，我们将通过两个现实开发中常见的场景，详细讲解如何使用建造者模式。

第一个示例：
创建了一个聊天应用界面，它包含一个消息列表和一个输入框。在这个场景中，将聊天界面视为一个复杂的对象（产品）。然后，使用建造者模式，将消息列表和输入框视为两个独立的部分，并分别为其创建了具体的建造者。在这个过程中，引入了一个指挥者，负责调用各个具体建造者的方法，依次构建产品的各个部分，并最终将其组合成一个完整的产品。

第二个示例：
创建了一个个人信息页面，包括头像、名称和详细信息三个部分。与聊天界面类似，使用了建造者模式，将头像、名称和详细信息视为三个独立的部分，并为每一个部分创建了一个具体的建造者。然后，通过一个指挥者，按照一定的顺序调用这些建造者的方法，构建出一个完整的个人信息页面。

通过这两个示例，我们可以看到，建造者模式能够帮助我们将复杂对象的构建过程进行模块化，使得代码更清晰、更易于理解和维护。同时，这种模式也提高了代码的可扩展性，当我们需要增加新的部分，或者更改部分的实现时，只需要增加或修改相应的建造者即可。

结论

建造者模式是一种非常有用的设计模式，它能够帮助我们更有效地处理复杂对象的构建过程。在实际的 Flutter 开发中，通过合理地使用建造者模式，可以更好地组织和管理代码，提高代码的可读性、可维护性和可扩展性。

希望对您有所帮助谢谢!!！

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# 架构# Flutter# 设计模式
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYqqIAyZ' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
从零开始｜构建 Flutter 多引擎渲染组件：跨端工具链篇-五八三
从零开始｜构建 Flutter 多引擎渲染组件：跨端工具链篇
从零开始｜构建 Flutter 多引擎渲染组件：跨端工具链篇
3年前 227
Flutter基础之Navigator路由跳转-五八三
Flutter基础之Navigator路由跳转
Flutter基础之Navigator路由跳转
2年前 219
06-?Flutter核心知识|布局与滚动组件【单子布局、多子布局、JSON读取和解析、ListView、GridView、Slivers、监听滚动事件】-五八三
06-?Flutter核心知识|布局与滚动组件【单子布局、多子布局、JSON读取和解析、ListView、GridView、Slivers、监听滚动事件】
06-?Flutter核心知识|布局与滚动组件【单子布局、多子布局、JSON读取和解析、ListView、GridView...
2年前 198
快速玩转 Llama2！阿里云机器学习 PAI 推出最佳实践（二）——全参数微调训练-五八三
快速玩转 Llama2！阿里云机器学习 PAI 推出最佳实践（二）——全参数微调训练
快速玩转 Llama2！阿里云机器学习 PAI 推出最佳实践（二）——全参数微调训练
2年前 122
Flutter 跳转应用市场评分——超简洁实现-五八三
Flutter 跳转应用市场评分——超简洁实现
Flutter 跳转应用市场评分——超简洁实现
2年前 111
程序设计原则与代码设计模式-五八三
程序设计原则与代码设计模式
程序设计原则与代码设计模式
2年前 103
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐