Flutter核心功能应用插件tch_appliable_core的使用

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

Flutter核心功能应用插件tch_appliable_core的使用

tch_appliable_core 是一个用于快速且一致地开始Flutter项目的核心包。它包含了许多可以在你的项目中使用的实用工具。这个包还包括了一个示例，你可以通过该示例了解如何使用这些功能。

平台注意

我在所有平台上都使用过Flutter项目，但我的主要关注点是移动和桌面平台。因此，某些小部件和功能可能在Web上无法正常工作，但在其他平台上应该可以正常使用。我个人认为Flutter尚未完全准备好用于Web开发。

开发注意

由于时间有限，文档可能已经过时，但该包本身会继续被维护和发展。

目录

  1. 安装
  2. 应用程序创建
  3. 路由器（Navigator 1.0）
  4. 翻译器
  5. 偏好设置
  6. 屏幕、小部件与响应式
  7. MainDataProvider与DataWidgets
  8. Hooks
  9. 媒体
  10. 工具
  11. 路线图

安装

在你的项目pubspec.yaml文件中添加以下依赖：

dependencies:
  tch_appliable_core: ^0.34.0

应用程序创建

如果你的IDE没有自动导入，手动添加以下导入语句：

import 'package:tch_appliable_core/tch_appliable_core.dart';

然后，使用CoreApp而不是MaterialApp作为你的主应用小部件，并在main.dart文件中运行runApp(App())。

@override
Widget build(BuildContext context) {
  return CoreApp(
    title: 'Core Example',
    initializationUi: Container(
      child: Center(
        child: Text(
          '这可以是启动画面，或者不同的自定义初始化界面',
          textAlign: TextAlign.center,
        ),
      ),
    ),
    initialScreenRoute: HomeScreen.ROUTE,
    onGenerateRoute: AppRouter.onGenerateRoute,
    snapshot: AppDataStateSnapshot(),
  );
}

现在，你的应用将以MaterialApp的形式运行，但包含了此包提供的功能。

路由器（Navigator 1.0）

当前，CoreApp需要使用此路由器。要使用它，你需要向CoreApp提供RouteFactory onGenerateRoute。

initialScreenRoute是作为初始屏幕启动的应用路由名称。

@override
Widget build(BuildContext context) {
  return CoreApp(
    ...
    initialScreenRoute: HomeScreen.ROUTE,
    onGenerateRoute: AppRouter.onGenerateRoute,
    ...
  );
}

为了创建自己的RouteFactory，可以在lib/core/Router.dart或其他合适的地方创建一个新的生成器，并将其引用到CoreApp中。

Route<dynamic> onGenerateRoute(RouteSettings settings) {
  final arguments = settings.name?.routingArguments;

  if (arguments != null) {
    switch (arguments.route) {
      case HomeScreen.ROUTE:
        return createRoute((BuildContext context) => HomeScreen(), settings);
      default:
        throw Exception('实现OnGenerateRoute在应用中');
    }
  }

  throw Exception('参数不可用');
}

导航时，不要使用Navigator，而是使用此包提供的函数。

Future<T?> pushNamed<T extends Object>(BuildContext context, String routeName, {Map<String, String>? arguments});

Future<T?> pushNamedNewStack<T extends Object>();

void popNotDisposed<T extends Object?>(BuildContext context, bool mounted, [T? result]);

在不同屏幕上传递参数时，使用RoutingArguments。

翻译器

翻译器是此包的一个可选功能。通过向CoreApp提供TranslatorOptions来激活它。

翻译器很好地与我的JsTrions JSON翻译应用配合使用。

@override
Widget build(BuildContext context) {
  return CoreApp(
    ...
    translatorOptions: TranslatorOptions(
      languages: ['en', 'sk'],
      supportedLocales: [const Locale('en'), const Locale('sk')],
    ),
    ...
  );
}

然后，将JSON翻译文件添加到你的资源中，路径为assets/translations/<code>.json，例如assets/translations/en.json。

翻译器会自动使用操作系统语言，并且如果该语言在supportedLocales中，则可以更改运行时的语言。

Translator.instance!.changeLanguage('sk');

为了立即看到新语言，可以使CoreApp失效。

CoreAppState.instance.invalidateApp();

使用翻译器进行字符串翻译，只需编写带有短tt函数的文本。

