Flutter插件ffm的使用_ffm插件的主要功能包括UI和逻辑分离，并提供了连接它们的方法

概述

本示例将展示如何使用ffm插件来实现一个简单的Flutter应用。ffm插件的主要功能包括UI和逻辑分离，并提供了连接它们的方法。此外，它还支持自动处理状态管理。

安装与配置

首先，你需要在你的pubspec.yaml文件中添加ffm依赖：

dependencies:
  ffm: ^x.x.x

然后运行以下命令获取所有依赖项：

fvm flutter pub get

示例代码

主页面逻辑 (HomePageLogic)

首先定义一个逻辑类HomePageLogic，该类继承自FPageLogic并包含状态管理的相关方法。

import 'package:ffm/ffm.dart';
import 'home-page.dart';

class HomePageLogic extends FPageLogic<HomePage> {
  late FPipe<int> countPipe;

  HomePageLogic() {
    countPipe = FPipe(initValue: 0, disposer: disposer);
  }

  [@override](/user/override)
  void initState() {}

  [@override](/user/override)
  void onBuildLayout() {}

  [@override](/user/override)
  void onLayoutLoaded() {}

  void onClickAdd() async {
    countPipe.update(countPipe.value + 1); // 更新计数器值
    if (countPipe.value == 3) { // 如果计数值达到3，则重置为0
      countPipe.update(0);
      var value = await pageOpen<int>(InfoPage()); // 打开新页面
    }
  }
}

主页面 (HomePage)

接下来定义主页面HomePage，该页面继承自FPage并使用之前定义的逻辑类。

import 'package:ffm/ffm.dart';
import 'home-page-logic.dart';

class HomePage extends FPage<HomePageLogic> {
  HomePage({Key? key}) : super(key: key) {
    setLogic(HomePageLogic()); // 设置逻辑类
  }

  [@override](/user/override)
  Widget buildLayout(BuildContext context) {
    return Scaffold(
      key: logic.scaffoldKey, // 使用逻辑类中的scaffoldKey
      appBar: AppBar(
        title: Text('Home'), // 设置AppBar标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: <Widget>[
            const Text('You have pushed the button this many times:'), // 显示当前点击次数
            logic.countPipe.onUpdate((val) => Text(
              '$val', // 显示更新后的值
              style: Theme.of(context).textTheme.headline4,
            )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: logic.onClickAdd, // 设置按钮点击事件
        tooltip: 'Increment', // 设置按钮提示
        child: const Icon(Icons.add), // 设置按钮图标
      ),
    );
  }
}

主应用 (FApp)

最后定义主应用类FApp，该类用于启动整个应用程序。

import 'package:example/home-page/home_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const FApp());
}

class FApp extends StatefulWidget {
  const FApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<StatefulWidget> createState() => _FAppState();
}

class _FAppState extends State<FApp> {
  HomePage? _homePage;
  HomePage get homePage {
    _homePage ??= HomePage();
    return _homePage!;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FFM Example', // 应用名称
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主题颜色
      ),
      home: homePage.getWidget(), // 启动主页
    );
  }
}