Flutter UI设计增强插件flutter_fx的使用

本包是一套用于Flutter的应用程序的状态管理和导航管理策略的组件和工具。它包括状态管理、导航管理和一系列工具组件。

特性

• Fx State: 用于在UI中执行和监听变化。
• Fx Navigation: 用于简化导航过程。
• Fx Suite: 用于加速开发，使用工具和组件。

开始使用

💥 FxState

此功能是为了简化应用中的状态更新而设计的。它允许你通过一个类来定义所有的逻辑，并在页面中设置所有可变变量和状态，然后从不同的小部件中监听这些状态的变化。

使用方法

首先，我们定义一个类来分配所有我们的状态或可变变量。我们使用Fx<T>类型来定义一个可变变量，然后用toFx扩展初始化该变量。

import 'package:flutter_fx/flutter_fx.dart';

class HomeController {
  static final Fx<int> currentTab = 0.toFx;
}

现在我们需要做的就是在我们想要根据变量/状态变化来更新的部分使用FxBuilder，并使用FxBuilder的fxContext来监听。

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

class HomeScreen extends StatelessWidget {
  static const String path = "/homeScreen";
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return FxScreen(
      screenBuilder: (context, paddings) => Center(
        child: FxBuilder(
          builder: (fxContext) {
            switch (HomeController.currentTab.listen(fxContext)) {
              case 1:
                return const CreatePatientTab();
              case 0:
              default:
                return const PatientsList();
            }
          },
        ),
      ),
      bottomNavigationBar: FxBuilder(builder: (fxContext) {
        return BottomNavigationBar(
            backgroundColor: AppColors.secondaryBackground,
            currentIndex: HomeController.currentTab.listen(fxContext),
            onTap: (value) => HomeController.changeTabIndex(value),
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.people),
                label: "Patients",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: "Create patient",
              ),
            ]);
      }),
    );
  }
}

为了更新变量/状态，我们只需要调用value setter，FxState会通知正在监听此变量的小部件并更新其状态。

import 'package:flutter_fx/flutter_fx.dart';

class HomeController {
  static final Fx<int> currentTab = 0.toFx;

  void changeTabIndex(int newIndex){
    currentTab.value = newIndex;
  }
}

其他类型

// 使用 Fx<T> 定义和 toFx 扩展
Fx<int> myInt = 0.toFx;
// 使用 Fx<T> 定义和 toFx 扩展
Fx<String> myString = "Hello".toFx;
// 使用 Fx<T> 定义和 toFx 扩展
Fx<Map<String, int>> myString = {}.toFx;
// 使用 Fx<T> 定义和 toFx 扩展
Fx<List<String>> myString = [].toFx;
// 使用 FxString 类型定义和 toFx 扩展
FxString myFxString = "Hello".toFx;
// 使用 FxInt 类型定义和 toFx 扩展
FxInt myFxInt = 0.toFx;
// 使用 FxBool 类型定义和 Fx 构造函数
FxBool myBool = Fx(false);
// 使用 Fx<T> 类型定义和 FxNullable 类支持可空类型
Fx<bool?> myNullableBool = FxNullable.setNull();

💥 FxNavigation

此功能允许你在不使用上下文的情况下进行导航，并且可以使用自定义过渡效果。

使用方法

要使用FxNavigation，你需要使用FxApp，它使用MaterialApp，因此你可以设置一些Material的属性。

FxApp需要两个参数，一个是initialRoute，即应用开始时将被压入堆栈的第一个路由；另一个是routeBuilder，你可以在其中定义特定路径下应该构建哪个小部件。

FxApp(
    initialRoute: "/",
    routeBuilder: (String path){
        switch (path) {
            case HomeScreen.path:
                return const HomeScreen();
            case "/":
            case SplashScreen.path:
            default:
                return const SplashScreen();
        }
    },
)

稍后，你可以使用FxRouter在你的应用程序内导航，并发送参数来自定义页面的过渡效果。

