|
|
@@ -6,7 +6,6 @@ import 'package:keyboard/resource/assets.gen.dart';
|
|
|
import 'package:keyboard/resource/colors.gen.dart';
|
|
|
import 'package:video_player/video_player.dart';
|
|
|
|
|
|
-import '../../../di/get_it.dart';
|
|
|
import '../../../router/app_pages.dart';
|
|
|
import '../../../utils/status_bar_util.dart';
|
|
|
import 'keyboard_tutorial_video_controller.dart';
|
|
|
@@ -14,9 +13,11 @@ import 'keyboard_tutorial_video_controller.dart';
|
|
|
/// 键盘使用教程-视频引导页
|
|
|
class KeyboardTutorialVideoPage
|
|
|
extends BasePage<KeyboardTutorialVideoController> {
|
|
|
- KeyboardTutorialVideoPage({super.key}) {
|
|
|
- Get.lazyPut(() => getIt.get<KeyboardTutorialVideoController>());
|
|
|
- }
|
|
|
+ KeyboardTutorialVideoPage({super.key});
|
|
|
+
|
|
|
+ final KeyboardTutorialVideoController _controller = Get.put(
|
|
|
+ KeyboardTutorialVideoController(),
|
|
|
+ );
|
|
|
|
|
|
static void start() {
|
|
|
Get.toNamed(RoutePath.keyboardTutorialVideo);
|
|
|
@@ -39,8 +40,14 @@ class KeyboardTutorialVideoPage
|
|
|
backgroundColor: backgroundColor(),
|
|
|
body: Stack(
|
|
|
children: [
|
|
|
- // 头部
|
|
|
- Positioned(left: 0, top: 0, right: 0, child: _buildHeader(context)),
|
|
|
+ // 内容,填充剩余部分
|
|
|
+ Positioned.fill(
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ child: SingleChildScrollView(child: _buildContent(context)),
|
|
|
+ ),
|
|
|
// 状态栏和标题栏
|
|
|
Positioned(
|
|
|
left: 0,
|
|
|
@@ -51,14 +58,6 @@ class KeyboardTutorialVideoPage
|
|
|
children: [_buildStatusBar(), _buildTopBar()],
|
|
|
),
|
|
|
),
|
|
|
- // 内容,填充剩余部分
|
|
|
- Positioned.fill(
|
|
|
- top: 180.h + StatusBarUtil.getStatusBarHeight(Get.context!),
|
|
|
- left: 0,
|
|
|
- right: 0,
|
|
|
- bottom: 0,
|
|
|
- child: SingleChildScrollView(child: _buildContent()),
|
|
|
- ),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
@@ -90,7 +89,7 @@ class KeyboardTutorialVideoPage
|
|
|
Positioned(
|
|
|
left: 16.w,
|
|
|
child: GestureDetector(
|
|
|
- onTap: controller.clickBack,
|
|
|
+ onTap: _controller.clickBack,
|
|
|
child: Assets.images.iconBlackBackArrow.image(
|
|
|
width: 24.w,
|
|
|
height: 24.h,
|
|
|
@@ -107,7 +106,7 @@ class KeyboardTutorialVideoPage
|
|
|
Widget _buildHeader(BuildContext context) {
|
|
|
return SizedBox(
|
|
|
width: double.infinity,
|
|
|
- height: 260.h,
|
|
|
+ height: 230.h,
|
|
|
child: Stack(
|
|
|
alignment: Alignment.center,
|
|
|
children: [
|
|
|
@@ -130,7 +129,7 @@ class KeyboardTutorialVideoPage
|
|
|
}
|
|
|
|
|
|
/// 内容
|
|
|
- Widget _buildContent() {
|
|
|
+ Widget _buildContent(BuildContext context) {
|
|
|
return Container(
|
|
|
// 渐变背景
|
|
|
decoration: BoxDecoration(
|
|
|
@@ -141,40 +140,44 @@ class KeyboardTutorialVideoPage
|
|
|
),
|
|
|
shape: BoxShape.rectangle,
|
|
|
),
|
|
|
- child: Column(children: [_buildTutorialVideo()]),
|
|
|
+ child: Column(
|
|
|
+ children: [
|
|
|
+ // 头部
|
|
|
+ _buildHeader(context),
|
|
|
+ _buildTutorialVideo(),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
/// 教程视频
|
|
|
Widget _buildTutorialVideo() {
|
|
|
return Container(
|
|
|
- margin: EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 23),
|
|
|
+ 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: LayoutBuilder(
|
|
|
- builder: (context, constraints) {
|
|
|
- double maxWidth = constraints.maxWidth - 24.w;
|
|
|
- double videoRatio = controller.videoController.value.aspectRatio;
|
|
|
- return Stack(
|
|
|
- alignment: Alignment.center,
|
|
|
- children: [
|
|
|
- // 视频容器(动态宽高 + 裁剪)
|
|
|
- SizedBox(
|
|
|
- width: maxWidth,
|
|
|
- height: maxWidth / videoRatio,
|
|
|
+ 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),
|
|
|
+ child: VideoPlayer(_controller.videoController),
|
|
|
),
|
|
|
- ),
|
|
|
- // 操作按钮
|
|
|
- _buildActionBtn(),
|
|
|
- ],
|
|
|
- );
|
|
|
- },
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ // 操作按钮
|
|
|
+ _buildActionBtn(),
|
|
|
+ ],
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
@@ -185,11 +188,11 @@ class KeyboardTutorialVideoPage
|
|
|
return Stack(
|
|
|
children: [
|
|
|
Visibility(
|
|
|
- visible: !controller.isVideoPlaying.value,
|
|
|
+ visible: !_controller.isVideoPlaying.value,
|
|
|
child: _buildPlayBtn(),
|
|
|
),
|
|
|
Visibility(
|
|
|
- visible: controller.isVideoPlaying.value,
|
|
|
+ visible: _controller.isVideoPlaying.value,
|
|
|
child: _buildPauseBtn(),
|
|
|
),
|
|
|
],
|
|
|
@@ -201,7 +204,7 @@ class KeyboardTutorialVideoPage
|
|
|
Widget _buildPlayBtn() {
|
|
|
return GestureDetector(
|
|
|
onTap: () {
|
|
|
- controller.clickPlay();
|
|
|
+ _controller.clickPlay();
|
|
|
},
|
|
|
child: Assets.images.iconPlay.image(width: 52.w, height: 52.w),
|
|
|
);
|
|
|
@@ -211,7 +214,7 @@ class KeyboardTutorialVideoPage
|
|
|
Widget _buildPauseBtn() {
|
|
|
return GestureDetector(
|
|
|
onTap: () {
|
|
|
- controller.clickPause();
|
|
|
+ _controller.clickPause();
|
|
|
},
|
|
|
child: Assets.images.iconPause.image(width: 52.w, height: 52.w),
|
|
|
);
|