Flutter自定义组件插件solucx

Flutter自定义组件插件solucx_widget的使用

SoluCXWidget 是一个允许与 SoluCX 调查系统集成的 Flutter 小部件。它提供了多种类型的窗口小部件，可以在屏幕的不同位置（如顶部、底部、模态或内联）显示。

特性

支持不同的窗口小部件类型：bottom、top、modal、inline。
控制窗口小部件的可见性。
动态调整窗口小部件大小。
控制尝试次数和数据收集间隔。
集成WebView以显示网页内容。

入门指南

前提条件

Flutter SDK
项目依赖项（在 pubspec.yaml 文件中列出）
对于 Android 和 iOS，需要互联网权限

安装

在你的 Flutter 项目中添加 SoluCXWidget：

dependencies:
  flutter:
    sdk: flutter
  solucx_widget: ^1.0.7

配置

Android

在你的 AndroidManifest.xml 文件中添加以下权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">
    <uses-permission android:name="android.permission.INTERNET"/>
    <!-- ...existing code... -->
</manifest>

iOS

在你的 Info.plist 文件中添加以下内容：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

使用方法

这是一个基本示例，展示如何使用 SoluCXWidget：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SoluCX Widget Example'),
        ),
        body: Center(
          child: SoluCXWidget(
            soluCXKey: 'your-solucx-key',
            type: SoluCXWidgetType.bottom,
            data: SoluCXWidgetData(
              clientId: 'client-id',
              email: 'client@example.com',
            ),
            options: SoluCXWidgetOptions(
              widgetWidth: 1.0,
              retryAttempts: 5,
              retryInterval: 1,
              collectInterval: 60,
              collectPartialInterval: 0,
            ),
          ),
        ),
      ),
    );
  }
}

接口

SoluCXKey

SoluCXKey 是用于唯一标识 SoluCX 小部件的字符串类型别名。

SoluCXWidget

一个与 SoluCX 调查系统集成的 Flutter 小部件。

属性

soluCXKey（必填）：一个 SoluCXKey，用于唯一标识小部件。
type（必填）：一个 SoluCXWidgetType，指定小部件的类型（底部、顶部、模态、内联）。
data（必填）：一个包含发送到调查的数据的 SoluCXWidgetData 对象。
options（必填）：一个包含配置选项的 SoluCXWidgetOptions 对象。
alignment（可选）：一个 Alignment 对象，指定小部件的对齐方式。默认为 Alignment.center。
webViewController（可选）：一个用于控制 WebView 的 WebViewController。
soluCXWidgetService（可选）：一个处理小部件相关服务的 SoluCXWidgetService。

SoluCXWidgetType

一个枚举类型，表示 SoluCX 小部件的类型。

bottom：将小部件显示在屏幕底部。
top：将小部件显示在屏幕顶部。
modal：将小部件显示为模态覆盖层。
inline：将小部件内联显示在现有布局中。

SoluCXWidgetOptions

一个包含 SoluCX 小部件配置选项的类。

属性

widgetWidth（可选）：一个 double，指定小部件宽度作为显示宽度的比例。默认值为 1.0。
retryAttempts（可选）：一个 int，指定重试次数。默认值为 5。
retryInterval（可选）：一个 int，指定重试间隔天数。默认值为 1。
collectInterval（可选）：一个 int，指定数据收集间隔天数。默认值为 60。
collectPartialInterval（可选）：一个 int，指定部分数据收集间隔天数。默认值为 0。

SoluCXWidgetData

一个包含要发送到 SoluCX 调查的数据的类。

属性

transactionId（可选）：一个 String，表示交易 ID。
attemptId（可选）：一个 String，表示尝试 ID。
name（可选）：一个 String，表示客户姓名。
email（可选）：一个 String，表示客户电子邮件。
clientId（可选）：一个 String，表示客户 ID。
cpf（可选）：一个 String，表示客户的CPF。
phone（可选）：一个 String，表示客户的电话号码。
phone2（可选）：一个 String，表示客户的第二个电话号码。
gender（可选）：一个 String，表示客户的性别。
birthDate（可选）：一个 String，表示客户的出生日期。
rating（可选）：一个 String，表示客户给出的评分。
storeId（可选）：一个 String，表示商店 ID。
employeeId（可选）：一个 String，表示员工 ID。
amount（可选）：一个 double，表示交易金额。
journey（可选）：一个 String，表示客户的旅程。

