liangchengyou / wow_english

  import 'package:flutter/material.dart';
  import 'package:flutter_screenutil/flutter_screenutil.dart';
  import 'package:wow_english/common/extension/string_extension.dart';
  

  enum OperationType {
    //返回
    back,
    //字幕
    subtitlesState,
    //静音
    audioState,
    //暂停/播放
    playState,
  }
  

  class VideoOperaWidget extends StatefulWidget {

    const VideoOperaWidget({super.key,
      this.currentTime = '00:00',
      this.totalTime = '00:00',
      this.degree = 0.0,
      this.actionEvent,

      this.sliderChangeEvent,

      this.isPlay = true,
      this.title = 'song',

    });

    //当前播放时间
    final String currentTime;
    //总时间
    final String totalTime;
    final double degree;

    final bool isPlay;

    final String title;

    final Function(OperationType type)? actionEvent;

    final Function(double degree)? sliderChangeEvent;

  
    @override
    State<StatefulWidget> createState() {
      return _VideoOperaWidgetState();
    }
  }
  
  class _VideoOperaWidgetState extends State<VideoOperaWidget> {

  
    //是否在滑动
    late bool isSlider;
    late double sliderValue;
  
    @override
    void initState() {
      super.initState();
      isSlider = false;
      sliderValue = 0.0;
    }
  

    @override
    Widget build(BuildContext context) {

      return SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SafeArea(
              child: Padding(
                padding: EdgeInsets.only(top: 11.h),

                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [

                        GestureDetector(
                          onTap: (){
                            widget.actionEvent?.call(OperationType.back);
                          },
                          child: Image.asset(
                              'back_around'.assetPng,
                              height: 40,
                              width: 40
                          ),

                        ),
                        18.horizontalSpace,
                        Container(
                          height: 40.h,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(6.r),
                              border: Border.all(
                                  width: 1.5,
                                  color: const Color(0xFF140C10)
                              )
                          ),
                          padding: EdgeInsets.symmetric(horizontal: 10.w),
                          child: Text(

                            widget.title,

                            textAlign: TextAlign.center,

                            overflow: TextOverflow.clip,

                            style: TextStyle(
                              fontSize: 20.sp,
                              color: const Color(0xFF333333),
                            ),
                          ),
                        )
                      ],
                    ),

                    // GestureDetector(
                    //   onTap: () {
                    //     widget.actionEvent?.call(OperationType.subtitlesState);
                    //   },
                    //   child: Container(
                    //     height: 40.h,
                    //     alignment: Alignment.center,
                    //     decoration: BoxDecoration(
                    //         color: Colors.white,
                    //         borderRadius: BorderRadius.circular(6.r),
                    //         border: Border.all(
                    //             width: 1.5,
                    //             color: const Color(0xFF140C10)
                    //         )
                    //     ),
                    //     padding: EdgeInsets.symmetric(horizontal: 10.w),
                    //     child: Text(
                    //       '中/英',
                    //       style: TextStyle(
                    //         fontSize: 20.sp,
                    //         color: const Color(0xFF333333),
                    //       ),
                    //     ),
                    //   ),
                    // )

                  ],
                ),

              ),
            ),
            Container(
              color: Colors.white10,
              height: 47.h+ScreenUtil().bottomBarHeight,
              padding: EdgeInsets.symmetric(horizontal: 11.w),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      IconButton(onPressed: (){
                        widget.actionEvent?.call(OperationType.playState);
                      }, icon: widget.isPlay?const Icon(Icons.pause,color: Colors.white,):const Icon(Icons.play_arrow,color: Colors.white),),
                      Expanded(
                        child: Slider(

                          min:0,
                          max: 1.0,

                          activeColor: Colors.blue,
                          inactiveColor: Colors.white,
                          value: isSlider?sliderValue:widget.degree,
                          onChangeStart: (value) {
                           setState(() {
                             isSlider = true;
                             sliderValue = value;
                           });
                          },
                          onChangeEnd: (value) {
                            setState(() {
                              isSlider = false;
                            });

                            widget.sliderChangeEvent?.call(value);

                          },
                          onChanged: (value) {
                            setState(() {
                              sliderValue = value;
                            });
                          },
                        ),
                      ),
                      Text(
                        '${widget.currentTime}/${widget.totalTime}',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12.sp
                        ),
                      )
                    ],
                  ),
                ],
              ),
            )
          ],

        ),
      );
    }
  }