面对10个参数的复杂组件束手无策？建造者模式让你像搭积木一样优雅地构建UI！

痛点场景：参数地狱

想象你要创建一个复杂的对话框：

CustomDialog(
  title: '确认删除',
  content: '确定要删除这个重要文件吗？此操作不可撤销。',
  backgroundColor: Colors.grey[200],
  titleColor: Colors.red,
  contentColor: Colors.black87,
  mainButtonText: '删除',
  mainButtonColor: Colors.red,
  secondaryButtonText: '取消',
  secondaryButtonColor: Colors.grey,
  cornerRadius: 12.0,
  shadowColor: Colors.black26,
  // ...还有5个参数
)

问题显而易见：

  • 😵 参数太多，难以阅读和维护
  • 😖 必须记住参数顺序
  • 😫 可选参数处理困难
  • 😩 创建相似组件需要大量重复代码

建造者模式登场！

核心思想： 将复杂对象的构建与表示分离，使得同样的构建过程可以创建不同的表示。

建造者模式的四个关键角色：

  1. 产品(Product)： 最终要创建的复杂对象（例如：对话框）
  2. 抽象建造者(Builder)： 定义创建产品各部分的接口
  3. 具体建造者(ConcreteBuilder)： 实现构建步骤
  4. 指挥者(Director)： 控制构建过程（在Flutter中常可省略）

Flutter中的建造者模式实践

基础版：分步构建对话框
// 1. 产品类 - 最终要构建的对话框
class DialogConfig {
  String title = '';
  String content = '';
  Color backgroundColor = Colors.white;
  Color titleColor = Colors.black;
  // ...其他属性
}

// 2. 抽象建造者
abstract class DialogBuilder {
  void setTitle(String title);
  void setContent(String content);
  void setBackgroundColor(Color color);
  void setTitleColor(Color color);
  // ...其他设置方法
  
  Widget build(); // 构建最终产品
}

// 3. 具体建造者
class CustomDialogBuilder implements DialogBuilder {
  final DialogConfig _config = DialogConfig();
  
  @override
  void setTitle(String title) => _config.title = title;
  
  @override
  void setContent(String content) => _config.content = content;
  
  @override
  void setBackgroundColor(Color color) => _config.backgroundColor = color;
  
  @override
  Widget build() {
    return AlertDialog(
      title: Text(_config.title, style: TextStyle(color: _config.titleColor)),
      content: Text(_config.content),
      backgroundColor: _config.backgroundColor,
    );
  }
}

// 使用建造者
final dialogBuilder = CustomDialogBuilder()
  ..setTitle('确认删除')
  ..setContent('确定要删除这个文件吗？')
  ..setBackgroundColor(Colors.grey[200]!)
  ..setTitleColor(Colors.red);

showDialog(context: context, builder: (_) => dialogBuilder.build());

优点：

  • 参数设置清晰
  • 避免参数顺序问题
  • 可读性大幅提升
进阶版：Fluent接口（链式调用）

让建造者更优雅：

class CustomDialogBuilder {
  final DialogConfig _config = DialogConfig();
  
  CustomDialogBuilder title(String title) {
    _config.title = title;
    return this;
  }
  
  CustomDialogBuilder content(String content) {
    _config.content = content;
    return this;
  }
  
  CustomDialogBuilder backgroundColor(Color color) {
    _config.backgroundColor = color;
    return this;
  }
  
  Widget build() {
    return AlertDialog(
      // 使用_config构建对话框
    );
  }
}

// 优雅的链式调用
showDialog(
  context: context,
  builder: (_) => CustomDialogBuilder()
    .title('确认删除')
    .content('确定要删除这个文件吗？')
    .backgroundColor(Colors.grey[200]!)
    .build()
);

Fluent接口优势：

  • 代码更简洁流畅
  • 类似英语句子的可读性
  • 支持IDE自动补全

Flutter框架中的建造者模式

实际上，Flutter自身大量使用了建造者模式：

1. TextStyle 建造者
const TextStyle(
  fontSize: 16,
  fontWeight: FontWeight.bold,
  color: Colors.blue,
)

// 更优雅的替代方案：
TextStyle style = TextStyle()
  .copyWith(fontSize: 16)
  .copyWith(fontWeight: FontWeight.bold)
  .copyWith(color: Colors.blue);
2. ThemeData 建造者
final theme = ThemeData.light().copyWith(
  primaryColor: Colors.blue,
  accentColor: Colors.green,
  buttonTheme: ButtonThemeData(
    buttonColor: Colors.blue[700],
    textTheme: ButtonTextTheme.primary,
  ),
);
3. BoxDecoration 建造者
BoxDecoration(
  color: Colors.blue,
  borderRadius: BorderRadius.circular(10),
  boxShadow: [
    BoxShadow(color: Colors.black12, blurRadius: 6),
  ],
)

// 可转换为：
BoxDecoration.decoration = BoxDecoration()
  .copyWith(color: Colors.blue)
  .copyWith(borderRadius: BorderRadius.circular(10))
  .copyWith(boxShadow: [BoxShadow(...)]);

复杂实战：响应式布局建造者

