Flutter开发实战:解释器模式（Interpreter Pattern）

北漂十三载2023-08-09 17:42

解释器模式（Interpreter Pattern）是一种设计模式，用于为特定的问题定义一个语言，并提供该语言的解释器。这种模式通常用于为特定类型的问题实现一种简单的语言或脚本。例如，正则表达式、SQL查询语句和一些编程语言都有自己的解释器。

解释器模式的关键组成部分包括：

  1. 抽象表达式 (Abstract Expression)：定义解释操作的接口。
  2. 终结符表达式 (Terminal Expression)：实现与语法中的终结符相关的解释操作。一个特定的符号对应于一个终结符表达式。
  3. 非终结符表达式 (Nonterminal Expression)：为文法中的非终结符实现解释操作。它可以有一个或多个子表达式。
  4. 上下文 (Context)：包含解释器之外的一些全局信息。
  5. 客户端 (Client)：构建（或解析）抽象语法树，然后使用解释器解释该树。

适用场景：

  1. 当有一个语言需要解释执行，并且可以将该语言表示为简单的句子时，可以使用解释器模式。
  2. 文法简单。对于复杂的文法，使用解释器模式可能会产生大量的类。为每个规则至少有一个类，这使得文法的管理变得复杂。

优点：

  1. 易于实现简单文法。
  2. 提供了修改和扩展文法的灵活性。

缺点：

  1. 对于复杂的文法，可能产生大量的类文件。
  2. 低效。解释执行代码通常比直接执行的机器码慢。

解释器模式常用于解释某种自定义语言或标记。下面我们就一起来看一下在Flutter中如何使用此设计模式。

场景一：动态生成UI

假设我们正在构建一个应用，允许用户自定义某些 UI 组件的布局和颜色。用户可以使用一个简单的描述语言为每个组件指定属性。

例如 "Button:width=100;height=50;color=red"。 这样，用户可以动态地修改 UI，而不需要重新编译应用。

dart 复制代码 
/// 抽象表达式 (Abstract Expression)
abstract class Expression {
  dynamic interpret(Context context);
}

///终结符表达式 (Terminal Expression)
class ValueExpression implements Expression {
  final String value;

  ValueExpression(this.value);

  @override
  dynamic interpret(Context context) {
    return value;
  }
}

///非终结符表达式 (Nonterminal Expression)
class UIComponentExpression implements Expression {
  final Expression type;
  final List<Expression> properties;

  UIComponentExpression(this.type, this.properties);

  @override
  dynamic interpret(Context context) {
    Map<String, dynamic> result = {};
    result['type'] = type.interpret(context);
    for (Expression prop in properties) {
      result.addAll(prop.interpret(context));
    }
    return result;
  }
}

class PropertyExpression implements Expression {
  final String key;
  final Expression value;

  PropertyExpression(this.key, this.value);

  @override
  dynamic interpret(Context context) {
    return {key: value.interpret(context)};
  }
}

///上下文 (Context)
class Context {
  final String input;

  Context(this.input);
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Interpreter Pattern in Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  Map<String, dynamic> _uiProperties = {};

  Expression? _parseDescription(String description) {
    List<String> parts = description.split(';');
    if (parts.isEmpty) return null;

    List<String> typePart = parts[0].split(':');
    if (typePart.length != 2) return null;

    Expression type = ValueExpression(typePart[0]);
    List<Expression> properties = [];

    for (int i = 1; i < parts.length; i++) {
      List<String> prop = parts[i].split('=');
      if (prop.length == 2) {
        properties.add(PropertyExpression(prop[0], ValueExpression(prop[1])));
      }
    }

    return UIComponentExpression(type, properties);
  }

