初始化

lib/pages/student/room/controls/bottom_bar.dart

@@ -0,0 +1,92 @@
+import 'package:app/widgets/room/file_drawer.dart';
+import 'package:flutter/material.dart';
+import 'package:remixicon/remixicon.dart';
+
+
+class BottomBar extends StatefulWidget {
+  const BottomBar({super.key});
+
+  @override
+  State<BottomBar> createState() => _BottomBarState();
+}
+
+class _BottomBarState extends State<BottomBar> {
+  ///显示文件
+  void _handShowFile() {
+    showFileDialog(context);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Color(0xff232426),
+      ),
+      height: 70,
+      child: Row(
+        children: [
+          BarItem(
+            title: "摄像头",
+            icon: RemixIcons.video_on_fill,
+          ),
+          BarItem(
+            title: "麦克风",
+            icon: RemixIcons.mic_off_fill,
+          ),
+          BarItem(
+            title: "已静音",
+            icon: RemixIcons.volume_mute_fill,
+            isOff: true,
+          ),
+          BarItem(
+            title: "举手",
+            icon: RemixIcons.hand,
+          ),
+          BarItem(
+            title: "拍照",
+            icon: RemixIcons.upload_2_fill,
+            onTap: _handShowFile,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class BarItem extends StatelessWidget {
+  final String title;
+  final IconData icon;
+  final bool isOff;
+  final void Function()? onTap;
+
+  const BarItem({
+    super.key,
+    required this.title,
+    required this.icon,
+    this.isOff = false,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: InkWell(
+        onTap: onTap,
+        child: Container(
+          color: isOff ? Colors.red : null,
+          child: Column(
+            spacing: 3,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(icon, color: Colors.white),
+              Text(
+                title,
+                style: TextStyle(color: Colors.white70, fontSize: 12),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/student/room/controls/top_bar.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:remixicon/remixicon.dart';
+
+class TopBar extends StatelessWidget implements PreferredSizeWidget {
+  final bool showOther;
+  final void Function()? onOther;
+
+  const TopBar({super.key, this.showOther = false, this.onOther});
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      foregroundColor: Colors.white,
+      titleTextStyle: TextStyle(color: Colors.white, fontSize: 18),
+      backgroundColor: Color(0xff232426),
+      centerTitle: true,
+      title: Column(
+        children: [
+          Text("会议"),
+          Text(
+            "01:12",
+            style: TextStyle(fontSize: 12, color: Colors.white24),
+          ),
+        ],
+      ),
+      actions: [
+        IconButton(
+          onPressed: onOther,
+          icon: Icon(showOther ? RemixIcons.team_fill : RemixIcons.team_line),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

lib/pages/student/room/s_room_page.dart

@@ -0,0 +1,86 @@
+import 'package:app/widgets/base/transition/slide_hide.dart';
+import 'package:flutter/material.dart';
+
+import 'controls/bottom_bar.dart';
+import 'controls/top_bar.dart';
+import 'video/student_video_list.dart';
+import 'video/teacher_video.dart';
+
+class SRoomPage extends StatefulWidget {
+  const SRoomPage({super.key});
+
+  @override
+  State<SRoomPage> createState() => _SRoomPageState();
+}
+
+class _SRoomPageState extends State<SRoomPage> {
+  /// 显示控制栏
+  bool _controlsVisible = true;
+
+  ///显示其他学生画面
+  bool _showOtherStudent = true;
+
+  ///切换显示控制栏
+  void _toggleOverlay() {
+    setState(() {
+      _controlsVisible = !_controlsVisible;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Stack(
+        children: [
+          //底部控制显示
+          GestureDetector(
+            onTap: _toggleOverlay,
+            child: Container(color: Color(0xff2c3032)),
+          ),
+
+          //老师视频画面
+          TeacherVideo(),
+
+          Positioned(
+            right: 0,
+            top: 0,
+            bottom: 0,
+            child: Visibility(
+              visible: _showOtherStudent,
+              child: StudentVideoList(),
+            ),
+          ),
+
+          ///控制栏
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: SlideHide(
+              direction: SlideDirection.up,
+              hide: !_controlsVisible,
+              child: TopBar(
+                showOther: _showOtherStudent,
+                onOther: () {
+                  setState(() {
+                    _showOtherStudent = !_showOtherStudent;
+                  });
+                },
+              ),
+            ),
+          ),
+          Positioned(
+            bottom: 0,
+            left: 0,
+            right: 0,
+            child: SlideHide(
+              direction: SlideDirection.down,
+              hide: !_controlsVisible,
+              child: BottomBar(),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/student/room/video/student_video_list.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+class StudentVideoList extends StatefulWidget {
+  const StudentVideoList({super.key});
+
+  @override
+  State<StudentVideoList> createState() => _StudentVideoListState();
+}
+
+class _StudentVideoListState extends State<StudentVideoList> {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Container(
+        width: 250,
+        padding: EdgeInsets.only(bottom: 30),
+        child: ListView.separated(
+          padding: EdgeInsets.all(10),
+          itemCount: 8,
+          itemBuilder: (context, index) {
+            return VideoItem();
+          },
+          separatorBuilder: (context, index) => SizedBox(height: 15),
+        ),
+      ),
+    );
+  }
+}
+
+class VideoItem extends StatelessWidget {
+  const VideoItem({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        AspectRatio(
+          aspectRatio: 1.5 / 1,
+          child: Container(
+            decoration: BoxDecoration(
+              color: Color(0xff373c3e),
+              borderRadius: BorderRadius.circular(10),
+            ),
+          ),
+        ),
+        Positioned(
+          bottom: 5,
+          left: 5,
+          child: Container(
+            padding: EdgeInsets.symmetric(horizontal: 7, vertical: 3),
+            decoration: BoxDecoration(
+              color: Colors.black26,
+              borderRadius: BorderRadius.circular(5),
+            ),
+            child: Text(
+              "小红",
+              style: TextStyle(fontSize: 12, color: Colors.white),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/student/room/video/teacher_video.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class TeacherVideo extends StatefulWidget {
+  const TeacherVideo({super.key});
+
+  @override
+  State<TeacherVideo> createState() => _TeacherVideoState();
+}
+
+class _TeacherVideoState extends State<TeacherVideo> {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Align(
+        child: Text(
+          "画面准备中",
+          style: TextStyle(color: Colors.white),
+        ),
+      ),
+    );
+  }
+}