tt('home.screen.title');

屏幕、小部件与响应式

所有的stateful屏幕/小部件都应该扩展CoreApp抽象类，而不是Flutter的。

屏幕

首先，你需要决定是否支持响应式。最好创建你应用的主要AbstractAppScreen和AbstractAppScreenState，在那里你可以设置应用的默认值。

支持响应式更好，对于这种情况，你的应用的AbstractAppScreen扩展AbstractResposiveScreen，AbstractAppScreenState扩展AbstractResposiveScreenState。 CoreApp的响应性分为几个屏幕大小，灵感来自Web上的Bootstrap。

对于非响应式屏幕/应用，你应该扩展AbstractScreen和AbstractScreenState。

CoreApp屏幕目前支持创建AppBar、Drawer和BottomBar。详细信息请参阅示例。

小部件

就像屏幕一样，小部件也可以是响应式的，扩展AbstractResponsiveWidget和AbstractResponsiveWidgetState。

或者非响应式的，扩展AbstractStatefulWidget和AbstractStatefulWidgetState。

有用的函数

使用CoreApp抽象类的原因是一些有用的函数，你应该使用它们。

例如，你不应该使用setState，而应始终使用setStateNotDisposed。

使用firstBuildOnly在首次构建时使用可用的BuildContext进行初始化。

MainDataProvider与DataWidgets

Hooks

媒体

工具

此包包括许多实用工具、方法和扩展。检查代码以查找有用的特性。

  • Boundary
  • Color
  • List
  • Numbers
  • Text

路线图

直到版本1.0.0之前，不会有可预测的路线图。相反，开发取决于使用此包的项目的需求。然而，此包的核心支柱已经实现。

示例代码

import 'package:example/App.dart';
import 'package:flutter/material.dart';

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

更多关于Flutter核心功能应用插件tch_appliable_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter核心功能应用插件tch_appliable_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用tch_appliable_core插件的示例代码。请注意，由于tch_appliable_core并非一个广为人知的公共插件（可能是某个特定项目或公司内部的插件），以下代码将基于假设的插件功能和API进行设计。如果你使用的tch_appliable_core插件有特定的API或功能，请根据实际情况进行调整。

首先，确保你已经在pubspec.yaml文件中添加了tch_appliable_core插件的依赖项：

dependencies:
  flutter:
    sdk: flutter
  tch_appliable_core: ^x.y.z  # 替换为实际的版本号

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

接下来，在你的Flutter应用中，你可以按照以下方式使用tch_appliable_core插件。以下是一个简单的示例，展示了如何初始化插件并使用其可能的核心功能。

import 'package:flutter/material.dart';
import 'package:tch_appliable_core/tch_appliable_core.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 StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TchAppliableCore _core;

  @override
  void initState() {
    super.initState();
    // 初始化插件
    _core = TchAppliableCore();

    // 假设插件有一个初始化方法需要调用
    _core.initialize().then((value) {
      print('Plugin initialized: $value');
    }).catchError((error) {
      print('Failed to initialize plugin: $error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('tch_appliable_core Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Button press count goes here',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 调用插件的某个功能，例如获取数据
                try {
                  var data = await _core.fetchData();
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Data fetched: $data')),
                  );
                } catch (error) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Failed to fetch data: $error')),
                  );
                }
              },
              child: Text('Fetch Data'),
            ),
          ],
        ),
      ),
    );
  }
}

// 假设TchAppliableCore类的定义如下（实际情况可能不同）
class TchAppliableCore {
  Future<bool> initialize() async {
    // 插件初始化逻辑
    // 这里只是模拟一个异步操作
    await Future.delayed(Duration(seconds: 1));
    return true; // 假设初始化成功
  }

  Future<String> fetchData() async {
    // 模拟从插件获取数据的逻辑
    await Future.delayed(Duration(seconds: 2));
    return 'Sample Data'; // 返回模拟数据
  }
}

请注意，上述代码中的TchAppliableCore类及其方法initialize和fetchData是基于假设的。在实际使用中，你需要根据tch_appliable_core插件提供的API文档来实现相应的功能。

此外，如果插件提供了其他核心功能，如用户认证、数据存储等，你可以按照类似的方式调用这些功能，并在UI中展示相应的结果。

回到顶部