  void _updateUI() {
    // _controller.text = "Button:width=100;height=50;color=red";
    Expression? expression = _parseDescription(_controller.text);
    Context context = Context("");
    _uiProperties = expression?.interpret(context);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    double width = double.tryParse(_uiProperties['width'] ?? '') ?? 50.0;
    double height = double.tryParse(_uiProperties['height'] ?? '') ?? 30.0;
    Color color = {
          'red': Colors.red,
          'blue': Colors.blue,
          'green': Colors.green,
          'yellow': Colors.yellow,
        }[_uiProperties['color']] ??
        Colors.grey;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Interpreter Pattern in Flutter'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: 'Enter UI description',
                hintText: 'e.g. Button:width=100;height=50;color=red',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: _updateUI,
            child: const Text('Generate UI'),
          ),
          const SizedBox(height: 20),
          if (_uiProperties['type'] == 'Button')
            Container(
              width: width,
              height: height,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: color,
                ),
                child: Text('Button'),
              ),
            ),
        ],
      ),
    );
  }
}

这个例子比较相对简单，但它展示了如何使用解释器模式解析一个自定义语言的基本结构。在实际开发中，可能需要处理更多的组件类型、属性和复杂性。为了真正实现这个功能，还需要一个词法分析器和语法分析器，它们可以将用户的输入转化为上述的表达式树。

场景二：内容过滤

开发一个内容管理系统，允许用户定义自己的过滤规则，以决定哪些内容应该显示或隐藏。为此，我们可以创建一个简单的描述语言，允许用户定义基于关键词的规则。

用户可以输入以下描述字符串来定义规则：

  • "Show:topic=sports;age=above18"，表示仅显示与运动相关的内容，并且只适合18岁及以上的人士。
  • "Hide:topic=politics"，表示隐藏所有与政治相关的内容。
dart 复制代码 
/// 抽象表达式 (Abstract Expression)
abstract class Expression {
  dynamic interpret(Context context);
}

///终结符表达式 (Terminal Expression)
class ValueExpression implements Expression {
  final String value;

  ValueExpression(this.value);

  @override
  dynamic interpret(Context context) {
    return value;
  }
}

///非终结符表达式 (Nonterminal Expression)
class UIComponentExpression implements Expression {
  final Expression type;
  final List<Expression> properties;

  UIComponentExpression(this.type, this.properties);

  @override
  dynamic interpret(Context context) {
    Map<String, dynamic> result = {};
    result['type'] = type.interpret(context);
    for (Expression prop in properties) {
      result.addAll(prop.interpret(context));
    }
    return result;
  }
}

class PropertyExpression implements Expression {
  final String key;
  final Expression value;

  PropertyExpression(this.key, this.value);

  @override
  dynamic interpret(Context context) {
    return {key: value.interpret(context)};
  }
}

///上下文 (Context)
class Context {
  final String input;

  Context(this.input);
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Interpreter Pattern in Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  Map<String, dynamic> _filterProperties = {};
  final List<String> _contents = [
    'A sports article suitable for all ages.',
    'A sports article for above 18.',
    'A political news article.',
    'A general news article.'
  ];
  List<String> _filteredContents = [];

  Expression? _parseDescription(String description) {
    List<String> parts = description.split(';');
    if (parts.isEmpty) return null;

    List<String> typePart = parts[0].split(':');
    if (typePart.length != 2) return null;

    Expression type = ValueExpression(typePart[0]);
    List<Expression> properties = [];

    for (int i = 1; i < parts.length; i++) {
      List<String> prop = parts[i].split('=');
      if (prop.length == 2) {
        properties.add(PropertyExpression(prop[0], ValueExpression(prop[1])));
      }
    }

    return UIComponentExpression(type, properties);
  }

