From 1a0162a581844229b3a38ef4a6c11242f6fea7c4 Mon Sep 17 00:00:00 2001 From: csf Date: Wed, 23 Feb 2022 21:16:30 +0800 Subject: [PATCH] add gesture help widget --- assets/gestures.ttf | Bin 0 -> 7600 bytes lib/widgets/gesture_help.dart | 157 ++++++++++++++++++++++++++++++++++ pubspec.yaml | 6 ++ 3 files changed, 163 insertions(+) create mode 100644 assets/gestures.ttf create mode 100644 lib/widgets/gesture_help.dart diff --git a/assets/gestures.ttf b/assets/gestures.ttf new file mode 100644 index 0000000000000000000000000000000000000000..b6cebbf43f45e2f4619fa3dd4d34622804d328e8 GIT binary patch literal 7600 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 CHBEv5 literal 0 HcmV?d00001 diff --git a/lib/widgets/gesture_help.dart b/lib/widgets/gesture_help.dart new file mode 100644 index 000000000..2c457dcde --- /dev/null +++ b/lib/widgets/gesture_help.dart @@ -0,0 +1,157 @@ +import 'package:flutter/material.dart'; +import 'package:toggle_switch/toggle_switch.dart'; + +class GestureIcons { + static const String _family = 'gestureicons'; + + GestureIcons._(); + + static const IconData icon_mouse = IconData(0xe65c, fontFamily: _family); + static const IconData icon_Tablet_Touch = + IconData(0xe9ce, fontFamily: _family); + static const IconData icon_gesture_f_drag = + IconData(0xe686, fontFamily: _family); + static const IconData icon_Mobile_Touch = + IconData(0xe9cd, fontFamily: _family); + static const IconData icon_gesture_press = + IconData(0xe66c, fontFamily: _family); + static const IconData icon_gesture_tap = + IconData(0xe66f, fontFamily: _family); + static const IconData icon_gesture_pinch = + IconData(0xe66a, fontFamily: _family); + static const IconData icon_gesture_press_hold = + IconData(0xe66b, fontFamily: _family); + static const IconData icon_gesture_f_drag_up_down_ = + IconData(0xe685, fontFamily: _family); + static const IconData icon_gesture_f_tap_ = + IconData(0xe68e, fontFamily: _family); + static const IconData icon_gesture_f_swipe_right = + IconData(0xe68f, fontFamily: _family); + static const IconData icon_gesture_f_double_tap = + IconData(0xe691, fontFamily: _family); +} + +class GestureHelp extends StatefulWidget { + GestureHelp({Key? key}) : super(key: key); + + @override + State createState() => _GestureHelpState(); +} + +class _GestureHelpState extends State { + var _selectedIndex = 0; + var _touchMode = false; + + @override + Widget build(BuildContext context) { + return Center( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ToggleSwitch( + initialLabelIndex: _selectedIndex, + totalSwitches: 2, + minWidth: 130, + fontSize: 15, + iconSize: 20, + labels: ["触摸板模式", "触屏模式"], + icons: [ + GestureIcons.icon_mouse, + GestureIcons.icon_Tablet_Touch + ], + onToggle: (index) { + debugPrint(index.toString()); + setState(() { + _touchMode = index == 0 ? false : true; + _selectedIndex = index ?? 0; + }); + }, + ), + const SizedBox(height: 15), + Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: _touchMode + ? const [ + GestureInfo( + GestureIcons.icon_Mobile_Touch, "单指轻触", "点击对应位置"), + GestureInfo(GestureIcons.icon_gesture_press_hold, + "单指长按", "鼠标右键"), + GestureInfo(GestureIcons.icon_gesture_f_swipe_right, + "单指移动", "鼠标选中拖动"), + GestureInfo(GestureIcons.icon_gesture_f_drag_up_down_, + "双指垂直滑动", "鼠标滚轮"), + GestureInfo( + GestureIcons.icon_gesture_f_drag, "双指移动", "移动画布"), + GestureInfo( + GestureIcons.icon_gesture_pinch, "双指缩放", "缩放画布"), + ] + : const [ + GestureInfo( + GestureIcons.icon_gesture_tap, "单指轻触", "鼠标左键"), + GestureInfo( + GestureIcons.icon_gesture_f_tap_, "双指轻触", "鼠标右键"), + GestureInfo(GestureIcons.icon_gesture_f_swipe_right, + "双击并移动", "鼠标选中拖动"), + GestureInfo(GestureIcons.icon_gesture_f_drag_up_down_, + "双指垂直滑动", "鼠标滚轮"), + GestureInfo( + GestureIcons.icon_gesture_f_drag, "双指移动", "移动画布"), + GestureInfo( + GestureIcons.icon_gesture_pinch, "双指缩放", "缩放画布"), + ], + ), + ], + ))); + } +} + +class GestureInfo extends StatelessWidget { + const GestureInfo(this.icon, this.fromText, this.toText, {Key? key}) + : super(key: key); + + final String fromText; + final String toText; + final IconData icon; + + final textSize = 15.0; + final textColor = Colors.blue; + final iconSize = 35.0; + final iconColor = Colors.black54; + + @override + Widget build(BuildContext context) { + return SizedBox( + width: 280, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 5), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Icon( + icon, + size: iconSize, + color: iconColor, + )), + Row( + children: [ + Text(fromText, + style: TextStyle(fontSize: textSize, color: textColor)), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 5), + child: Icon(Icons.arrow_forward_rounded, + size: 20, color: iconColor)), + Text(toText, + style: TextStyle(fontSize: textSize, color: textColor)) + ], + ) + ], + ))); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index eca19df92..7d8a9ef70 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -44,6 +44,7 @@ dependencies: package_info: ^2.0.2 url_launcher: ^6.0.9 shared_preferences: ^2.0.6 + toggle_switch: ^1.4.0 dev_dependencies: flutter_launcher_icons: ^0.9.1 @@ -71,6 +72,11 @@ flutter: assets: - assets/ + fonts: + - family: GestureIcons + fonts: + - asset: assets/gestures.ttf + # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware.