Flutter自定义组件集合插件mwidgets的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter自定义组件集合插件mwidgets的使用

MWidget 描述

mwidgets 包含了一系列自定义组件，如 MText, MDropdown, MFileImage, MNetworkImage, MLottie, MSvg, MBouncingButton, MRating, MPinPut, MScroll, MTextFiled, MRangeItemWidget, MRadioItemWidget 等。

设置

首先需要在应用启动时设置 MWidgets 的配置参数：

import 'package:flutter/material.dart';
import 'package:mwidgets/setup.dart';

void main() {
  MWidgetsSetUp.settings(
    fontEn: "",
    fontAr: "",
    primary: Colors.black,
    secondPrimary: Colors.white,
  );
  runApp(const MyApp());
}

示例

MText

MText 是一个自定义文本组件，支持设置文本大小和字体权重。

MText(
  text: product.name,
  size: FoontSize.font18,
  weight: FontWeight.w500,
).addPadding(vertical: 12.0),

MSvg

MSvg 用于加载 SVG 图标。

const MSvg(
  name: Svgs.arrowBack,
  height: 32.0,
)

MNetworkImage

MNetworkImage 用于加载网络图片。

MNetworkImage(
  url: category.image,
  height: 45.0,
  width: 45.0,
  fit: BoxFit.cover,
),

MLottieImage

MLottieImage 用于加载 Lottie 动画文件。

MLottieImage(
  name: category.image,
  height: 45.0,
  width: 45.0,
  fit: BoxFit.cover,
),

MFileImage

MFileImage 用于加载本地文件图片。

MFileImage(
  file: "",
  height: 45.0,
  width: 45.0,
  fit: BoxFit.cover,
),

MAssetImage

MAssetImage 用于加载项目资源图片。

MAssetImage(
  name: item.icon,
  width: context.w * 0.85,
  fit: BoxFit.contain,
);

MPinput

MPinput 用于创建带验证的密码输入框。

MPinput(
  mKey: const Key('pinPut'),
  length: 6,
  onChanged: verifyCubit.setCode,
  keyboardType: TextInputType.number,
).addPadding(bottom: 24.0),

MDropDown

MDropDown 用于创建下拉选择框。

MDropDown<CategoryModel>(
  inFill: false,
  options: cubit.categories,
  setInitial: cubit.category,
  title: context.tr.chooseCategory,
  hint: context.tr.chooseCategory,
  itemTitle: (item) => item.name,
  onChanged: cubit.setCategory,
).addPadding(bottom: 20.0),

MTextFiled

MTextFiled 用于创建带边框的输入框，并支持验证功能。

MTextFiled(
  controller: cubit.password,
  obscureText: hide,
  paddingVertical: 8.0,
  suffix: icon,
  hintText: context.tr.password,
  border: OutlineInputBorder(
    borderSide: BorderSide(color: Coolors.highLight),
    borderRadius: BorderRadius.circular(5.0),
  ),
  validator: (valid) {
    return Validates.isPassword(
      password: cubit.password.text,
      errorMessage: context.tr.passwordIsShort,
    );
  },
).addPadding(bottom: 12.0),

MPasswordWidget 和 Validates

MPasswordWidget 可以嵌套其他输入框，并支持验证功能。

MPasswordWidget(
  child: (icon, hide) {
    kPrint(hide);
    return MTextFiled(
      controller: cubit.password,
      obscureText: hide,
      paddingVertical: 8.0,
      suffix: icon,
      hintText: context.tr.password,
      border: OutlineInputBorder(
        borderSide: BorderSide(color: Coolors.highLight),
        borderRadius: BorderRadius.circular(5.0),
      ),
      validator: (valid) {
        return Validates.isPassword(
          password: cubit.password.text,
          errorMessage: context.tr.passwordIsShort,
        );
      },
    );
  },
).addPadding(bottom: 12.0),

MProgressButton

MProgressButton 用于创建带进度条的按钮。

MProgressButton(
  progress: 1,
  onTap: () {
    
  },
).addPadding(bottom: 21.0),

MSvgButton

MSvgButton 用于创建带有 SVG 图标的按钮。