  void _applyFilter() {
    // _controller.text = "Show:topic=sports;age=above18";
    Expression? expression = _parseDescription(_controller.text);
    Context context = Context("");
    _filterProperties = expression?.interpret(context);

    _filteredContents = _contents;

    if (_filterProperties['type'] == 'Hide' &&
        _filterProperties.containsKey('topic')) {
      _filteredContents = _filteredContents.where((content) {
        return !content.contains(_filterProperties['topic']);
      }).toList();
    } else if (_filterProperties['type'] == 'Show') {
      if (_filterProperties.containsKey('topic')) {
        _filteredContents = _filteredContents.where((content) {
          return content.contains(_filterProperties['topic']);
        }).toList();
      }
      if (_filterProperties.containsKey('age') &&
          _filterProperties['age'] == 'above18') {
        _filteredContents = _filteredContents.where((content) {
          return content.contains('above 18');
        }).toList();
      }
    }

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interpreter Pattern in Flutter'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: 'Enter Filter Rule',
                hintText: 'e.g. Show:topic=sports;age=above18',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: _applyFilter,
            child: const Text('Apply Filter'),
          ),
          const SizedBox(height: 20),
          Expanded(
            child: ListView.builder(
              itemCount: _filteredContents.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_filteredContents[index]),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

在这个示例中，用户可以输入一个描述字符串来定义显示或隐藏内容的规则。使用了解释器模式来解析这个描述字符串，并据此过滤内容列表。

总结

在构建应用程序时，特别是那些涉及到自定义配置或用户定义行为的应用，我们经常需要解释一些特定格式的数据或字符串。解释器模式是一个设计模式，它提供了评估语言的语法或表达式的方式。在这篇文章中，我们探讨了如何在 Flutter 中使用解释器模式构建两个不同的应用示例：动态 UI 构建和内容过滤。

动态 UI 构建

允许用户通过描述字符串动态创建UI。描述字符串可以像 "Button:width=100;height=50;color=red" 这样，来指定要创建的UI的宽度和颜色。通过解释器模式，可以将这个描述字符串转化为实际的 UI 组件，让用户看到所描述的实际UI。

内容过滤

让用户通过描述字符串定义内容过滤规则。例如，可以定义 "Show:topic=sports;age=above18" 或 "Hide:topic=politics" 这样的规则。这意味着根据用户的规则，可以显示与运动相关且只适合18岁及以上人士的内容，或者隐藏所有与政治相关的内容。再次使用解释器模式，可以解析用户的规则并据此过滤内容。

结论

通过上面两个示例，可以看到了解释器模式在 Flutter 中的实际应用。这种模式在需要解析特定格式的数据或字符串时非常有用，尤其是当这些数据或字符串需要转化为实际的操作或对象时。解释器模式为我们提供了一个清晰、结构化的方法来处理这些转化，使代码更加模块化和可维护。

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

相关推荐
LONGZETECH27 分钟前
汽车仿真教学平台支持在线理论考试吗？实操解析+行业案例
人工智能·科技·架构·数据挖掘·汽车·汽车仿真教学软件·新能源汽车仿真教学软件
li星野2 小时前
词嵌入技术、注意力机制、MoE架构、主流Transformer架构
深度学习·架构·transformer
程序员老刘2 小时前
为什么满帧运行的游戏，玩起来反而觉得卡顿？
flutter·客户端
猫山月3 小时前
Flutter路由演进路线（2026）
前端·flutter
志摩凛3 小时前
被产品经理逼疯后，我们重构了移动端上传组件——2026最新成果复盘
设计模式·架构
cylgdzz1113 小时前
DSP技术架构深度拆解
后端·架构
菜鸟小码4 小时前
Hive数据模型、架构、表类型与优化策略
hive·hadoop·架构
张忠琳4 小时前
【vllm】（五）vLLM v1 Attention — 模块超深度分析之五
ai·架构·vllm
我母鸡啊5 小时前
软考架构师故事系列-数据库系统
后端·架构
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026年4月AI大事件深度解读：大模型竞争进入“深水区“04近期有什么ai的新消息，新动态？ 2026.4月052026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07codex app每次打开重连5次Reconnecting问题解决08CC-Switch & Claude 基于 Linux 服务器安装使用指南09从限购到畅通：GLM-5.1 Coding Plan接入攻略10Claude Code Windows 兼容性问题：指定版本 2.1.112 可解决