add gesture help widget

This commit is contained in:
csf 2022-02-23 21:16:30 +08:00
parent 6840052033
commit 1a0162a581
3 changed files with 163 additions and 0 deletions

BIN
assets/gestures.ttf Normal file

Binary file not shown.

View File

@ -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<StatefulWidget> createState() => _GestureHelpState();
}
class _GestureHelpState extends State<GestureHelp> {
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: <Widget>[
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))
],
)
],
)));
}
}

View File

@ -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.