MSvgButton(
  width: 60.0,
  height: 60.0,
  icon: Svgs.delete,
  iconSize: 30.0,
  borderRadius: 16.0,
  onTap: () {
  
  },
),

MBouncingButton

MBouncingButton 用于创建带有弹跳动画效果的按钮。

MBouncingButton(
  title: context.tr.edit,
  onTap: () {
    context.pushReplacement(
      AddNewOrUpdateShipmentScreen(
        moreShipment: moreShipment,
        shipment: shipment,
      ),
    );
  },
),

MAnimatedButton

MAnimatedButton 用于创建带有动画效果的按钮。

MAnimatedButton(
  onTap: () async {
    await cubit.addToCart(productId: product.id);
  },
  title: context.tr.addToCart,
  success: Row(
    children: [
      const MSvg(
        name: Svgs.cartDone,
        height: 28.0,
        color: Coolors.greenAccent,
      ).addPadding(end: 12.0),
      MText(
        text: context.tr.done,
        size: FoontSize.font18,
        color: Coolors.greenAccent,
      )
    ],
  ),
);

MDividerItemWidget

MDividerItemWidget 用于创建分割线。

const MDividerItemWidget(),

MTitleDividerItemWidget

MTitleDividerItemWidget 用于创建带有标题的分割线。

const MTitleDividerItemWidget(title: "OR")

MRatingItem

MRatingItem 用于创建评分组件。

MRatingItem(
  rating: 4.5,
  oneStar: true,
  onRatingUpdate: (value) {},
).addPadding(start: 8.0)

MPadding.set()

MPadding.set() 用于设置内边距。

const Padding(
  padding: MPadding.set(horizontal: 21.0),
  child: MSvg(name: Svgs.date),
),

MBorderRadius

MBorderRadius 用于设置圆角。

borderRadius: MBorderRadius.set(all: 8.0),

MScroll

MScroll 用于创建水平滚动视图。

return MScroll(
  axis: Axis.horizontal,
  child: Row(
    children: cubit.products.map((item) {
      return ProductItemWidget(
        product: item,
      );
    }).toList(),
  ),
);

Loader

Loader 用于创建加载动画。

Loader.loadingSkeleton(
  height: context.h * 0.14,
  width: context.w * 0.7,
);

Loader.loadingText(
  height: context.w * 0.04,
  width: context.w * 0.3,
  padding: const MPadding.set(start: 24),
),

ImagesViewerScreen

ImagesViewerScreen 用于展示多张图片。

context.push(
  ImagesViewerScreen(
    urls: images,
    initialImage: initialImage,
  ),
);

FToast

FToast 用于显示提示信息。

FToast.showError(context: context, message: message);
FToast.showSuccess(context: context, message: message);

showMBottomSheet

showMBottomSheet 用于显示底部弹出框。

showReviewsBottomSheet({
  required BuildContext context,
  required String productId,
}) {
  showMBottomSheet(
    context: context,
    noScrolling: true,
    bottomSheet: ReviewsBottomSheet(productId: productId),
  );
}

showMCupertinoDialog

showMCupertinoDialog 用于显示 iOS 风格的对话框。

showCheckMailDialog({required BuildContext context}) {
  showMCupertinoDialog(
    context: context,
    child: const CheckMailDialog(),
  );
}

PhoneValidator

PhoneValidator 用于验证手机号码格式。

final phoneValidate = PhoneValidator();
StreamBuilder<bool>(
  initialData: true,
  stream: phoneValidate.validate.stream,
  builder: (context, snapshot) {
    return MTextFiled(
      mKey: const Key('phone'),
      onChanged: (value) {
         phoneValidate.getPhone(phone: value);
      },
      controller: cubit.phone,
      title: context.tr.phoneNumber,
      hintText: '01× ×××× ××××',
      prefix: const MSvg(name: Svgs.phone),
      keyboardType: TextInputType.phone,
      validator: (valid) {
        if (snapshot.data!) {
          return null;
        }
        return context.tr.pleaseEnterValidPhone;
      },
    );
  },
).addPadding(bottom: 18.0),

Validates

Validates 提供了一些常用的验证方法。

