Flutter插件getxer的介绍与使用方法

Flutter插件getxer介绍

Getxer 插件是 GetView 类的超集，由 Getx 包提供。它旨在简化使用 GetX 状态管理解决方案创建 Flutter 应用程序屏幕的过程。通过此插件，您可以轻松构建具有各种功能的屏幕，如应用栏、安全区域处理、浮动操作按钮、底部导航栏等。

Flutter插件getxer关键特性

简化屏幕创建：使用 BaseScreen 类。
提高生产力。
增强代码可读性。
易于定制，以提高可维护性。

Flutter插件getxer安装

要将 Easy Isolate Mixin 包添加到您的 Flutter 项目中，请按照以下步骤操作：

依赖项：在您的 pubspec.yaml 文件中添加以下依赖项：
```
dependencies:
  get: ^4.6.5
  getxer: ^1.0.0
```
安装：在终端或命令提示符中运行以下命令：
```
$ flutter pub get
```
导入：在 Dart 代码中添加以下导入语句：
```
import 'package:getxer/getxer.dart';
```

使用

导入包：
```
import 'package:getxer/getxer.dart';
```

准备 GetxController：

class CustomController with GetxController {
  final String userName = 'James';
}

扩展您的屏幕并提供 GetxController 作为类型：

class CustomScreen extends BaseScreen<CustomController> {
  const CustomScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Text(vm.userName), // 只调用 `vm.something`
    );
  }
}

您可以通过 vm 来访问控制器的属性和方法。

通过覆盖 BaseScreen 类提供的可选方法和属性来自定义屏幕：

class CustomScreen extends BaseScreen<CustomController> {
  const CustomScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  PreferredSizeWidget? buildAppBar(BuildContext context) {
    // 自定义应用栏实现
    return AppBar(
      title: const Text('Custom Screen'),
    );
  }

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    // 自定义屏幕布局
    return Container(
      padding: EdgeInsets.all(20),
      child: Text('Hello, GetX!'),
    );
  }

  [@override](/user/override)
  bool get setBottomSafeArea => false;

  [@override](/user/override)
  Color? get screenBackgroundColor => Colors.white;

  [@override](/user/override)
  Widget? get buildFloatingActionButton =>
      FloatingActionButton(
        onPressed: () {
          // 处理浮动操作按钮点击
        },
        child: const Icon(Icons.add),
      );

  // 需要时覆盖其他可选方法和属性
}

应用栏

您可以通过覆盖 buildAppBar 方法来添加应用栏。

class CounterScreen extends BaseScreen<CounterViewModel> {
  const CounterScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  PreferredSizeWidget? buildAppBar(BuildContext context) {
    return AppBar(
      title: const Text('Counter App'),
    );
  }

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return const Placeholder();
  }
}

参数	默认值	描述
buildAppBar	null	自定义应用栏小部件

安全区域

要控制屏幕的安全区域行为，可以覆盖以下属性。

class CounterScreen extends BaseScreen<CounterViewModel> {
  const CounterScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  bool get setBottomSafeArea => false;

  [@override](/user/override)
  PreferredSizeWidget? buildAppBar(BuildContext context) {
    return AppBar(
      title: const Text('Counter App'),
    );
  }

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return const Placeholder();
  }
}

参数	类型	默认值	描述
wrapWithSafeArea	bool	true	包裹屏幕内容与 SafeArea
setTopSafeArea	bool	true	考虑顶部安全区域
setBottomSafeArea	bool	true	考虑底部安全区域

颜色

您可以自定义屏幕的背景颜色和不安全区域的颜色。

class CounterScreen extends BaseScreen<CounterViewModel> {
  const CounterScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  bool get setBottomSafeArea => false;

  [@override](/user/override)
  Color? get screenBackgroundColor => Colors.green;

  [@override](/user/override)
  Color? get unSafeAreaColor => Colors.amber;

  [@override](/user/override)
  PreferredSizeWidget? buildAppBar(BuildContext context) {
    return AppBar(
      title: const Text('Counter App'),
    );
  }

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return const Placeholder();
  }
}

要设置整个应用程序的默认颜色，可以在 MaterialApp 中自定义主题：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // 自定义
        scaffoldBackgroundColor: Colors.white,
        unselectedWidgetColor: Colors.blue,
      ),
      title: 'Getx Screen',
      initialBinding: CounterBinding(),
      home: const CounterScreen(),
    );
  }
}

