zw_basic #

快速集成 #

在 Flutter 项目的 pubspec.yaml 中导入插件依赖：

dependencies:
  zw_basic: ^1.0.4

介绍 #

zw_basic 是一个基于 GetX 的 Flutter 框架，提供：

• 路由管理
• 状态控制
• 网络请求（带缓存）
• 不同状态 UI 显示
• 接口失败重试
• 自动下拉刷新 / 上拉加载基类

如果你还不熟悉 GetX，花十分钟即可上手，快速开始项目开发。具体示例请参考 demo。

教程 #

开始前的配置 #

1. 将示例项目中的 man.dart 替换为你的工程 man.dart（或按 demo 自行修改）。
2. 将 api 文件夹和 routes 文件夹拖入你的工程。
3. 在 pubspec.yaml 中添加依赖 zw_basic: ^1.0.4 即可开始开发。

使用示例 #

1. 创建界面 #

创建一个继承 BaseStatefulWidget 的 Page 和一个继承 BaseController 的 Controller。

• Controller（如需下拉刷新/上拉加载，继承 BaseRefreshController即可）

class Page3Controller extends BaseController {
  @override
  void onUiReady() {
    //当前UI 绘制完最后一帧执行的方法
    super.onUiReady();
    appBarTitle.value = "页面3";
  }

  @override
  void retryOperation() {
    //网络请求失败 重试按钮的点击事件
  }
}

• Page 继承BaseStatefulWidget 重新createController和createContentWidget
  createController为你绑定的controller createContentWidget为你要build的页面

  class Page3 extends BaseStatefulWidget<Page3, Page3Controller> {
  const Page3({super.key});

  @override
  State<Page3> createState() => _Page3State();

  @override
  Page3Controller createController() {
    return Get.find<Page3Controller>();
  }
}

class _Page3State extends BaseStatefulWidgetState<Page3, Page3Controller> {
  @override
  Widget createContentWidget() {
    return Center(child: Obx(() => Text(controller.data.value)));
  }
}

至此，一个页面和对应 Controller 已创建完成。
BaseStatefulWidget传入参数如下

extends StatefulWidget {
  final bool isCanBackPressed;
  final double appbarHeight;
  final Color bodyColor;
  final bool isNeedAppBar;
  final bool isNeedScaffold;
  final bool extendBodyBehindAppBar;
  final bool resizeToAvoidBottomInset;
  final List<Widget>? appBarActions;

  const BaseStatefulWidget({
    super.key,
    this.isCanBackPressed = true,
    this.appbarHeight = 44.0,
    this.isNeedAppBar = true,
    this.isNeedScaffold = true,
    this.bodyColor = AppColors.bgColor,
    this.extendBodyBehindAppBar = false,
    this.resizeToAvoidBottomInset = false,
    this.appBarActions,
  });

2. 注入路由 #

路由在 routes 文件夹下：

1. 在 AppControllerBinding 绑定 你创建的 Controller

class AppControllerBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => Page3Controller(), fenix: true);
    Get.lazyPut(() => RefreshPageController(), fenix: true);
    //需要bind的controller...

  }
}

2.在 AppRoutes下的AppRoutes 定义路由名字

class AppRoutes {
  static const initial = '/';
  static const page3 = '/pages/page3';
  static const refreshPage = '/pages/refreshPage';
  //定义的路由名称...

}

3. 在 AppPages下的 AppPages 注入 Page

class AppPages {
  static final List<GetPage> routes = [
    GetPage(name: AppRoutes.page3, page: () => const Page3()),
    GetPage(name: AppRoutes.refreshPage, page: () => const RefreshPage()),
    //需要注入的page...
  ];
}

跳转界面：

Get.toNamed(AppRoutes.page3);

返回上一页：

Get.back();

3. 状态控制 #

Controller 中定义一个 RxString 类型的字符串，Page 中使用 Obx 监听：

Obx(() => Text(controller.rxString.value))

当变量改变时，UI 会自动刷新，其他类型同理。

class Page3Controller extends BaseController {
  RxString data = "".obs;
  @override
  void onUiReady() {
    super.onUiReady();
    appBarTitle.value = "页面3";
    data.value = "修改了值";
  }
}

class _Page3State extends BaseStatefulWidgetState<Page3, Page3Controller> {
  @override
  Widget createContentWidget() {
    return Center(child: Obx(() => Text(controller.data.value)));
  }
}

4. 网络请求 #

参照 api 文件夹里的类 需继承BaseApi ，apiUrl配置域名 HttpSetting配置网络请求设置(token 网络请求缓存 后台返回的数据key字段等 具体参照demo)。

// UserApi为例
class UserApi extends BaseApi {
  /*
   BaseResp<dynamic> 中的data 是dynamic类型 可替换为你自己的model类
  */
  Future<BaseResp<dynamic>> login({
    required String username,
    required String password,
  }) {
    return requestWithFuture<dynamic>(
      path: ApiUrl.user_login,
      reqType: ReqType.post,
      body: {"username": username, "password": password},
      onFromJson: (Map<String, dynamic> json) => json["data"],
    );
  }

  //返回的数据data是list类型 dynamic可替换为你自己的model类
  Future<BaseResp<List<dynamic>>> getTestListApi({
    required int page,
    required int pageSize,
  }) {
    return requestWithFuture<List<dynamic>>(
      path: ApiUrl.login_getTestList,
      reqType: ReqType.post,
      body: {"page": page, "pageSize": pageSize},
      onFromJson: (Map<String, dynamic> json) => json["data"],
    );
  }

  ///用户相关的其他接口写下面...
}

class Page2Controller extends BaseController {
  late UserApi _userApi;

  @override
  void onUiReady() {
    super.onUiReady();
    appBarTitle.value = "页面";
    _userApi = createApi(UserApi());//创建api
  }

  @override
  void retryOperation() {
    login();
  }

  void login() {
    ///调用controller的request 传入创建的api
    request(
      future: _userApi.login(username: "123", password: "123"),
      onSuccess: (resp) {
        // 接口请求成功
      },
    );
  }
}

5. 页面传值 #

跳转时携带 arguments 参数，接收时在下个页面的 Controller 的 onUiReady 或 init 方法中获取：

// 传值 跳转时携带arguments
Get.toNamed(AppRoutes.page2, arguments: {'key': 'value'});

// 接收 在controller的onUiReady里接收即可
@override
  void onUiReady() {
    super.onUiReady();
    appBarTitle.value = "页面";
    var arg = Get.arguments['key'];
  
  }

内置依赖 #

  plugin_platform_interface: ^2.0.2
  get: ^4.7.2
  dio: ^5.9.0
  logger: ^2.6.0
  easy_refresh: ^3.4.0
  lottie: ^3.3.2
  sqflite: ^2.4.2
  url_launcher: ^6.3.2
  flutter_screenutil: ^5.9.3
  fluttertoast: ^9.0.0
  crypto: ^3.0.7

总结 #

通过以上步骤，你可以快速完成：

• 创建界面
• 路由绑定
• 状态控制
• 网络请求

该框架可直接用于项目开发。具体可参照demo

如果这个框架对你有帮助，请给个赞 👍🏻

Pub.dev 链接