其他信息

更多关于如何贡献项目、报告问题以及了解包作者期望的信息，请参阅官方文档。

示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("SoluCX Widget",
                style: TextStyle(fontSize: 20, color: Colors.white)),
          ],
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final Widget title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color.fromARGB(255, 50, 115, 153),
          title: title,
          bottom: TabBar(
            indicatorColor: Colors.white,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.grey,
            tabs: [
              Tab(icon: Icon(Icons.line_axis), text: 'Inline'),
              Tab(icon: Icon(Icons.border_bottom), text: 'Bottom'),
              Tab(icon: Icon(Icons.border_top), text: 'Top'),
              Tab(icon: Icon(Icons.window), text: 'Modal'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            SoluCXWidget(
              soluCXKey: 'my-key',
              data: SoluCXWidgetData(
                name: "John Doe",
                email: "teste@teste.com",
                cpf: "12345678900",
                journey: "my-journey",
                clientId: 'abc123',
              ),
              type: SoluCXWidgetType.inline,
              options: SoluCXWidgetOptions(),
            ),
            SoluCXWidget(
              soluCXKey: 'my-key',
              data: SoluCXWidgetData(
                name: "John Doe",
                email: "teste@teste.com",
                cpf: "12345678900",
                journey: "my-journey",
                clientId: 'abc123',
              ),
              type: SoluCXWidgetType.bottom,
              options: SoluCXWidgetOptions(),
            ),
            SoluCXWidget(
              soluCXKey: 'my-key',
              data: SoluCXWidgetData(
                name: "John Doe",
                email: "teste@teste.com",
                cpf: "12345678900",
                journey: "my-journey",
                clientId: 'abc123',
              ),
              type: SoluCXWidgetType.top,
              options: SoluCXWidgetOptions(),
            ),
            SoluCXWidget(
              soluCXKey: 'my-key',
              data: SoluCXWidgetData(
                name: "John Doe",
                email: "teste@teste.com",
                cpf: "12345678900",
                journey: "my-journey",
                clientId: 'abc123',
              ),
              type: SoluCXWidgetType.modal,
              options: SoluCXWidgetOptions(),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义组件插件solucx_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•2 天前

更多关于Flutter自定义组件插件solucx_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用自定义组件插件solucx_widget的示例代码。假设solucx_widget插件提供了一个自定义的按钮组件SolucxButton，我们可以展示如何导入这个插件并在应用中使用它。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加solucx_widget插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  solucx_widget: ^latest_version  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入solucx_widget插件：

import 'package:solucx_widget/solucx_widget.dart';

3. 使用自定义组件

假设SolucxButton是solucx_widget插件提供的一个自定义按钮组件，你可以这样使用它：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SolucxWidget Demo'),
      ),
      body: Center(
        child: SolucxButton(
          onPressed: () {
            // 按钮点击事件处理
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('SolucxButton clicked!')),
            );
          },
          child: Text('Click Me'),
          // 假设SolucxButton还有其他可配置的属性，例如颜色、大小等
          color: Colors.blue,
          textSize: 20.0,
        ),
      ),
    );
  }
}

4. 运行应用

确保你已经正确添加了依赖并导入了插件，然后运行你的Flutter应用：

flutter run

注意事项

插件文档：实际使用中，请查阅solucx_widget插件的官方文档，了解所有可用的属性和方法。
版本兼容性：确保你使用的Flutter SDK版本与插件版本兼容。
错误处理：在实际项目中，添加必要的错误处理机制，以确保应用的健壮性。

以上代码只是一个简单的示例，展示了如何在Flutter项目中使用自定义组件插件solucx_widget。具体使用时，请根据实际插件的API文档进行调整。