创建一个能自动适应不同屏幕尺寸的布局建造者：

class ResponsiveLayoutBuilder {
  final List<Widget> _children = [];
  double _spacing = 16.0;
  Axis _direction = Axis.vertical;
  
  ResponsiveLayoutBuilder addChild(Widget child) {
    _children.add(child);
    return this;
  }
  
  ResponsiveLayoutBuilder spacing(double value) {
    _spacing = value;
    return this;
  }
  
  ResponsiveLayoutBuilder horizontal() {
    _direction = Axis.horizontal;
    return this;
  }
  
  ResponsiveLayoutBuilder vertical() {
    _direction = Axis.vertical;
    return this;
  }
  
  Widget build() {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return _buildGridView();
        } else {
          return _buildListView();
        }
      },
    );
  }
  
  Widget _buildListView() {
    return ListView.separated(
      scrollDirection: _direction,
      itemCount: _children.length,
      separatorBuilder: (_, __) => SizedBox(width: _spacing, height: _spacing),
      itemBuilder: (context, index) => _children[index],
    );
  }
  
  Widget _buildGridView() {
    return GridView.count(
      crossAxisCount: _direction == Axis.horizontal ? _children.length : 2,
      childAspectRatio: 1.0,
      mainAxisSpacing: _spacing,
      crossAxisSpacing: _spacing,
      children: _children,
    );
  }
}

// 使用示例
ResponsiveLayoutBuilder()
  .addChild(IconCard(Icons.email, '邮箱'))
  .addChild(IconCard(Icons.phone, '电话'))
  .addChild(IconCard(Icons.map, '地图'))
  .spacing(20)
  .horizontal()
  .build()

建造者模式的最佳实践

  1. 何时使用建造者模式：

    • 创建包含多个组成部分的复杂对象
    • 需要不同的对象创建方式
    • 需要创建不可变对象但又要灵活配置

  2. Flutter特化技巧：

    // 使用可选命名参数简化初始创建
DialogBuilder({String? title, String? content}) {
  if (title != null) _config.title = title;
  if (content != null) _config.content = content;
}

// 添加预置配置
DialogBuilder.error() {
  return DialogBuilder()
    .titleColor(Colors.red)
    .backgroundColor(Colors.red[50]!);
}

// 支持运算符重载
DialogBuilder operator <<(Widget child) {
  addChild(child);
  return this;
}

  3. 性能优化：

    // 使用memoization缓存常用配置
class DialogBuilder {
  static final Map<String, DialogConfig> _presets = {};
  
  static DialogBuilder preset(String name) {
    if (!_presets.containsKey(name)) {
      _presets[name] = _createPreset(name);
    }
    return DialogBuilder.fromConfig(_presets[name]!);
  }
}

建造者模式 vs 工厂模式

特性 建造者模式 工厂模式
主要目的 分步构建复杂对象 创建对象家族
构建过程 显式控制每个步骤 隐藏创建细节
适用场景 包含多个组件的对象 不同系列的对象
Flutter应用 复杂组件配置、响应式布局 主题系统、平台适配

建造者模式的强大变体

1. 阶段式建造者
abstract class DialogBuilderPhase1 {
  DialogBuilderPhase2 setTitle(String title);
}

abstract class DialogBuilderPhase2 {
  DialogBuilderPhase3 setContent(String content);
}

abstract class DialogBuilderPhase3 {
  DialogBuilderFinal setActions(List<Widget> actions);
}

class DialogBuilder implements 
  DialogBuilderPhase1, 
  DialogBuilderPhase2, 
  DialogBuilderPhase3 {
  
  // 分阶段实现...
}

// 强制按顺序调用：
DialogBuilder()
  .setTitle('标题') // 必须第一步
  .setContent('内容') // 必须第二步
  .setActions([...]) // 必须第三步
  .build();
2. 装饰器增强建造者
class DialogDecorator implements DialogBuilder {
  final DialogBuilder _builder;
  
  DialogDecorator(this._builder);
  
  @override
  DialogBuilder title(String title) {
    _builder.title(title);
    return this;
  }
  
  // 添加额外功能
  DialogDecorator withAnimation(Duration duration) {
    // 添加动画逻辑
    return this;
  }
}

// 使用增强功能
DialogDecorator(CustomDialogBuilder())
  .title('动画对话框')
  .withAnimation(Duration(seconds: 1))
  .build();

总结：建造者模式是你的UI装配线

  • 核心价值： 将复杂对象的构建过程分解为可管理的步骤
  • Flutter优势：
    • 解决"参数爆炸"问题
    • 创建不可变对象的灵活方式
    • 提高大型组件配置的可读性
    • 支持流畅的链式调用
  • 适用场景： 复杂对话框、表单构建、响应式布局、主题配置

🔧 设计启示： 当组件参数超过5个或创建逻辑复杂时，建造者模式能显著改善代码质量！

# 建造者模式 # flutter # ui
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

使用Flutter导航组件TabBar、AppBar等为鸿蒙应用程序构建完整的应用导航体系

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 实战：底部弹出菜单（ModalBottomSheet）

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 实战：加载中对话框与进度指示器

avatar 开源鸿蒙跨平台开发者社区