ElectronicAssistant/lib/module/record/view.dart

import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/module/record/constants.dart';
import 'package:electronic_assistant/module/record/controller.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../resource/assets.gen.dart';
import '../../widget/frame_animation_view.dart';

class RecordPage extends BasePage<RecordController> {
  const RecordPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() {
    return false;
  }

  @override
  Color backgroundColor() {
    return ColorName.recordBackgroundColor;
  }

  @override
  Color navigationBarColor() {
    return "#4A4F67".color;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(alignment: Alignment.bottomCenter, children: [
      _buildBottomGradient(),
      Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios_new_rounded),
            color: ColorName.white,
            onPressed: () {
              controller.onBackClick();
            },
          ),
          scrolledUnderElevation: 0,
          backgroundColor: ColorName.transparent,
          systemOverlayStyle: SystemUiOverlayStyle.light,
          actions: [
            _buildAddShortcut(true),
          ],
        ),
        backgroundColor: ColorName.transparent,
        body: Flex(
          direction: Axis.vertical,
          children: [
            _buildRecordStatus(),
            const Spacer(flex: 271),
            _buildRecordAnim(),
            const Spacer(flex: 407),
            _buildRecordControl(),
          ],
        ),
      ),
    ]);
  }

  Widget _buildAddShortcut(bool visible) {
    return GestureDetector(
      onTap: () {
        controller.addShortcut();
      },
      child: Visibility(
        visible: visible,
        child: Row(
          children: [
            Image(
                image: Assets.images.iconRecordAddShortcut.provider(),
                width: 24.w,
                height: 24.w),
            Padding(
              padding: EdgeInsets.only(left: 8.w, right: 16.w),
              child: Text(
                '添加到桌面',
                style: TextStyle(color: ColorName.white, fontSize: 14.w),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildRecordStatus() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      margin: EdgeInsets.only(top: 20.w),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.only(right: 8.w),
            child: Image(
                image: Assets.images.iconRecordLogo.provider(),
                width: 45.w,
                height: 48.w),
          ),
          Obx(() {
            return Text(
              controller.currentStatus.value.desc,
              style: TextStyle(color: ColorName.white, fontSize: 17.w),
            );
          }),
        ],
      ),
    );
  }

  Widget _buildRecordAnim() {
    return Obx(() {
      return AnimatedOpacity(
        opacity:
            controller.currentStatus.value == RecordStatus.recording ? 1 : 0,
        duration: const Duration(milliseconds: 520),
        onEnd: () {
          if (controller.currentStatus.value != RecordStatus.recording) {
            controller.frameAnimationController.stop();
          }
        },
        child: FrameAnimationView(
          controller: controller.frameAnimationController,
          framePath: 'assets/anim/anim_recording.zip',
          speed: 1,
          width: 360.w,
          height: 180.w,
        ),
      );
    });
  }

  Widget _buildRecordControl() {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 30.w),
          decoration: BoxDecoration(
            color: "#4A4F67".color,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40.w),
                topRight: Radius.circular(40.w)),
          ),
          child: Row(
            children: [
              GestureDetector(
                onTap: controller.onCancelClick,
                child: Obx(() {
                  return Image(
                      image: controller.currentStatus.value.cancelButtonImage,
                      width: 56.w,
                      height: 56.w);
                }),
              ),
              const Spacer(),
              GestureDetector(
                onTap: controller.onSaveClick,
                child: Obx(() {
                  return Image(
                      image: controller.currentStatus.value.saveButtonImage,
                      width: 56.w,
                      height: 56.w);
                }),
              ),
            ],
          ),
        ),
        Column(
          children: [
            GestureDetector(
                onTap: () {
                  controller.onActionClick();
                },
                child: Obx(
                  () => Image(
                      image: controller.currentStatus.value.actionButtonImage,
                      width: 92.w,
                      height: 92.w),
                )),
            Padding(
              padding: EdgeInsets.only(top: 10.w, bottom: 35.w),
              child: Obx(() => Text(
                    formatDuration(controller.currentDuration.value),
                    style: TextStyle(
                      color: ColorName.white,
                      fontSize: 16.w,
                    ),
                  )),
            )
          ],
        )
      ],
    );
  }

  Widget _buildBottomGradient() {
    return Container(
      height: 0.38.sh,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            "#006177F2".color,
            "#806177F2".color,
          ],
        ),
      ),
    );
  }

  String formatDuration(double value) {
    int hour = (value / 3600).floor();
    int minute = ((value - hour * 3600) / 60).floor();
    int second = (value - hour * 3600 - minute * 60).floor();
    return '${hour.toString().padLeft(2, '0')}:${minute.toString().padLeft(2, '0')}:${second.toString().padLeft(2, '0')}';
  }
}