FxRouter.goToAndReplace(HomeScreen.path,
    arguments: NavigationArguments(
        payload: "Coming from SplashScreen",
        curve: Curves.easeInOut,
        barrierColor: Colors.transparent,
        routeTransition: RouteTransition.animated,
        transitionDirection: TransitionDirection.rightToLeft,
      ));

💥 FxSuite

此功能是为了在新项目中拥有几乎每个应用程序都有的基本特性。看看可用的一些组件，我相信你会觉得它们很有用。

FxScreen

这个组件专注于简化UI屏幕的构建方式。它允许你轻松地自定义背景、覆盖层、屏幕填充等。

使用方法

导入库：

import 'package:flutter_fx/flutter_fx.dart';

在页面中返回FxScreen：

import 'package:flutter/services.dart';
import 'package:flutter_fx/flutter_fx.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return FxScreen(
      /// 必填项
      screenBuilder: (context, paddings) =>
      /// 默认情况下，encapsulateScreen 属性为 true，因此屏幕会被封装到 paddings 中，以使内容远离导航栏和状态栏。
      /// 但是如果你需要实现某些功能并自定义屏幕填充的使用方式，可以使用 screenBuilder 函数中的 paddings 参数。

      /// 现在你可以在 screen builder 中放置小部件而不必担心其他事情
      const MyScreenContent(),
      /// 使用 uiOverlayStyle 属性可以自定义状态栏和导航栏的外观。
      /// uiOverlayStyle: SystemUiOverlayStyle(
      ///  statusBarColor: Colors.transparent,
      ///  statusBarIconBrightness: Brightness.light,
      ///  statusBarBrightness: Brightness.light,
      ///  systemNavigationBarColor: Colors.transparent,
      ///  systemNavigationBarIconBrightness: Brightness.light,
      /// ),
      uiOverlayStyle: SystemUiOverlayStyle.dark,
      /// 使用 screenBackgroundBuilder 可以添加屏幕背景。
      screenBackgroundBuilder: (context, paddings) =>
      /// 和 screenBuilder 一样，你可以使用 paddings 参数来自定义屏幕填充的使用方式
      Image.asset(
        "custom_background.png",
      ),
      /// 使用 screenOverlayBuilder 可以添加屏幕覆盖层。
      /// 我用它来显示操作期间的加载指示器
      screenOverlayBuilder: (context) => const CircularProgressIndicator(),
    );
  }
}

FxComponents

• FxButton 是一个带有默认样式的FilledButton，用 paddings 包裹以简化组件之间的分离。它允许完全定制。

  FxButton(          
      content: "Press me",
      /// 必填项
      onPressedF: (){}
  )
  

• FxTextField 是一个带有默认样式的TextField，用 paddings 包裹以方便表单字段的分离。它允许完全定制。

  FxTextField(
      label: "Text field"
      /// 必填项
      inputController: textController
  )
  

• FxTextButton 是一个带有默认样式的TextButton，使用 shrinkWrap 作为 tapTargetSize。

  FxTextButton(
      /// 必填项
      textContent: "Content", 
      /// 必填项
      onPressedF: (){}
  ),
  

FxExtensions

• FxScaleSize 允许根据设计创建的视口大小缩放大小。

  要设置适用于你的视口大小，需要在你的 runApp 方法之前设置以下内容：

  FxScaleSize.viewportWidth = 500 // 你的视口宽度
  FxScaleSize.viewportHeight = 1200 // 你的视口高度
  

FxValidators

此功能只是我曾经使用过的验证器的副本。很快我会改进它们并添加更多常用的验证器。

• validateEmail
• validateUsernameText
• validateText
• compareText
• validatePhoneNumber
• validateDouble
• validatePositiveDouble
• validatePositiveInt
• validateNCFSequence
• validateMinorThan
• validateGreaterThan

使用方法

导入库：

import 'package:flutter_fx/flutter_fx.dart';

使用验证器：

final String? error = FxValidators.validateEmail("hola@as.co");