参数	类型	默认值	描述
screenBackgroundColor	Color?	Theme.of(context).scaffoldBackgroundColor	设置屏幕的背景颜色
unSafeAreaColor	Color?	Theme.of(context).unselectedWidgetColor	设置不安全区域的颜色

浮动操作按钮

在屏幕上创建浮动操作按钮小部件。

class CounterScreen extends BaseScreen<CounterViewModel> {
  const CounterScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  bool get setBottomSafeArea => false;

  [@override](/user/override)
  Color? get screenBackgroundColor => Colors.green;

  [@override](/user/override)
  Color? get unSafeAreaColor => Colors.amber;

  [@override](/user/override)
  Widget? get buildFloatingActionButton =>
      FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      );

  [@override](/user/override)
  FloatingActionButtonLocation? get floatingActionButtonLocation =>
      FloatingActionButtonLocation.startFloat;

  [@override](/user/override)
  PreferredSizeWidget? buildAppBar(BuildContext context) {
    return AppBar(
      title: const Text('Counter App'),
    );
  }

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return const Placeholder();
  }
}

参数	类型	默认值	描述
buildFloatingActionButton	Widget?	null	自定义浮动操作按钮小部件
floatingActionButtonLocation	Widget?	null	设置浮动操作按钮的位置

连接视图模型资源到视图（BaseScreen）

您可以通过 vm 作为引用来访问控制器的属性和方法。在这种情况下，vm 代表“视图模型”，通常用于指代关联的视图模型 GetxController。

class CounterViewModel extends GetxController {
  RxInt count = 0.obs;

  void increaseCount() {
    count(count.value + 1);
  }
}

class CounterScreen extends BaseScreen<CounterViewModel> {
  const CounterScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return Center(
      child: Obx(
            () =>
            Text(
              '${vm.count.value}',
              style: Theme.of(context).textTheme.headlineLarge,
            ),
      ),
    );
  }

  [@override](/user/override)
  bool get setBottomSafeArea => false;

  [@override](/user/override)
  Color? get screenBackgroundColor => Colors.green;

  [@override](/user/override)
  Color? get unSafeAreaColor => Colors.amber;

  [@override](/user/override)
  Widget? get buildFloatingActionButton =>
      FloatingActionButton(
        onPressed: vm.increaseCount,
        child: const Icon(Icons.add),
      );

  [@override](/user/override)
  FloatingActionButtonLocation? get floatingActionButtonLocation =>
      FloatingActionButtonLocation.startFloat;

  [@override](/user/override)
  PreferredSizeWidget? buildAppBar(BuildContext context) {
    return AppBar(
      title: const Text('Counter App'),
    );
  }
}

嵌套视图（BaseView）

如果您想构建一个简单的部件而不创建基于 Scaffold 的完整应用程序屏幕，并且希望分离控制器和屏幕布局，您可以使用 BaseView。

class CounterScreen extends BaseScreen<CounterViewModel> {
  const CounterScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return const Center(
      child: CounterIndicator(),
    );
  }

  // 跳过之前的代码...
}

// 分离的类，继承自 BaseView。
class CounterIndicator extends BaseView<CounterViewModel> {
  const CounterIndicator({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget buildView(BuildContext context) {
    return Obx(
          () =>
          Text(
            '${vm.count.value}',
            style: Theme.of(context).textTheme.headlineLarge,
          ),
    );
  }
}

底部导航栏

自定义屏幕中的底部导航栏小部件。

class CounterScreen extends BaseScreen<CounterViewModel> {
  const CounterScreen({Key? key}) : super(key: key);

  // 跳过之前的代码...

  [@override](/user/override)
  Widget? buildBottomNavigationBar(BuildContext context) {
    return BottomNavigationBar(items: const [
      BottomNavigationBarItem(
        label: 'home',
        icon: Icon(Icons.home),
      ),
      BottomNavigationBarItem(
        label: 'user',
        icon: Icon(Icons.account_circle),
      )
    ]);
  }

  [@override](/user/override)
  Widget buildScreen(BuildContext context) {
    return Center(
      child: Obx(
            () =>
            Text(
              '${vm.count.value}',
              style: Theme.of(context).textTheme.headlineLarge,
            ),
      ),
    );
  }
}

更多关于Flutter插件getxer的介绍与使用方法的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html