300 lines
10 KiB
Dart
300 lines
10 KiB
Dart
// 触屏手柄布局编辑器：独立全屏页，从「设置 → 自定义按键」进入。
|
|
// 背景保持透明，透出下面的实时游戏画布（标题星空 + 刺地带动画），
|
|
// 编辑体验与正常玩游戏时完全一致（同样的全屏沉浸、同样的按钮渲染）。
|
|
//
|
|
// 布局即改即存（每次拖动/缩放都写回存档），返回时无需再点「确定」。
|
|
// 位置/大小与真实手柄同一套换算（cx/cy 百分比 + size×k），所见即所得。
|
|
import 'package:flutter/material.dart';
|
|
import 'package:iwbtc/src/core/save.dart' show Save;
|
|
import 'package:iwbtc/src/game/world.dart' show W;
|
|
import 'package:iwbtc/src/ui/touch_layout.dart'
|
|
show BUTTONS, TouchBtn, metaSettings;
|
|
|
|
/// 读取某按键当前布局（cx/cy/size）。
|
|
Map<String, double> touchLayoutOf(String key) {
|
|
final t = metaSettings()['touch'] as Map;
|
|
final m = (t[key] as Map?) ?? const <String, dynamic>{};
|
|
return <String, double>{
|
|
'cx': double.tryParse(m['cx'].toString()) ?? 50,
|
|
'cy': double.tryParse(m['cy'].toString()) ?? 50,
|
|
'size': double.tryParse(m['size'].toString()) ?? 60,
|
|
};
|
|
}
|
|
|
|
void writeTouchLayout(String key, Map<String, double> p) {
|
|
(metaSettings()['touch'] as Map)[key] = <String, dynamic>{
|
|
'cx': p['cx'],
|
|
'cy': p['cy'],
|
|
'size': p['size'],
|
|
};
|
|
// 即改即存：布局写回存档，返回/切后台都不会丢。
|
|
Save.flush();
|
|
}
|
|
|
|
class TouchLayoutEditor extends StatefulWidget {
|
|
final VoidCallback onDone; // 仅负责返回设置页（布局已即改即存）
|
|
const TouchLayoutEditor({super.key, required this.onDone});
|
|
@override
|
|
State<TouchLayoutEditor> createState() => _TouchLayoutEditorState();
|
|
}
|
|
|
|
class _TouchLayoutEditorState extends State<TouchLayoutEditor> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// 背景保持透明：透出下面的实时游戏画布（标题星空+刺地），
|
|
// 编辑体验与正常游戏完全一致（全屏沉浸）。
|
|
return Stack(
|
|
children: <Widget>[
|
|
// 按钮编辑层（铺满全屏，与真实手柄同一坐标系）
|
|
Positioned.fill(
|
|
child: LayoutBuilder(
|
|
builder: (BuildContext _, BoxConstraints cons) {
|
|
final double w = cons.maxWidth;
|
|
final double h = cons.maxHeight;
|
|
// 与 _TouchButton 完全一致的缩放系数，保证编辑所见 = 游戏所得
|
|
final double k = (w / W).clamp(0.6, 2.6);
|
|
return Stack(
|
|
children: <Widget>[
|
|
for (final b in BUTTONS) ...<Widget>[
|
|
_EditBtn(
|
|
b: b,
|
|
k: k,
|
|
screenW: w,
|
|
screenH: h,
|
|
onChanged: () => setState(() {}),
|
|
),
|
|
_ResizeHandle(
|
|
b: b,
|
|
k: k,
|
|
screenW: w,
|
|
screenH: h,
|
|
onChanged: () => setState(() {}),
|
|
),
|
|
],
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
// 顶部操作行：恢复默认 / 返回
|
|
Positioned(
|
|
top: 10,
|
|
right: 12,
|
|
child: Row(
|
|
children: <Widget>[
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
final t = metaSettings()['touch'] as Map;
|
|
t.clear();
|
|
for (final b in BUTTONS) {
|
|
t[b.key] = <String, dynamic>{
|
|
'cx': b.cx,
|
|
'cy': b.cy,
|
|
'size': b.size,
|
|
};
|
|
}
|
|
Save.flush();
|
|
setState(() {});
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: const Color(0x991a1a26),
|
|
foregroundColor: const Color(0xffffffff),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 12,
|
|
vertical: 6,
|
|
),
|
|
minimumSize: Size.zero,
|
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
visualDensity: VisualDensity.compact,
|
|
),
|
|
child: const Text('恢复默认', style: TextStyle(fontSize: 13)),
|
|
),
|
|
const SizedBox(width: 8),
|
|
ElevatedButton(
|
|
onPressed: widget.onDone,
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: const Color(0x995a3a7a),
|
|
foregroundColor: const Color(0xffffffff),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 14,
|
|
vertical: 6,
|
|
),
|
|
minimumSize: Size.zero,
|
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
visualDensity: VisualDensity.compact,
|
|
),
|
|
child: const Text('返回', style: TextStyle(fontSize: 13)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// 底部提示
|
|
const Positioned(
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 8,
|
|
child: Center(
|
|
child: Text(
|
|
'点选按钮后可拖动位置 · 拖右下角黄点调整大小（改动即时保存）',
|
|
style: TextStyle(color: Color(0x88ffffff), fontSize: 12),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _EditBtn extends StatefulWidget {
|
|
final TouchBtn b;
|
|
final double k; // 真实手柄同款缩放系数
|
|
final double screenW;
|
|
final double screenH;
|
|
final VoidCallback onChanged;
|
|
const _EditBtn({
|
|
required this.b,
|
|
required this.k,
|
|
required this.screenW,
|
|
required this.screenH,
|
|
required this.onChanged,
|
|
});
|
|
@override
|
|
State<_EditBtn> createState() => _EditBtnState();
|
|
}
|
|
|
|
class _EditBtnState extends State<_EditBtn> {
|
|
bool _selected = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final p = touchLayoutOf(widget.b.key);
|
|
final double sz = p['size']! * widget.k;
|
|
final double left = p['cx']! / 100 * widget.screenW - sz / 2;
|
|
final double top = p['cy']! / 100 * widget.screenH - sz / 2;
|
|
final isJump = widget.b.shape == 'jump';
|
|
return Positioned(
|
|
left: left,
|
|
top: top,
|
|
width: sz,
|
|
height: sz,
|
|
child: GestureDetector(
|
|
behavior: HitTestBehavior.opaque,
|
|
onTap: () => setState(() => _selected = !_selected),
|
|
onPanStart: (_) => setState(() => _selected = true),
|
|
onPanUpdate: (d) {
|
|
final np = touchLayoutOf(widget.b.key);
|
|
np['cx'] = (np['cx']! + d.delta.dx / widget.screenW * 100).clamp(
|
|
3.0,
|
|
97.0,
|
|
);
|
|
np['cy'] = (np['cy']! + d.delta.dy / widget.screenH * 100).clamp(
|
|
4.0,
|
|
96.0,
|
|
);
|
|
writeTouchLayout(widget.b.key, np);
|
|
widget.onChanged();
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: _selected
|
|
? const Color(0x88ffffff)
|
|
: const Color(0x444a5a7a),
|
|
shape: isJump ? BoxShape.circle : BoxShape.rectangle,
|
|
borderRadius: isJump ? null : BorderRadius.circular(sz * 0.3),
|
|
border: Border.all(
|
|
color: _selected
|
|
? const Color(0xffffd23a)
|
|
: const Color(0xff7ae0ff),
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
Text(
|
|
widget.b.label,
|
|
style: TextStyle(
|
|
color: const Color(0xffffffff),
|
|
fontSize: sz * 0.3,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
if (widget.b.label2 != null)
|
|
Text(
|
|
widget.b.label2!,
|
|
style: TextStyle(
|
|
color: const Color(0xffcfe8ff),
|
|
fontSize: sz * 0.15,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 缩放手柄：选中按钮后显示在其右下角的小黄点，拖动改变按钮大小。
|
|
/// 单独一层 Positioned（在按钮之后 = 绘制在上层），不吃按钮本体的手势。
|
|
class _ResizeHandle extends StatefulWidget {
|
|
final TouchBtn b;
|
|
final double k;
|
|
final double screenW;
|
|
final double screenH;
|
|
final VoidCallback onChanged;
|
|
const _ResizeHandle({
|
|
required this.b,
|
|
required this.k,
|
|
required this.screenW,
|
|
required this.screenH,
|
|
required this.onChanged,
|
|
});
|
|
@override
|
|
State<_ResizeHandle> createState() => _ResizeHandleState();
|
|
}
|
|
|
|
class _ResizeHandleState extends State<_ResizeHandle> {
|
|
bool _active = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final p = touchLayoutOf(widget.b.key);
|
|
final double sz = p['size']! * widget.k;
|
|
final double left = p['cx']! / 100 * widget.screenW + sz / 2 - 14;
|
|
final double top = p['cy']! / 100 * widget.screenH + sz / 2 - 14;
|
|
return Positioned(
|
|
left: left,
|
|
top: top,
|
|
width: 26,
|
|
height: 26,
|
|
child: GestureDetector(
|
|
behavior: HitTestBehavior.opaque,
|
|
onPanStart: (_) => setState(() => _active = true),
|
|
onPanEnd: (_) => setState(() => _active = false),
|
|
onPanCancel: () => setState(() => _active = false),
|
|
onPanUpdate: (d) {
|
|
final np = touchLayoutOf(widget.b.key);
|
|
// 向右/向下拖 = 变大，换算回虚拟 size 单位
|
|
final double dSize = (d.delta.dx + d.delta.dy) / widget.k;
|
|
np['size'] = (np['size']! + dSize).clamp(30.0, 180.0);
|
|
writeTouchLayout(widget.b.key, np);
|
|
widget.onChanged();
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: _active ? const Color(0xffffd23a) : const Color(0xccffd23a),
|
|
shape: BoxShape.circle,
|
|
border: Border.all(color: const Color(0xff2a2a3a), width: 1.5),
|
|
),
|
|
child: const Center(
|
|
child: Icon(Icons.open_in_full, size: 14, color: Colors.black87),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|