[feat]键盘教程页，封装TopBar组件

lib/module/keyboard_tutorial/keyboard_tutorial_page.dart

@@ -11,6 +11,7 @@ import '../../resource/assets.gen.dart';
 import '../../utils/status_bar_util.dart';
 import '../../widget/app_lifecycle_widget.dart';
 import '../../widget/gradient_btn.dart';
+import '../../widget/top_bar.dart';
 import 'keyboard_tutorial_controller.dart';
 
 /// 键盘使用教程-引导页
@@ -95,57 +96,32 @@ class KeyboardTutorialPage extends BasePage<KeyboardTutorialController> {
 
   /// 顶部栏
   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,
-                ),
-              ),
-            ),
-            // 视频教程按钮
-            Positioned(
-              right: 16.w,
-              child: Visibility(
-                visible: false,
-                child: GestureDetector(
-                  onTap: () {
-                    controller.clickTutorialVideo();
-                  },
-                  child: Text(
-                    StringName.keyboardTutorialVideo,
-                    style: TextStyle(
-                      color: ColorName.black85,
-                      fontSize: 14.sp,
-                      fontWeight: FontWeight.w500,
-                      // 下划线
-                      decoration: TextDecoration.underline,
-                      // 下划线颜色
-                      decorationColor: ColorName.black85,
-                      // 下划线粗细
-                      decorationThickness: 1.0,
-                    ),
-                  ),
-                ),
+    return TopBar(
+      leftWidget: GestureDetector(
+        onTap: controller.clickBack,
+        child: Assets.images.iconBlackBackArrow.image(
+          width: 24.w,
+          height: 24.h,
+        ),
+      ),
+      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,
               ),
             ),
-          ],
+          ),
         ),
       ),
     );

lib/widget/top_bar.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/Material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+/// 顶部栏
+class TopBar extends StatelessWidget {
+  /// 左边的组件，例如返回按钮
+  final Widget? leftWidget;
+
+  /// 中间的组件，例如标题
+  final Widget? centerWidget;
+
+  /// 右边的组件
+  final Widget? rightWidget;
+
+  const TopBar({
+    super.key,
+    this.leftWidget,
+    this.centerWidget,
+    this.rightWidget,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      // 宽度撑满父组件
+      width: double.infinity,
+      height: kToolbarHeight,
+      // 背景颜色
+      color: Colors.transparent,
+      child: ConstrainedBox(
+        // 设置宽度为无限大，撑满父组件，否则Stack获取不到高度，会报错
+        constraints: BoxConstraints(minWidth: double.infinity),
+        child: Stack(
+          alignment: Alignment.center,
+          children: [
+            // 左边按钮
+            Positioned(
+              left: 16.w,
+              child: leftWidget != null ? leftWidget! : SizedBox.shrink(),
+            ),
+            // 中间的标题
+            Positioned(
+              left: 0,
+              right: 0,
+              child: centerWidget != null ? centerWidget! : SizedBox.shrink(),
+            ),
+            // 右边的按钮
+            Positioned(
+              right: 16.w,
+              child: rightWidget != null ? rightWidget! : SizedBox.shrink(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}