Flutter调查问卷表达式插件flutter_survey_expression的使用

flutter_survey_expression 是一个用于在 Flutter 中实现动态问卷逻辑的强大插件。它允许开发者通过简单的表达式定义复杂的问卷逻辑，比如条件显示、依赖关系等。

安装

首先，在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_survey_expression: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

基本用法

1. 初始化问卷模型

问卷通常由多个问题组成，每个问题可以有多种类型（如单选、多选、文本输入等）。以下是创建一个简单问卷模型的示例：

import 'package:flutter/material.dart';
import 'package:flutter_survey_expression/flutter_survey_expression.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SurveyPage(),
    );
  }
}

class SurveyPage extends StatefulWidget {
  [@override](/user/override)
  _SurveyPageState createState() => _SurveyPageState();
}

class _SurveyPageState extends State<SurveyPage> {
  // 定义问卷模型
  final List<QuestionModel> questions = [
    QuestionModel(
      id: 'q1',
      type: QuestionType.singleChoice,
      text: '你喜欢哪种水果？',
      options: [
        OptionModel(id: 'o1', text: '苹果'),
        OptionModel(id: 'o2', text: '香蕉'),
        OptionModel(id: 'o3', text: '橙子'),
      ],
    ),
    QuestionModel(
      id: 'q2',
      type: QuestionType.text,
      text: '为什么喜欢这种水果？',
      visibleIf: 'q1 == "o1"', // 当 q1 的值为 o1 时显示
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('调查问卷')),
      body: SurveyExpressionWidget(
        questions: questions,
        onSubmit: (Map<String, dynamic> answers) {
          print('问卷提交结果: $answers');
        },
      ),
    );
  }
}

2. 表达式逻辑

在上面的代码中，visibleIf 属性用于定义问题的显示条件。例如，q1 == "o1" 表示只有当问题 q1 的答案为 "o1" 时，问题 q2 才会显示。

支持的表达式运算符：

• 等于 (==)
• 不等于 (!=)
• 大于 (>)
• 小于 (<)
• 大于等于 (>=)
• 小于等于 (<=)
• 逻辑与 (&&)
• 逻辑或 (||)

3. 动态更新逻辑

如果需要动态更新问卷逻辑，可以通过监听用户输入并重新计算可见性。以下是一个更复杂的例子：

class _SurveyPageState extends State<SurveyPage> {
  final List<QuestionModel> questions = [
    QuestionModel(
      id: 'q1',
      type: QuestionType.singleChoice,
      text: '你喜欢哪种水果？',
      options: [
        OptionModel(id: 'o1', text: '苹果'),
        OptionModel(id: 'o2', text: '香蕉'),
        OptionModel(id: 'o3', text: '橙子'),
      ],
    ),
    QuestionModel(
      id: 'q2',
      type: QuestionType.singleChoice,
      text: '你最喜欢的颜色是什么？',
      options: [
        OptionModel(id: 'o4', text: '红色'),
        OptionModel(id: 'o5', text: '黄色'),
        OptionModel(id: 'o6', text: '橙色'),
      ],
    ),
    QuestionModel(
      id: 'q3',
      type: QuestionType.text,
      text: '为什么喜欢这种颜色？',
      visibleIf: '(q1 == "o1" && q2 == "o4") || q1 == "o3"', // 条件逻辑
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('调查问卷')),
      body: SurveyExpressionWidget(
        questions: questions,
        onSubmit: (Map<String, dynamic> answers) {
          print('问卷提交结果: $answers');
        },
      ),
    );
  }
}

4. 提交结果

当用户完成问卷后，onSubmit 回调函数会接收到一个包含所有问题答案的 Map 对象。您可以根据需要处理这些数据。

完整示例代码

以下是完整的示例代码，可以直接复制到项目中运行：

import 'package:flutter/material.dart';
import 'package:flutter_survey_expression/flutter_survey_expression.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SurveyPage(),
    );
  }
}

class SurveyPage extends StatefulWidget {
  [@override](/user/override)
  _SurveyPageState createState() => _SurveyPageState();
}

class _SurveyPageState extends State<SurveyPage> {
  final List<QuestionModel> questions = [
    QuestionModel(
      id: 'q1',
      type: QuestionType.singleChoice,
      text: '你喜欢哪种水果？',
      options: [
        OptionModel(id: 'o1', text: '苹果'),
        OptionModel(id: 'o2', text: '香蕉'),
        OptionModel(id: 'o3', text: '橙子'),
      ],
    ),
    QuestionModel(
      id: 'q2',
      type: QuestionType.text,
      text: '为什么喜欢这种水果？',
      visibleIf: 'q1 == "o1"', // 当 q1 的值为 o1 时显示
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('调查问卷')),
      body: SurveyExpressionWidget(
        questions: questions,
        onSubmit: (Map<String, dynamic> answers) {
          print('问卷提交结果: $answers');
        },
      ),
    );
  }
}