299 lines
13 KiB
Dart
299 lines
13 KiB
Dart
import 'dart:io';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:marking_app/common/model/enum/KeyboardType.dart';
|
|
import 'package:marking_app/common/model/event_bus/bottom_annotation_switch_cleanall.dart';
|
|
import 'package:marking_app/common/model/marking/annotation_graffiti_switch.dart';
|
|
import 'package:marking_app/common/model/marking/do_marking_keyboard_model.dart';
|
|
import 'package:marking_app/pages/common/event_bus_mixin.dart';
|
|
import 'package:marking_app/provider/annotation_graffiti_switch_provider.dart';
|
|
import 'package:marking_app/provider/do_marking_provider.dart';
|
|
import 'package:marking_app/utils/index.dart';
|
|
|
|
/**
|
|
* 底部批注开关
|
|
*/
|
|
class BottomAnnotationSwitch extends StatefulHookConsumerWidget {
|
|
final double? maxWidth;
|
|
final bool homework;
|
|
const BottomAnnotationSwitch({this.maxWidth, this.homework = false, Key? key}) : super(key: key);
|
|
|
|
@override
|
|
_BottomAnnotationSwitchState createState() => _BottomAnnotationSwitchState();
|
|
}
|
|
|
|
class _BottomAnnotationSwitchState extends ConsumerState<BottomAnnotationSwitch>
|
|
with SingleTickerProviderStateMixin, EventBusMixin<BottomAnnotationSwitchCleanall> {
|
|
late RemoveListener _annotationsListener; // 批注关闭监听
|
|
late AnimationController _animationController; // 动画
|
|
late AnnotationGraffitiSwitch graffitiSwitch;
|
|
late DoMarkingKeyboardModel _preferenceModel;
|
|
late double upperBound;
|
|
late double lowerBound;
|
|
Color? bgc;
|
|
bool isIos = false;
|
|
|
|
@override
|
|
void initState() {
|
|
if (Platform.isIOS) {
|
|
toPrint(val: 'IOS');
|
|
isIos = true;
|
|
} else if (Platform.isAndroid) {
|
|
toPrint(val: '安卓');
|
|
}
|
|
var graffitiHander = ref.read(annotationGraffitiSwitchProvider.notifier);
|
|
if (widget.homework) {
|
|
setTimeOut(500, () {
|
|
graffitiHander.setSwitch(true);
|
|
if (!graffitiHander.state.openBrush) graffitiHander.setSwitchBrush();
|
|
}); // 默认打开可以书写
|
|
}
|
|
|
|
_preferenceModel = ref.read(markingKeyboardProvider.notifier).state; // 偏好设置
|
|
bool isVertical = _preferenceModel.screenDirection == ScreenDirection.VERTICAL_SCREEN; // 是否是垂直方向
|
|
|
|
switch (_preferenceModel.keyboard) {
|
|
case KeyboardType.RIGHT_SELECTION:
|
|
double isVerticalNumber = 58.w;
|
|
double noVerticalNumber = 28.w;
|
|
if (isIos) {
|
|
noVerticalNumber = 50.w;
|
|
}
|
|
upperBound = ScreenUtil().screenWidth - (isVertical ? isVerticalNumber : noVerticalNumber);
|
|
lowerBound = isVertical ? 34.w : 18.w;
|
|
break;
|
|
case KeyboardType.INPUT_TYPE:
|
|
// 输入型键盘不存在竖屏
|
|
upperBound = ScreenUtil().screenWidth - (isIos ? 115.w : 95.w);
|
|
lowerBound = 18.w;
|
|
|
|
break;
|
|
case KeyboardType.BOTTOM_SELECTION:
|
|
upperBound = ScreenUtil().screenWidth;
|
|
lowerBound = isVertical ? 34.w : 18.w;
|
|
|
|
break;
|
|
}
|
|
|
|
upperBound = widget.maxWidth ?? upperBound;
|
|
_animationController = AnimationController(
|
|
value: graffitiHander.state.annotationSwitch ? upperBound : lowerBound, // 设置默认值
|
|
duration: const Duration(milliseconds: 300),
|
|
lowerBound: lowerBound,
|
|
upperBound: upperBound,
|
|
vsync: this,
|
|
)..addListener(toUp);
|
|
|
|
_annotationsListener = graffitiHander.addListener((state) {
|
|
graffitiSwitch = state;
|
|
if (state.annotationSwitch) {
|
|
bgc = const Color.fromRGBO(51, 57, 62, 1);
|
|
// toUp();
|
|
_animationController.forward();
|
|
} else {
|
|
_animationController.reverse();
|
|
setTimeOut(300, () => bgc = null);
|
|
}
|
|
});
|
|
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_annotationsListener();
|
|
_animationController
|
|
..removeListener(toUp)
|
|
..dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
ScreenDirection _screenDirection = _preferenceModel.screenDirection;
|
|
bool isVertical = _screenDirection == ScreenDirection.VERTICAL_SCREEN; // 是否是垂直
|
|
|
|
// print('当前屏幕情况：${graffitiSwitch.openBrush}');
|
|
// print(isVertical);
|
|
|
|
AnnotationGraffitiSwitch _graffitiSwitch = ref.watch(annotationGraffitiSwitchProvider);
|
|
|
|
double barrierSize = ScreenUtil().screenWidth / (isVertical ? 20 : 6);
|
|
Color actionColor = Colors.white;
|
|
Color defaultColor = Color.fromRGBO(132, 146, 163, 1);
|
|
return OrientationBuilder(
|
|
builder: (BuildContext context, Orientation orientation) {
|
|
bool isVertical = orientation == Orientation.portrait;
|
|
|
|
double iconSize = (isVertical ? 32 : 28).sp;
|
|
return Container(
|
|
height: 52.h,
|
|
// width: widget.homework ? double.infinity : _animationController.value,
|
|
width: _animationController.value,
|
|
color: widget.homework ? Color.fromRGBO(51, 57, 62, 0.2) : bgc,
|
|
padding: EdgeInsets.symmetric(vertical: 1.h),
|
|
child: widget.homework
|
|
? Row(
|
|
children: [
|
|
SizedBox(width: barrierSize + 20.w),
|
|
InkWell(
|
|
onTap: () {
|
|
easyThrottle('setSwitchBrush',
|
|
() => ref.read(annotationGraffitiSwitchProvider.notifier).setSwitchBrush());
|
|
},
|
|
child: Icon(const IconData(0xe623, fontFamily: "AlibabaIcon"),
|
|
size: iconSize, color: _graffitiSwitch.openBrush ? actionColor : defaultColor),
|
|
),
|
|
SizedBox(width: 24.w),
|
|
InkWell(
|
|
onTap: () {
|
|
eventFire(model: BottomAnnotationSwitchCleanall(previousStep: true));
|
|
},
|
|
child: Icon(IconData(0xe61d, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
|
|
),
|
|
const Expanded(child: SizedBox()),
|
|
InkWell(
|
|
onTap: () {
|
|
easyThrottle('setSwitchMagnifier',
|
|
() => ref.read(annotationGraffitiSwitchProvider.notifier).setMagnifier());
|
|
},
|
|
// IconData(0xe62f, fontFamily: "AlibabaIcon")
|
|
child: Icon(IconData(0xe634, fontFamily: "AlibabaIcon"),
|
|
size: iconSize, color: _graffitiSwitch.magnifier ? actionColor : defaultColor),
|
|
),
|
|
SizedBox(width: 24.w),
|
|
InkWell(
|
|
onTap: () {
|
|
eventFire(model: BottomAnnotationSwitchCleanall(cleanAll: true));
|
|
},
|
|
child: Icon(IconData(0xe61f, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
|
|
),
|
|
SizedBox(width: 24.w),
|
|
InkWell(
|
|
onTap: () {
|
|
easyThrottle(
|
|
'setSwitchMagnifier',
|
|
() => ref.read(annotationGraffitiSwitchProvider.notifier).setTrajectory(),
|
|
);
|
|
},
|
|
child: Icon(
|
|
IconData(0xe629, fontFamily: "AlibabaIcon"),
|
|
size: iconSize,
|
|
color: _graffitiSwitch.trajectoryDisplay ? actionColor : defaultColor,
|
|
),
|
|
),
|
|
SizedBox(width: isIos ? 40.w : 50.w),
|
|
],
|
|
)
|
|
: Stack(
|
|
alignment: const FractionalOffset(0, 0.5),
|
|
children: [
|
|
if (bgc != null)
|
|
Row(
|
|
children: [
|
|
SizedBox(width: barrierSize + 20.w),
|
|
InkWell(
|
|
onTap: () {
|
|
easyThrottle('setSwitchBrush',
|
|
() => ref.read(annotationGraffitiSwitchProvider.notifier).setSwitchBrush());
|
|
},
|
|
child: Icon(const IconData(0xe623, fontFamily: "AlibabaIcon"),
|
|
size: iconSize, color: _graffitiSwitch.openBrush ? actionColor : defaultColor),
|
|
),
|
|
SizedBox(width: 24.w),
|
|
InkWell(
|
|
onTap: () {
|
|
eventFire(model: BottomAnnotationSwitchCleanall(previousStep: true));
|
|
},
|
|
child:
|
|
Icon(IconData(0xe61d, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
|
|
),
|
|
|
|
// 不需要橡皮擦
|
|
// InkWell(
|
|
// onTap: () {
|
|
// easyThrottle(
|
|
// 'setSwitchEraser', () => ref.read(annotationGraffitiSwitchProvider.notifier).setSwitchEraser());
|
|
// },
|
|
// child: Icon(const IconData(0xe61c, fontFamily: "AlibabaIcon"),
|
|
// color: _graffitiSwitch.openEraser ? Theme.of(context).primaryColor : Colors.white),
|
|
// ),
|
|
const Expanded(child: SizedBox()),
|
|
InkWell(
|
|
onTap: () {
|
|
easyThrottle('setSwitchMagnifier',
|
|
() => ref.read(annotationGraffitiSwitchProvider.notifier).setMagnifier());
|
|
},
|
|
child: Icon(IconData(0xe62f, fontFamily: "AlibabaIcon"),
|
|
size: iconSize, color: _graffitiSwitch.magnifier ? actionColor : defaultColor),
|
|
),
|
|
SizedBox(width: 24.w),
|
|
InkWell(
|
|
onTap: () {
|
|
eventFire(model: BottomAnnotationSwitchCleanall(cleanAll: true));
|
|
},
|
|
child:
|
|
Icon(IconData(0xe61f, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
|
|
),
|
|
// SizedBox(width: 24.w),
|
|
// InkWell(
|
|
// onTap: (){
|
|
// eventFire(model:BottomAnnotationSwitchCleanall(uploadImage: true));
|
|
// },
|
|
// child: Column(
|
|
// mainAxisAlignment: MainAxisAlignment.center,
|
|
// children: [
|
|
// Icon(const IconData(0xe614, fontFamily: "AlibabaIcon"), color: Colors.white,size: 22.sp,),
|
|
// quickText('提交批注',color: Colors.white,size: 9.sp),
|
|
// ],
|
|
// )
|
|
// ),
|
|
|
|
SizedBox(width: isIos ? 40.w : 26.w),
|
|
],
|
|
),
|
|
InkWell(
|
|
onTap: () {
|
|
easyThrottle('setSwitchMarkingGraffiti', () {
|
|
if ([upperBound, lowerBound].contains(_animationController.value)) {
|
|
ref
|
|
.read(annotationGraffitiSwitchProvider.notifier)
|
|
.setSwitch(!graffitiSwitch.annotationSwitch);
|
|
}
|
|
});
|
|
},
|
|
child: Container(
|
|
// width: isVertical ? 34.w : 16.w,
|
|
width: barrierSize,
|
|
padding: EdgeInsets.only(top: 4.h, bottom: 4.h, right: 3.w),
|
|
alignment: Alignment.centerRight,
|
|
decoration: BoxDecoration(
|
|
color: const Color.fromRGBO(253, 147, 21, 1),
|
|
borderRadius: BorderRadius.only(
|
|
topRight: Radius.circular(30.sp),
|
|
bottomRight: Radius.circular(30.sp),
|
|
),
|
|
),
|
|
child: Icon(
|
|
!graffitiSwitch.annotationSwitch
|
|
? const IconData(0xe622, fontFamily: "AlibabaIcon")
|
|
: const IconData(0xe621, fontFamily: "AlibabaIcon"),
|
|
color: Colors.white,
|
|
size: isVertical ? 20.sp : 26.sp,
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
void toUp() {
|
|
toUpState(setState, () {}, mounted);
|
|
}
|
|
}
|