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

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

mm_component

MostMoney 用于登录的插件。

开始使用

如何使用？

  1. 在 pubspec.yaml 文件中添加插件，并运行 flutter pub get。
  2. 在登录页面导入插件。（例如：import 'package:mm_component/mm_component.dart';）
  3. 在按钮的动作中调用 MmComponent.open() 方法。
  4. 设置 MostMoney 的 web 地址。
  5. 设置 MostMoney 的应用版本号。
  6. 使用 failAlertMode 属性来设置在出现错误时如何向用户展示消息。可以设置为 MmComponent.MODE_ALERT 或 MmComponent.MODE_TOAST。

示例：

/// 必要的参数：
final String mmUrl = "http://172.16.116.92:8081/bumm/mm-light"; // 测试环境
// final String mmUrl = "https://customer.mostmoney.mn:9091/bumm/bid"; // 生产环境
final String appVersion = "85";

/// 调用组件：
await MmComponent.open(
  operation: MmComponent.KEY_NAVIGATION_LOGIN,
  version: appVersion,
  url: mmUrl,
  onSuccess: onSuccess,
  onGoto: onGoto,
  failAlertMode: MmComponent.MODE_TOAST,
  entityCode: '1',
  appBarMode: MmComponent.VISIBLE
  // onFail: onFail, // 可选参数
  // onRedirect: onRedirect, // 可选参数
);

组件返回的结果处理函数：

void onSuccess(String result) {
  // 登录成功并接收到用户数据
  setState(() {
    response = "onSuccess: $result";
  });
}

void onGoto(String result) {
  // 跳转到其他页面
  setState(() {
    response = "onGoto: $result";
  });
}

void onFail(String result) async {
  // 可选参数
}

void onRedirect(String result) {
  // 可选参数
}

示例代码

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

import 'package:mm_component/mm_component.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

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

class _MyAppState extends State<MyApp> {
  String response = '';

  final String mmUrl = "http://172.16.116.92:8081/bumm/mm-light"; // 测试环境
  // final String mmUrl = "https://customer.mostmoney.mn:9091/bumm/bid"; // 生产环境
  final String appVersion = "85";

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    await MmComponent.open(
      operation: MmComponent.KEY_NAVIGATION_LOGIN,
      version: appVersion,
      url: mmUrl,
      onSuccess: onSuccess,
      onGoto: onGoto,
      failAlertMode: MmComponent.MODE_TOAST,
      entityCode: '1',
      appBarMode: MmComponent.VISIBLE
      // onFail: onFail, // 可选参数
      // onRedirect: onRedirect, // 可选参数
    );
  }

  void onSuccess(String result) {
    // 登录成功并接收到用户数据
    setState(() {
      response = "onSuccess: $result";
    });
  }

  void onGoto(String result) {
    // 跳转到其他页面
    setState(() {
      response = "onGoto: $result";
    });
  }

  void onFail(String result) async {
    // 可选参数
  }

  void onRedirect(String result) {
    // 可选参数
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MM Component 插件示例'),
        ),
        body: Center(
          child: Text('$response'),
        ),
      ),
    );
  }
}

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

1 回复

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


在使用 Flutter 自定义组件插件 mm_component 时，首先需要确保你已经将该插件添加到你的 Flutter 项目中。以下是一个基本的步骤指南，帮助你开始使用 mm_component 插件。

1. 添加依赖

在 pubspec.yaml 文件中添加 mm_component 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  mm_component: ^1.0.0  # 请确保使用正确的版本号

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

2. 导入插件

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

import 'package:mm_component/mm_component.dart';

3. 使用自定义组件

假设 mm_component 提供了一些自定义的组件，比如 CustomButton 和 CustomTextField，你可以像使用其他 Flutter 组件一样使用它们。

示例：使用 CustomButton

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MM Component Example'),
      ),
      body: Center(
        child: CustomButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

示例：使用 CustomTextField

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MM Component Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            CustomTextField(
              hintText: 'Enter your name',
              onChanged: (value) {
                print('Name: $value');
              },
            ),
            SizedBox(height: 20),
            CustomButton(
              onPressed: () {
                print('Button Pressed!');
              },
              text: 'Submit',
            ),
          ],
        ),
      ),
    );
  }
}

4. 自定义组件的配置

根据 mm_component 插件的文档，你可能会发现一些组件支持自定义配置，比如颜色、大小、样式等。你可以通过传递不同的参数来定制这些组件。

例如，假设 CustomButton 支持 color 和 textStyle 参数：

CustomButton(
  onPressed: () {
    print('Button Pressed!');
  },
  text: 'Click Me',
  color: Colors.blue,
  textStyle: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
    color: Colors.white,
  ),
);

5. 处理事件

自定义组件通常会支持一些事件回调，比如 onPressed、onChanged 等。你可以在这些回调中处理用户交互。

例如，处理 CustomTextField 的输入变化：

CustomTextField(
  hintText: 'Enter your email',
  onChanged: (value) {
    print('Email: $value');
  },
);
回到顶部