Validates.isPassword(
  password: cubit.oldPassword.text,
  errorMessage: context.tr.passwordIsShort,
);

Validates.isConfirmPassword(
  password: cubit.newPassword.text,
  confrimPassword: cubit.confirmPassword.text,
  errorMessage: context.tr.notSamePassword,
);

Validates.isEmail(
  email: cubit.email.text,
  errorMessage: context.tr.emailIsNotValid,
);

Validates.isHasData(
  data: cubit.fullName.text,
  errorMessage: context.tr.enterYourName,
);

扩展方法

日期格式化

提供了多种日期格式化的方法。

"".toNameOfMonthAndTime;
"".toDateOnly;
"".toDateAndTime;
"".ago;
"".toTimeOnly;
"".toMonthAndDay;
"".toYearMonthDay;

Context

提供了多种与 BuildContext 相关的方法。

final height = context.mHeight;
final width = context.mWidth;
final orientation = context.mOrientation;
final canPop = context.canPop;
final maybePop = context.maybePop;

context.push(
  ProductDetailsScreen(
    product: item,
  ),
);

context.pushReplacement(
  ProductDetailsScreen(
    product: item,
  ),
);

context.pushAndRemoveUntil(
  ProductDetailsScreen(
    product: item,
  ),
);

context.pushNamed("/login");  

context.pushReplacementNamed("/login");  

context.pushNamedAndRemoveUntil("/login"); 

context.pop();

.addAction()

.addAction() 方法可以为任意组件添加点击事件。

MSvg(
  height: 26.0,
  name: Svgs.saved,
  color: Coolors.grey,
).addAction(
  onGesture: () {
  
  },
);

kPrint

kPrint 方法用于打印日志。

kPrint("Hello World");

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用自定义组件集合插件mwidgets的示例代码。请注意，为了实际运行以下代码，你需要确保已经安装并配置好了Flutter开发环境，并且已经通过pubspec.yaml文件添加了mwidgets依赖。

首先，确保在pubspec.yaml文件中添加mwidgets依赖：

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

然后，运行flutter pub get来安装依赖。

接下来，让我们编写一个示例Flutter应用，展示如何使用mwidgets中的一些自定义组件。

示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:mwidgets/mwidgets.dart';  // 导入mwidgets库

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MWidgets 自定义组件示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 使用 MButton 自定义按钮
            MButton(
              text: '点击我',
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('按钮被点击了！')),
                );
              },
            ),

            // 使用 MTextField 自定义文本输入框
            SizedBox(height: 20),
            MTextField(
              label: '用户名',
              placeholder: '请输入用户名',
              onChanged: (value) {
                print('用户名输入框内容: $value');
              },
            ),

            // 使用 MCheckBox 自定义复选框
            SizedBox(height: 20),
            MCheckBox(
              value: true,
              onChanged: (newValue) {
                print('复选框状态: $newValue');
              },
              label: '接受条款和条件',
            ),

            // 使用 MDatePicker 日期选择器
            SizedBox(height: 20),
            MDatePicker(
              initialDate: DateTime.now(),
              onDateSelected: (date) {
                print('选择的日期: $date');
              },
            ),
          ],
        ),
      ),
    );
  }
}

说明

  1. MButton: 自定义按钮组件，可以通过onPressed回调处理点击事件。
  2. MTextField: 自定义文本输入框组件，通过onChanged回调处理文本变化。
  3. MCheckBox: 自定义复选框组件，通过onChanged回调处理状态变化。
  4. MDatePicker: 自定义日期选择器组件，通过onDateSelected回调处理日期选择事件。

运行应用

确保所有代码无误后，通过命令行运行flutter run即可在模拟器或实际设备上查看效果。

注意

  • 由于mwidgets是一个假想的库，具体的API和方法可能有所不同。因此，你需要参考mwidgets的实际文档来确保API的正确使用。
  • 如果有任何自定义组件的特定需求，你可以查阅mwidgets的文档或GitHub仓库以获取更多信息。

希望这个示例代码能帮助你理解如何在Flutter项目中使用mwidgets自定义组件集合插件。

回到顶部