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

本插件包包含了一些简单的组件，适用于 FreewillFx 应用程序。

安装

1. 在 pubspec.yaml 文件中添加最新版本的插件，并运行 flutter pub get 命令。

dependencies:
    freewill_fx_widgets: ^1.4.10

1. 导入插件并在你的 Flutter 应用程序中使用。

import 'package:freewill_fx_widgets/fx.dart';

TextFontStyle

这是一个可以修改 TextStyle 的文本组件：

• FontFamily
• FontSize
• Color
• TextAlign
• FontWeight
• TextOverflow
• Underline

TextFontStyle(
    "Hello World",
    fontSize: 20.0,
    color: Colors.blue,
    textAlign: TextAlign.center,
    fontWeight: FontWeight.bold,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    decoration: TextDecoration.underline,
)

AlertDialog

这是一个可以修改对话框标题的对话框组件：

• title
• buttonColor

AlertDialog(
    title: Text("提示"),
    actions: [
        TextButton(
            onPressed: () {},
            child: Text("确定"),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.blue),
            ),
        ),
    ],
)

Loading

这是一个加载页面组件。

PermissionHandler

该组件用于处理权限请求：

• Camera
• Gallery
• Location

// 示例代码省略，具体实现请查阅文档

ImagePicker

该组件用于从相机或图库中选择图片：

• From camera
• From gallery

File? image = await showImagePickerBottomSheet(
    color: Colors.black,
    cropImage: true,
);

setState(() => _image = image);

PageIndicator

这是页面指示器组件。

GalleryView

这是图库视图组件。

CropImage

在 showImageBottomSheet 中设置 cropImage 为 true。

File? file = await showImagePickerBottomSheet(
    color: Colors.black,
    cropImage: true,
);

setState(() => _image = file);

QRCodeScanner

这是一个二维码扫描组件。

Barcode? result = await Get.to(() => FXQrScanner());

if (result != null) {
    setState(() => qrResult = result);
}

SubmitButton

这是一个可以修改样式的提交按钮组件：

• Title
• TestKey
• BackgroundColor
• Padding
• BorderWidth
• BorderRadius
• BorderColor
• Shadow
• TextColor
• FontSize

SubmitButton(
    title: "提交",
    backgroundColor: Colors.blue,
    textColor: Colors.white,
    padding: EdgeInsets.all(12.0),
    borderRadius: BorderRadius.circular(8.0),
    borderWidth: 1.0,
    borderColor: Colors.black,
    shadow: BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
    ),
    fontSize: 16.0,
)

OkCancelDialog

这是一个可以自定义标题、图标、内容和按钮的确认对话框组件。

OkCancelDialog(
    title: Text("提示"),
    content: Text("你确定要执行此操作吗？"),
    okButtonText: "确定",
    cancelButtonText: "取消",
    onOkPressed: () {
        // 执行确定操作
    },
    onCancelPressed: () {
        // 执行取消操作
    },
)

Switch

这是一个可以添加文本的自定义开关组件。

Switch(
    value: _isSwitchOn,
    onChanged: (bool value) {
        setState(() {
            _isSwitchOn = value;
        });
    },
    label: Text("开关"),
)

OTPTextField

这是一个可用于自动化测试的 OTP 文本输入框组件。

OTPTextField(
    length: 6,
    width: MediaQuery.of(context).size.width,
    textFieldAlignment: MainAxisAlignment.spaceAround,
    fieldWidth: 40,
    style: TextStyle(
        fontSize: 17,
    ),
    onChanged: (String pin) {
        // 输入改变时的操作
    },
)

ToastMessage

这是一个自定义的吐司消息组件（例如复制到剪贴板）。

ToastMessage.show("复制成功", context);

BackButton

这是一个可以自定义图标、阴影并添加圆边的返回按钮组件。

BackButton(
    onPressed: () {
        Navigator.pop(context);
    },
    color: Colors.black,
    shape: CircleBorder(side: BorderSide(color: Colors.black)),
)

SelectedButton

这是一个可以选择的按钮列表组件（例如在 TERMINUS Mobile 中的过滤组）。

SelectedButton(
    options: ["选项1", "选项2", "选项3"],
    onSelected: (int index) {
        // 选择某个选项时的操作
    },
)

ItemPickerPage & ItemPickerCell

这是一个可以选择项目的页面组件，可以自定义选中的标签、选择单元格、单选或多选。

ItemPickerPage(
    items: ["选项1", "选项2", "选项3"],
    onItemSelected: (int index) {
        // 选择某个项目时的操作
    },
)

SearchBar

这是一个自定义搜索栏组件。

SearchBar(
    hintText: "搜索",
    onSubmitted: (String query) {
        // 搜索时的操作
    },
)

Calendar

这是一个使用 Syncfusion 日期范围选择器构建的日历组件。

// 示例代码省略，具体实现请查阅文档

BottomSheet

这是一个底部弹出框模板组件。

BottomSheet(
    onClosing: () {},
    builder: (BuildContext context) {
        return Container(
            height: 200,
            child: Center(
                child: Text("底部弹出框内容"),
            ),
        );
    },
)

NewVersionDialog

这是一个当有新版本时显示的对话框组件。

// 示例代码省略，具体实现请查阅文档