[feat]键盘视频教程页，增加iOS平台页

lib/di/get_it.config.dart

@@ -75,6 +75,12 @@ import '../module/keyboard_tutorial/android/keyboard_tutorial_android_view_contr
 import '../module/keyboard_tutorial/ios/keyboard_tutorial_ios_view_controller.dart'
     as _i842;
 import '../module/keyboard_tutorial/keyboard_tutorial_controller.dart' as _i507;
+import '../module/keyboard_tutorial/video/android/keyboard_tutorial_video_android_view_controller.dart'
+    as _i925;
+import '../module/keyboard_tutorial/video/ios/keyboard_tutorial_video_android_ios_controller.dart'
+    as _i421;
+import '../module/keyboard_tutorial/video/keyboard_tutorial_video_controller.dart'
+    as _i101;
 import '../module/login/login_controller.dart' as _i1008;
 import '../module/main/main_controller.dart' as _i731;
 import '../module/mine/mine_controller.dart' as _i732;
@@ -135,6 +141,9 @@ extension GetItInjectableX on _i174.GetIt {
     gh.factory<_i507.KeyboardTutorialController>(
       () => _i507.KeyboardTutorialController(),
     );
+    gh.factory<_i101.KeyboardTutorialVideoController>(
+      () => _i101.KeyboardTutorialVideoController(),
+    );
     gh.factory<_i973.SplashController>(() => _i973.SplashController());
     gh.factory<_i333.DiscountController>(() => _i333.DiscountController());
     gh.factory<_i1060.ZodiacLoveIntimacyController>(
@@ -149,6 +158,12 @@ extension GetItInjectableX on _i174.GetIt {
     gh.factory<_i842.KeyboardTutorialIosViewController>(
       () => _i842.KeyboardTutorialIosViewController(),
     );
+    gh.factory<_i925.KeyboardTutorialVideoAndroidViewController>(
+      () => _i925.KeyboardTutorialVideoAndroidViewController(),
+    );
+    gh.factory<_i421.KeyboardTutorialVideoIosViewController>(
+      () => _i421.KeyboardTutorialVideoIosViewController(),
+    );
     gh.lazySingleton<_i495.WechatLoginService>(
       () => _i495.WechatLoginService(),
     );

lib/module/keyboard_guide/keyboard_guide_page.dart

@@ -1,11 +1,10 @@
-import 'dart:io';
-
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 import 'package:keyboard/module/keyboard_guide/keyboard_guide_controller.dart';
 import 'package:keyboard/router/app_pages.dart';
 import 'package:keyboard/utils/toast_util.dart';
+import 'package:keyboard/widget/platform_util.dart';
 import 'package:lottie/lottie.dart';
 
 import '../../base/base_page.dart';
@@ -150,14 +149,14 @@ class KeyboardGuidePage extends BasePage<KeyboardGuidePageController> {
   /// 引导动画
   Widget _buildGuideAnimation() {
     Widget animationWidget;
-    if (Platform.isAndroid) {
+    if (PlatformUtil.isIOS) {
       animationWidget = Lottie.asset(
-        Assets.anim.animKeyboardFloatingWindowChooseKeyboardAndroid,
+        Assets.anim.animKeyboardFloatingWindowChooseKeyboardIos,
         repeat: true,
       );
-    } else if (Platform.isIOS) {
+    } else if (PlatformUtil.isAndroid) {
       animationWidget = Lottie.asset(
-        Assets.anim.animKeyboardFloatingWindowChooseKeyboardIos,
+        Assets.anim.animKeyboardFloatingWindowChooseKeyboardAndroid,
         repeat: true,
       );
     } else {

lib/module/keyboard_tutorial/android/keyboard_tutorial_android_view.dart

@@ -22,7 +22,7 @@ class KeyboardTutorialAndroidView
 
   @override
   Color backgroundColor() {
-    return Colors.transparent;
+    return Color(0xFFF6F5FA);
   }
 
   @override
@@ -83,22 +83,16 @@ class KeyboardTutorialAndroidView
         ),
       ),
       // 视频教程按钮
-      rightWidget: Positioned(
-        right: 16.w,
-        child: Visibility(
-          visible: true,
-          child: GestureDetector(
-            onTap: () {
-              controller.clickTutorialVideo();
-            },
-            child: Text(
-              StringName.keyboardTutorialVideo,
-              style: TextStyle(
-                color: ColorName.black85,
-                fontSize: 14.sp,
-                fontWeight: FontWeight.w500,
-              ),
-            ),
+      rightWidget: GestureDetector(
+        onTap: () {
+          controller.clickTutorialVideo();
+        },
+        child: Text(
+          StringName.keyboardTutorialVideo,
+          style: TextStyle(
+            color: ColorName.black85,
+            fontSize: 14.sp,
+            fontWeight: FontWeight.w500,
           ),
         ),
       ),
@@ -118,7 +112,7 @@ class KeyboardTutorialAndroidView
   /// 键盘设置引导动画
   Widget _buildTutorialAnimation() {
     return Lottie.asset(
-      Assets.anim.animKeyboardTutorialSetting,
+      Assets.anim.animKeyboardTutorialSettingAndroid,
       repeat: true,
       width: 340.w,
     );

lib/module/keyboard_tutorial/ios/keyboard_tutorial_ios_view.dart

@@ -3,7 +3,6 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 import 'package:get/get_core/src/get_main.dart';
-import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
 import 'package:keyboard/base/base_view.dart';
 import '../../../resource/assets.gen.dart';
 import '../../../resource/colors.gen.dart';
@@ -22,7 +21,7 @@ class KeyboardTutorialIosView
 
   @override
   Color backgroundColor() {
-    return Colors.transparent;
+    return Color(0xFFF6F5FA);
   }
 
   @override
@@ -74,22 +73,16 @@ class KeyboardTutorialIosView
         ),
       ),
       // 视频教程按钮
-      rightWidget: Positioned(
-        right: 16.w,
-        child: Visibility(
-          visible: true,
-          child: GestureDetector(
-            onTap: () {
-              controller.clickTutorialVideo();
-            },
-            child: Text(
-              StringName.keyboardTutorialVideo,
-              style: TextStyle(
-                color: ColorName.black85,
-                fontSize: 14.sp,
-                fontWeight: FontWeight.w500,
-              ),
-            ),
+      rightWidget: GestureDetector(
+        onTap: () {
+          controller.clickTutorialVideo();
+        },
+        child: Text(
+          StringName.keyboardTutorialVideo,
+          style: TextStyle(
+            color: ColorName.black85,
+            fontSize: 14.sp,
+            fontWeight: FontWeight.w500,
           ),
         ),
       ),

lib/module/keyboard_tutorial/keyboard_tutorial_page.dart

@@ -1,8 +1,8 @@
-import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:keyboard/base/base_page.dart';
 import 'package:keyboard/router/app_pages.dart';
+import '../../widget/platform_util.dart';
 import 'android/keyboard_tutorial_android_view.dart';
 import 'ios/keyboard_tutorial_ios_view.dart';
 import 'keyboard_tutorial_controller.dart';
@@ -28,7 +28,7 @@ class KeyboardTutorialPage extends BasePage<KeyboardTutorialController> {
 
   @override
   backgroundColor() {
-    return Color(0xFFF6F5FA);
+    return Colors.transparent;
   }
 
   @override
@@ -39,7 +39,7 @@ class KeyboardTutorialPage extends BasePage<KeyboardTutorialController> {
   /// 内容
   Widget _buildContent() {
     Widget content;
-    if (Platform.isIOS) {
+    if (PlatformUtil.isIOS) {
       content = const KeyboardTutorialIosView();
     } else {
       content = const KeyboardTutorialAndroidView();

lib/module/keyboard_tutorial/video/android/keyboard_tutorial_video_android_view.dart

@@ -0,0 +1,182 @@
+import 'package:flutter/Material.dart';
+import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
+import 'package:keyboard/base/base_view.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:keyboard/resource/assets.gen.dart';
+import 'package:keyboard/resource/colors.gen.dart';
+import 'package:keyboard/widget/status_bar_placeholder_widget.dart';
+import 'package:keyboard/widget/top_bar.dart';
+import 'package:video_player/video_player.dart';
+import '../../../../utils/status_bar_util.dart';
+import 'keyboard_tutorial_video_android_view_controller.dart';
+
+/// 键盘教程页-视频引导页-Android平台
+class KeyboardTutorialVideoAndroidView
+    extends BaseView<KeyboardTutorialVideoAndroidViewController> {
+  const KeyboardTutorialVideoAndroidView({super.key});
+
+  @override
+  backgroundColor() {
+    return Color(0xFFF2EFFF);
+  }
+
+  @override
+  Widget buildBody(BuildContext context) {
+    return Scaffold(
+      backgroundColor: backgroundColor(),
+      body: Stack(
+        children: [
+          // 内容，填充剩余部分
+          Positioned.fill(
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            child: SingleChildScrollView(child: _buildContent(context)),
+          ),
+          // 状态栏和标题栏
+          Positioned(
+            left: 0,
+            top: 0,
+            right: 0,
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [StatusBarPlaceholderWidget(), _buildTopBar()],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// 顶部栏
+  Widget _buildTopBar() {
+    return TopBar(
+      leftWidget: GestureDetector(
+        onTap: controller.clickBack,
+        child: Assets.images.iconBlackBackArrow.image(
+          width: 24.w,
+          height: 24.h,
+        ),
+      ),
+    );
+  }
+
+  /// 头部布局
+  Widget _buildHeader(BuildContext context) {
+    return SizedBox(
+      width: double.infinity,
+      height: 230.h,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          // 蒙版
+          Assets.images.bgKeyboardVideoTutorialHeaderMask.image(
+            width: double.infinity,
+            height: double.infinity,
+          ),
+          // 提示语
+          Positioned(
+            top: 20.h + StatusBarUtil.getStatusBarHeight(context),
+            child: Assets.images.iconKeyboardTutorialVideoHeaderSlogan.image(
+              width: 352.w,
+              height: 178.h,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// 内容
+  Widget _buildContent(BuildContext context) {
+    return Container(
+      // 渐变背景
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0x00FFFFFF), Color(0xFFF2EFFF)],
+          begin: Alignment.topCenter,
+          end: Alignment.bottomRight,
+        ),
+        shape: BoxShape.rectangle,
+      ),
+      child: Column(
+        children: [
+          // 头部
+          _buildHeader(context),
+          _buildTutorialVideo(),
+        ],
+      ),
+    );
+  }
+
+  /// 教程视频
+  Widget _buildTutorialVideo() {
+    return Container(
+      margin: EdgeInsets.only(left: 16, right: 16, bottom: 23),
+      padding: EdgeInsets.all(12.w),
+      decoration: BoxDecoration(
+        color: ColorName.white,
+        borderRadius: BorderRadius.all(Radius.circular(24.w)),
+      ),
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Obx(() {
+            if (!controller.isVideoInitialized.value) {
+              return SizedBox(width: double.infinity, height: 542.h);
+            } else {
+              return AspectRatio(
+                aspectRatio: controller.videoController.value.aspectRatio,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12.w),
+                  child: VideoPlayer(controller.videoController),
+                ),
+              );
+            }
+          }),
+          // 操作按钮
+          _buildActionBtn(),
+        ],
+      ),
+    );
+  }
+
+  /// 操作按钮
+  Widget _buildActionBtn() {
+    return Obx(() {
+      return Stack(
+        children: [
+          Visibility(
+            visible: !controller.isVideoPlaying.value,
+            child: _buildPlayBtn(),
+          ),
+          Visibility(
+            visible: controller.isVideoPlaying.value,
+            child: _buildPauseBtn(),
+          ),
+        ],
+      );
+    });
+  }
+
+  /// 播放按钮
+  Widget _buildPlayBtn() {
+    return GestureDetector(
+      onTap: () {
+        controller.clickPlay();
+      },
+      child: Assets.images.iconPlay.image(width: 52.w, height: 52.w),
+    );
+  }
+
+  /// 暂停按钮
+  Widget _buildPauseBtn() {
+    return GestureDetector(
+      onTap: () {
+        controller.clickPause();
+      },
+      child: Assets.images.iconPause.image(width: 52.w, height: 52.w),
+    );
+  }
+}

lib/module/keyboard_tutorial/video/android/keyboard_tutorial_video_android_view_controller.dart

@@ -0,0 +1,69 @@
+import 'package:get/get.dart';
+import 'package:injectable/injectable.dart';
+import 'package:keyboard/base/base_controller.dart';
+import 'package:keyboard/resource/assets.gen.dart';
+import 'package:video_player/video_player.dart';
+
+/// 键盘教程页-视频引导页-Android平台-Controller
+@injectable
+class KeyboardTutorialVideoAndroidViewController extends BaseController {
+  /// 视频是否初始化
+  final Rx<bool> isVideoInitialized = false.obs;
+
+  /// 视频是否正在播放
+  final Rx<bool> isVideoPlaying = false.obs;
+
+  /// 视频控制器
+  late VideoPlayerController videoController;
+
+  @override
+  void onInit() {
+    super.onInit();
+    _initVideoController();
+  }
+
+  @override
+  void onClose() {
+    // 移除视频状态监听器
+    videoController.removeListener(_updatePlayingStatus);
+    // 释放资源
+    videoController.dispose();
+    super.onClose();
+  }
+
+  /// 初始化视频播放器
+  void _initVideoController() {
+    videoController = VideoPlayerController.asset(
+        Assets.videos.keyboardTutorialVideo,
+      )
+      ..initialize().then((_) {
+        isVideoInitialized.value = true;
+        // 视频初始化完成后，自动播放
+        videoController.play();
+      });
+    // 设置循环播放
+    videoController.setLooping(true);
+    // 添加播放状态监听器
+    videoController.addListener(_updatePlayingStatus);
+  }
+
+  /// 更新视频的播放状态
+  void _updatePlayingStatus() {
+    isVideoPlaying.value = videoController.value.isPlaying;
+  }
+
+  /// 返回
+  void clickBack() {
+    Get.back();
+  }
+
+  /// 播放
+  void clickPlay() {
+    videoController.play();
+  }
+
+  /// 暂停
+  void clickPause() {
+    videoController.pause();
+  }
+}

lib/module/keyboard_tutorial/video/ios/keyboard_tutorial_video_android_ios_controller.dart

@@ -0,0 +1,26 @@
+import 'package:get/get.dart';
+import 'package:injectable/injectable.dart';
+import '../../../../base/base_controller.dart';
+import '../../../../utils/atmob_log.dart';
+import '../../../../utils/url_launcher_util.dart';
+
+/// 键盘教程页-视频引导页-iOS平台-Controller
+@injectable
+class KeyboardTutorialVideoIosViewController extends BaseController {
+  final String _tag = "KeyboardTutorialVideoIosViewController";
+
+  /// 返回
+  void clickBack() {
+    Get.back();
+  }
+
+  /// 去开启键盘
+  void goEnableKeyboard() async {
+    bool result = await UrlLauncherUtil.openIosSystemKeyboardPage();
+    if (result) {
+      AtmobLog.d(_tag, "打开iOS系统键盘设置页 => 成功");
+    } else {
+      AtmobLog.d(_tag, "打开iOS系统键盘设置页 => 失败");
+    }
+  }
+}

lib/module/keyboard_tutorial/video/ios/keyboard_tutorial_video_ios_view.dart

@@ -0,0 +1,116 @@
+import 'package:flutter/Material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:get/get.dart';
+import 'package:lottie/lottie.dart';
+import '../../../../base/base_view.dart';
+import '../../../../resource/assets.gen.dart';
+import '../../../../resource/string.gen.dart';
+import '../../../../utils/status_bar_util.dart';
+import '../../../../widget/gradient_btn.dart';
+import '../../../../widget/status_bar_placeholder_widget.dart';
+import '../../../../widget/top_bar.dart';
+import '../../widget/tutorial_header_widget.dart';
+import 'keyboard_tutorial_video_android_ios_controller.dart';
+
+/// 键盘教程页-视频引导页-Android平台
+class KeyboardTutorialVideoIosView
+    extends BaseView<KeyboardTutorialVideoIosViewController> {
+  const KeyboardTutorialVideoIosView({super.key});
+
+  @override
+  Color backgroundColor() {
+    return Color(0xFFF6F5FA);
+  }
+
+  @override
+  Widget buildBody(BuildContext context) {
+    return Stack(
+      children: [
+        // 头部
+        Positioned(left: 0, top: 0, right: 0, child: _buildHeader(context)),
+        // 状态栏和标题栏
+        Positioned(
+          left: 0,
+          top: 0,
+          right: 0,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [StatusBarPlaceholderWidget(), _buildTopBar()],
+          ),
+        ),
+        // 内容，填充剩余部分
+        Positioned.fill(
+          top: 170.h + StatusBarUtil.getStatusBarHeight(Get.context!),
+          left: 0,
+          right: 0,
+          child: Column(children: [_buildContent()]),
+        ),
+        // 底部按钮
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: _buildBottomActionBtn(),
+        ),
+      ],
+    );
+  }
+
+  /// 顶部栏
+  Widget _buildTopBar() {
+    return TopBar(
+      // 返回按钮
+      leftWidget: GestureDetector(
+        onTap: controller.clickBack,
+        child: Assets.images.iconBlackBackArrow.image(
+          width: 24.w,
+          height: 24.h,
+        ),
+      ),
+    );
+  }
+
+  /// 头部布局
+  Widget _buildHeader(BuildContext context) {
+    return TutorialHeaderWidget();
+  }
+
+  /// 内容
+  Widget _buildContent() {
+    return Expanded(child: Column(children: [_buildTutorialAnimation()]));
+  }
+
+  /// 键盘设置引导动画
+  Widget _buildTutorialAnimation() {
+    return Lottie.asset(
+      Assets.anim.animKeyboardTutorialSettingIos,
+      repeat: true,
+      width: 340.w,
+    );
+  }
+
+  /// 去开启键盘按钮
+  Widget _buildEnableKeyboard() {
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 50.w),
+      child: GradientTextBtn(
+        StringName.tutorialEnableKeyboardIos,
+        onPressed: () {
+          controller.goEnableKeyboard();
+        },
+      ),
+    );
+  }
+
+  /// 底部操作按钮
+  Widget _buildBottomActionBtn() {
+    return Column(
+      children: [
+        // 去开启键盘按钮
+        _buildEnableKeyboard(),
+        // 距离底部一定距离
+        SizedBox(height: 52.h),
+      ],
+    );
+  }
+}

lib/module/keyboard_tutorial/video/keyboard_tutorial_video_controller.dart

@@ -4,64 +4,6 @@ import 'package:keyboard/base/base_controller.dart';
 import 'package:video_player/video_player.dart';
 
 /// 键盘使用教程-视频引导页Controller
+@injectable
 class KeyboardTutorialVideoController extends BaseController {
-  /// 视频是否初始化
-  final Rx<bool> isVideoInitialized = false.obs;
-
-  /// 视频是否正在播放
-  final Rx<bool> isVideoPlaying = false.obs;
-
-  /// 视频控制器
-  late VideoPlayerController videoController;
-
-  @override
-  void onInit() {
-    super.onInit();
-    _initVideoController();
-  }
-
-  @override
-  void onClose() {
-    // 移除视频状态监听器
-    videoController.removeListener(_updatePlayingStatus);
-    // 释放资源
-    videoController.dispose();
-    super.onClose();
-  }
-
-  /// 初始化视频播放器
-  void _initVideoController() {
-    videoController = VideoPlayerController.asset(
-        'assets/videos/keyboard_tutorial_video.mp4',
-      )
-      ..initialize().then((_) {
-        isVideoInitialized.value = true;
-        // 视频初始化完成后，自动播放
-        videoController.play();
-      });
-    // 设置循环播放
-    videoController.setLooping(true);
-    // 添加播放状态监听器
-    videoController.addListener(_updatePlayingStatus);
-  }
-
-  /// 更新视频的播放状态
-  void _updatePlayingStatus() {
-    isVideoPlaying.value = videoController.value.isPlaying;
-  }
-
-  /// 返回
-  void clickBack() {
-    Get.back();
-  }
-
-  /// 播放
-  void clickPlay() {
-    videoController.play();
-  }
-
-  /// 暂停
-  void clickPause() {
-    videoController.pause();
-  }
 }

lib/module/keyboard_tutorial/video/keyboard_tutorial_video_page.dart

@@ -1,23 +1,16 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 import 'package:keyboard/base/base_page.dart';
-import 'package:keyboard/resource/assets.gen.dart';
-import 'package:keyboard/resource/colors.gen.dart';
-import 'package:video_player/video_player.dart';
-
 import '../../../router/app_pages.dart';
-import '../../../utils/status_bar_util.dart';
+import '../../../widget/platform_util.dart';
+import 'android/keyboard_tutorial_video_android_view.dart';
+import 'ios/keyboard_tutorial_video_ios_view.dart';
 import 'keyboard_tutorial_video_controller.dart';
 
 /// 键盘使用教程-视频引导页
 class KeyboardTutorialVideoPage
     extends BasePage<KeyboardTutorialVideoController> {
-  KeyboardTutorialVideoPage({super.key});
-
-  final KeyboardTutorialVideoController _controller = Get.put(
-    KeyboardTutorialVideoController(),
-  );
+  const KeyboardTutorialVideoPage({super.key});
 
   static void start() {
     Get.toNamed(RoutePath.keyboardTutorialVideo);
@@ -31,192 +24,15 @@ class KeyboardTutorialVideoPage
 
   @override
   backgroundColor() {
-    return Color(0xFFF2EFFF);
+    return Colors.transparent;
   }
 
   @override
   Widget buildBody(BuildContext context) {
-    return Scaffold(
-      backgroundColor: backgroundColor(),
-      body: Stack(
-        children: [
-          // 内容，填充剩余部分
-          Positioned.fill(
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            child: SingleChildScrollView(child: _buildContent(context)),
-          ),
-          // 状态栏和标题栏
-          Positioned(
-            left: 0,
-            top: 0,
-            right: 0,
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [_buildStatusBar(), _buildTopBar()],
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-
-  /// 导航栏占位
-  Widget _buildStatusBar() {
-    // 导航栏高度
-    double statusBarHeight = StatusBarUtil.getStatusBarHeight(Get.context!);
-    return Container(height: statusBarHeight);
-  }
-
-  /// 顶部栏
-  Widget _buildTopBar() {
-    return Container(
-      // 宽度撑满父组件
-      width: double.infinity,
-      height: kToolbarHeight,
-      // 背景颜色
-      color: Colors.transparent,
-      // padding: EdgeInsets.symmetric(horizontal: 16.0),
-      child: ConstrainedBox(
-        // 设置宽度为无限大，撑满父组件，否则Stack获取不到高度，会报错
-        constraints: BoxConstraints(minWidth: double.infinity),
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            // 返回按钮
-            Positioned(
-              left: 16.w,
-              child: GestureDetector(
-                onTap: _controller.clickBack,
-                child: Assets.images.iconBlackBackArrow.image(
-                  width: 24.w,
-                  height: 24.h,
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
-  /// 头部布局
-  Widget _buildHeader(BuildContext context) {
-    return SizedBox(
-      width: double.infinity,
-      height: 230.h,
-      child: Stack(
-        alignment: Alignment.center,
-        children: [
-          // 蒙版
-          Assets.images.bgKeyboardVideoTutorialHeaderMask.image(
-            width: double.infinity,
-            height: double.infinity,
-          ),
-          // 提示语
-          Positioned(
-            top: 20.h + StatusBarUtil.getStatusBarHeight(context),
-            child: Assets.images.iconKeyboardTutorialVideoHeaderSlogan.image(
-              width: 352.w,
-              height: 178.h,
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-
-  /// 内容
-  Widget _buildContent(BuildContext context) {
-    return Container(
-      // 渐变背景
-      decoration: BoxDecoration(
-        gradient: LinearGradient(
-          colors: [Color(0x00FFFFFF), Color(0xFFF2EFFF)],
-          begin: Alignment.topCenter,
-          end: Alignment.bottomRight,
-        ),
-        shape: BoxShape.rectangle,
-      ),
-      child: Column(
-        children: [
-          // 头部
-          _buildHeader(context),
-          _buildTutorialVideo(),
-        ],
-      ),
-    );
-  }
-
-  /// 教程视频
-  Widget _buildTutorialVideo() {
-    return Container(
-      margin: EdgeInsets.only(left: 16, right: 16, bottom: 23),
-      padding: EdgeInsets.all(12.w),
-      decoration: BoxDecoration(
-        color: ColorName.white,
-        borderRadius: BorderRadius.all(Radius.circular(24.w)),
-      ),
-      child: Stack(
-        alignment: Alignment.center,
-        children: [
-          Obx(() {
-            if (!_controller.isVideoInitialized.value) {
-              return SizedBox(width: double.infinity, height: 542.h);
-            } else {
-              return AspectRatio(
-                aspectRatio: _controller.videoController.value.aspectRatio,
-                child: ClipRRect(
-                  borderRadius: BorderRadius.circular(12.w),
-                  child: VideoPlayer(_controller.videoController),
-                ),
-              );
-            }
-          }),
-          // 操作按钮
-          _buildActionBtn(),
-        ],
-      ),
-    );
-  }
-
-  /// 操作按钮
-  Widget _buildActionBtn() {
-    return Obx(() {
-      return Stack(
-        children: [
-          Visibility(
-            visible: !_controller.isVideoPlaying.value,
-            child: _buildPlayBtn(),
-          ),
-          Visibility(
-            visible: _controller.isVideoPlaying.value,
-            child: _buildPauseBtn(),
-          ),
-        ],
-      );
-    });
-  }
-
-  /// 播放按钮
-  Widget _buildPlayBtn() {
-    return GestureDetector(
-      onTap: () {
-        _controller.clickPlay();
-      },
-      child: Assets.images.iconPlay.image(width: 52.w, height: 52.w),
-    );
-  }
-
-  /// 暂停按钮
-  Widget _buildPauseBtn() {
-    return GestureDetector(
-      onTap: () {
-        _controller.clickPause();
-      },
-      child: Assets.images.iconPause.image(width: 52.w, height: 52.w),
-    );
+    if (PlatformUtil.isIOS) {
+      return KeyboardTutorialVideoIosView();
+    } else {
+      return KeyboardTutorialVideoAndroidView();
+    }
   }
 }

lib/resource/assets.gen.dart

@@ -38,9 +38,13 @@ class $AssetsAnimGen {
   String get animKeyboardGeneratingData =>
       'assets/anim/anim_keyboard_generating_data.json';
 
-  /// File path: assets/anim/anim_keyboard_tutorial_setting.json
-  String get animKeyboardTutorialSetting =>
-      'assets/anim/anim_keyboard_tutorial_setting.json';
+  /// File path: assets/anim/anim_keyboard_tutorial_setting_android.json
+  String get animKeyboardTutorialSettingAndroid =>
+      'assets/anim/anim_keyboard_tutorial_setting_android.json';
+
+  /// File path: assets/anim/anim_keyboard_tutorial_setting_ios.json
+  String get animKeyboardTutorialSettingIos =>
+      'assets/anim/anim_keyboard_tutorial_setting_ios.json';
 
   /// File path: assets/anim/anim_new_user_data.json
   String get animNewUserData => 'assets/anim/anim_new_user_data.json';
@@ -73,7 +77,8 @@ class $AssetsAnimGen {
     animKeyboardFloatingWindowChooseKeyboardAndroid,
     animKeyboardFloatingWindowChooseKeyboardIos,
     animKeyboardGeneratingData,
-    animKeyboardTutorialSetting,
+    animKeyboardTutorialSettingAndroid,
+    animKeyboardTutorialSettingIos,
     animNewUserData,
     animSurpriseDialogData,
     animTabCharacterSelectedData,

lib/router/app_pages.dart

@@ -67,6 +67,8 @@ import '../module/keyboard_tutorial/android/keyboard_tutorial_android_view_contr
 import '../module/keyboard_tutorial/ios/keyboard_tutorial_ios_view_controller.dart';
 import '../module/keyboard_tutorial/keyboard_tutorial_controller.dart';
 import '../module/keyboard_tutorial/keyboard_tutorial_page.dart';
+import '../module/keyboard_tutorial/video/android/keyboard_tutorial_video_android_view_controller.dart';
+import '../module/keyboard_tutorial/video/ios/keyboard_tutorial_video_android_ios_controller.dart';
 import '../module/login/login_page.dart';
 import '../module/main/main_controller.dart';
 import '../module/main/main_page.dart';
@@ -191,6 +193,9 @@ class AppBinding extends Bindings {
     lazyPut(() => getIt.get<KeyboardTutorialController>());
     lazyPut(() => getIt.get<KeyboardTutorialAndroidViewController>());
     lazyPut(() => getIt.get<KeyboardTutorialIosViewController>());
+    lazyPut(() => getIt.get<KeyboardTutorialVideoController>());
+    lazyPut(() => getIt.get<KeyboardTutorialVideoAndroidViewController>());
+    lazyPut(() => getIt.get<KeyboardTutorialVideoIosViewController>());
   }
 
   void lazyPut<S>(InstanceBuilderCallback<S> builder) {

lib/widget/platform_util.dart

@@ -0,0 +1,26 @@
+import 'dart:io';
+
+/// 平台判断工具类
+class PlatformUtil {
+  PlatformUtil._();
+
+  static bool get isMacOS => Platform.isMacOS;
+
+  static bool get isWindows => Platform.isWindows;
+
+  static bool get isLinux => Platform.isLinux;
+
+  static bool get isAndroid => Platform.isAndroid;
+
+  static bool get isIOS => Platform.isIOS;
+
+  /// 切换注释，就可以用来测试iOS平台的效果
+  // static bool get isIOS => true;
+
+  static bool get isFuchsia => Platform.isFuchsia;
+
+  static bool get isMobile => Platform.isIOS || Platform.isAndroid;
+
+  static bool get isDesktop =>
+      PlatformUtil.isMacOS || PlatformUtil.isWindows || PlatformUtil.isLinux;
+}