Flutter基础功能集成插件tecfy_basic_package的使用

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

Flutter基础功能集成插件tecfy_basic_package的使用

Tecfy Core For Mobile Client Projects

此插件仅供内部使用,您可以自由地在您的风险下使用它!

支持平台:

  • Android
  • iOS
  • Windows
  • Web

接口/抽象类:

  • Base Controller
  • Base Model

服务:

  • API Service
  • Config Server
  • ImageService
  • Notification Service
  • Theme Service

组件:

  • 带加载动画的按钮
  • 复选框
  • 多选下拉菜单
  • 网络图片
  • 搜索框
  • 文本字段
  • 文本标签

使用TecfyController实现MVC模式时,您需要在main.dart中应用以下内容:

import 'package:lifecycle/lifecycle.dart';

return MaterialApp(
    navigatorObservers: [defaultLifecycleObserver],
);

使用MVC模式的步骤:

  • 创建一个继承自TecfyController的控制器
  • 创建一个继承自BaseModel的模型
  • 使用TecfyStatefulWidget<Controller>而不是TecfyStatefulWidget
  • 使用TecfyState<Statfull, Controller>而不是State<Statfull>
  • 在状态类中实现createController方法

推荐项目结构

modules
|-- employee
|   |-- widgets
|   |   |-- employee_cart.widget.dart
|   |-- employee.controller.dart
|   |-- employee.model.dart
|   |-- employee_form.page.dart
|   |-- employee_list.page.dart
|   |-- employee.service.dart
|-- department
|-- widgets
|   |-- text_filed.widget.dart
|-- services
    |-- navigator.service.dart
    |-- config.service.dart
    |-- notification.service.dart
    |-- init.service.dart

推荐命名约定

  1. 文件名应以.TYPE结尾,例如config.service.dart
  2. 文件名应使用下划线分隔多词名称,例如employee_list.page.dart
  3. 所有文件夹和文件名应为小写字母
  4. 服务函数名称应为addNewOrder(),相应的控制器函数必须为onAddNewOrder()

示例代码

example/lib/main.dart

import 'package:example/employee/employee_form.page.dart';
import 'package:example/employee/employee_list.page.dart';
import 'package:flutter/material.dart';
import 'package:tecfy_basic_package/tecfy_basic_package.dart';
import 'package:lifecycle/lifecycle.dart';

void main() {
  TecfyBasicApp.themeConfig = ThemeConfigMock();
  BeamerService.pages = [
    EmployeeListPage().beamer,
    EmployeeFormPage().beamer,
  ];

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [defaultLifecycleObserver],
      title: '我的应用程序',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '我的应用程序'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String? title;
  MyHomePage({Key? key, this.title}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? "默认"),
      ),
      body: Center(
        child: Column(
          children: [
            AppButtonIconText(
              icon: Icon(Icons.add),
              label: '员工页面',
              onPressed: () async {
                AppNavigator.navigateTo(context, () => EmployeeListPage());
              },
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter基础功能集成插件tecfy_basic_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter基础功能集成插件tecfy_basic_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成和使用tecfy_basic_package(假设这是一个虚构的插件,用于展示基础功能集成)的示例代码。由于tecfy_basic_package是一个虚构的插件,下面的代码将基于常见的Flutter插件结构和功能进行模拟。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加对tecfy_basic_package的依赖:

dependencies:
  flutter:
    sdk: flutter
  tecfy_basic_package: ^1.0.0  # 假设最新版本是1.0.0

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

2. 导入插件

在你的Dart文件中导入该插件:

import 'package:tecfy_basic_package/tecfy_basic_package.dart';

3. 使用插件功能

假设tecfy_basic_package提供了以下功能:

  • 显示一个简单的欢迎消息
  • 网络请求示例
  • 本地存储示例

显示欢迎消息

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tecfy Basic Package Demo'),
        ),
        body: Center(
          child: WelcomeMessageWidget(),
        ),
      ),
    );
  }
}

class WelcomeMessageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: TecfyBasicPackage.getWelcomeMessage(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else {
            return Text('Welcome Message: ${snapshot.data}');
          }
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

网络请求示例

class NetworkRequestDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          var response = await TecfyBasicPackage.fetchData('https://api.example.com/data');
          print('Network Response: $response');
          // 显示或处理响应数据
        } catch (e) {
          print('Network Error: $e');
        }
      },
      child: Text('Fetch Data'),
    );
  }
}

本地存储示例

class LocalStorageDemo extends StatefulWidget {
  @override
  _LocalStorageDemoState createState() => _LocalStorageDemoState();
}

class _LocalStorageDemoState extends State<LocalStorageDemo> {
  String _savedData = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(labelText: 'Enter some data'),
          onChanged: (value) {
            // 当文本变化时保存数据
            TecfyBasicPackage.saveData('key', value);
            setState(() {
              _savedData = value;
            });
          },
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () async {
            String loadedData = await TecfyBasicPackage.loadData('key');
            setState(() {
              _savedData = loadedData;
            });
          },
          child: Text('Load Data'),
        ),
        SizedBox(height: 20),
        Text('Loaded Data: $_savedData'),
      ],
    );
  }
}

4. 整合到主应用

最后,将上述组件整合到你的主应用中:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tecfy Basic Package Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              WelcomeMessageWidget(),
              SizedBox(height: 20),
              NetworkRequestDemo(),
              SizedBox(height: 40),
              LocalStorageDemo(),
            ],
          ),
        ),
      ),
    );
  }
}

请注意,上述代码中的TecfyBasicPackage及其方法(如getWelcomeMessage, fetchData, saveData, loadData)是假设存在的,你需要根据实际的tecfy_basic_package插件文档进行调整。如果tecfy_basic_package插件确实存在,请参考其官方文档以获取准确的方法和用法。

回到顶部