222 lines
8.9 KiB
Dart
222 lines
8.9 KiB
Dart
import 'package:ef/ef.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:vbvs_app/common/util/FitTool.dart';
|
||
import 'dart:math' as math;
|
||
import 'package:vbvs_app/common/util/MyUtils.dart';
|
||
|
||
class BackMovementPage extends StatefulWidget {
|
||
const BackMovementPage({super.key});
|
||
|
||
@override
|
||
State<BackMovementPage> createState() => _BackMovementPageState();
|
||
}
|
||
|
||
class _BackMovementPageState extends State<BackMovementPage> {
|
||
double intensity = 4;
|
||
int selectedTime = 10;
|
||
|
||
final List<int> timeOptions = [10, 20, 30];
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return LayoutBuilder(builder: (context, bodysize) {
|
||
final double totalWidth = bodysize.maxWidth - 40.rpx * 2; // 减去左右 padding
|
||
final double spacing = 34.rpx;
|
||
final double buttonHeight = 101.rpx;
|
||
return GestureDetector(
|
||
// onTap: () => FocusScope.of(context).unfocus(),,
|
||
child: Container(
|
||
child: Scaffold(
|
||
appBar: AppBar(
|
||
iconTheme: IconThemeData(color: themeController.currentColor.sc3),
|
||
backgroundColor: const Color(0xFF011C33), // 统一背景色
|
||
automaticallyImplyLeading: false,
|
||
titleSpacing: 0,
|
||
title: SizedBox(
|
||
width: double.infinity,
|
||
height: 180.rpx,
|
||
child: Stack(
|
||
alignment: Alignment.center,
|
||
children: [
|
||
// 中间居中的标题
|
||
Text(
|
||
'背部律动',
|
||
textAlign: TextAlign.center,
|
||
style: TextStyle(
|
||
color: Colors.white,
|
||
fontSize: 30.rpx,
|
||
),
|
||
),
|
||
// 左侧图标
|
||
Positioned(
|
||
left: 0.rpx,
|
||
child: returnIconButtomNew(),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
centerTitle: false,
|
||
),
|
||
backgroundColor: const Color(0xFF011C33),
|
||
body: Padding(
|
||
padding: EdgeInsets.fromLTRB(0.rpx, 0, 0.rpx, 0),
|
||
child: Column(
|
||
// crossAxisAlignment: CrossAxisAlignment.center,
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
SingleChildScrollView(
|
||
child: Column(
|
||
children: [
|
||
SizedBox(height: 30.rpx),
|
||
Text(
|
||
'力度调节',
|
||
style: TextStyle(color: Colors.grey, fontSize: 30.rpx),
|
||
),
|
||
SizedBox(height: 148.rpx),
|
||
Text(
|
||
intensity.toInt().toString(),
|
||
style: TextStyle(color: Colors.white, fontSize: 160.rpx),
|
||
),
|
||
SizedBox(height: 41.rpx),
|
||
SizedBox(
|
||
height: 451.rpx, // 外部容器高度固定
|
||
child: Stack(
|
||
children: [
|
||
// 左边的 强/弱 文本
|
||
Positioned(
|
||
left: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
child: SizedBox(
|
||
width: 60.rpx,
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
Text('强',
|
||
style: TextStyle(
|
||
color: Colors.grey, fontSize: 30.rpx)),
|
||
Text('弱',
|
||
style: TextStyle(
|
||
color: Colors.grey, fontSize: 30.rpx)),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
|
||
// 右侧 slider，27.rpx 后居中
|
||
Positioned(
|
||
left: 60.rpx - 27.rpx, // 60 是文字宽度，27 是间隔
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
child: Center(
|
||
child: Transform.rotate(
|
||
angle: -math.pi / 2,
|
||
child: ConstrainedBox(
|
||
constraints: BoxConstraints(
|
||
minHeight: 451.rpx,
|
||
maxHeight: 451.rpx,
|
||
),
|
||
child: SliderTheme(
|
||
data: SliderTheme.of(context).copyWith(
|
||
trackHeight: 60.rpx,
|
||
thumbShape: RoundSliderThumbShape(
|
||
enabledThumbRadius: 45.rpx),
|
||
overlayShape: const RoundSliderOverlayShape(
|
||
overlayRadius: 20),
|
||
),
|
||
child: Slider(
|
||
value: intensity,
|
||
min: 1,
|
||
max: 6,
|
||
divisions: 7,
|
||
activeColor: Colors.cyanAccent,
|
||
inactiveColor: Colors.blue.shade900,
|
||
onChanged: (value) {
|
||
setState(() {
|
||
intensity = value;
|
||
});
|
||
},
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
SizedBox(height: 118.rpx),
|
||
Padding(
|
||
padding: EdgeInsets.only(
|
||
left: 47.rpx), // 👈 控制间隔大小（也可以是 all / symmetric）
|
||
child: Align(
|
||
alignment: Alignment.centerLeft,
|
||
child: Text(
|
||
'按摩定时',
|
||
style:
|
||
TextStyle(color: Colors.white70, fontSize: 30.rpx),
|
||
),
|
||
),
|
||
),
|
||
SizedBox(height: 74.rpx),
|
||
Padding(
|
||
padding: EdgeInsets.fromLTRB(40.rpx, 0, 40.rpx, 0),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: List.generate(timeOptions.length, (index) {
|
||
final min = timeOptions[index];
|
||
final isSelected = selectedTime == min;
|
||
return SizedBox(
|
||
height: buttonHeight,
|
||
child: ElevatedButton(
|
||
onPressed: () {
|
||
setState(() {
|
||
selectedTime = min;
|
||
});
|
||
},
|
||
style: ElevatedButton.styleFrom(
|
||
backgroundColor: isSelected
|
||
? Colors.cyanAccent
|
||
: Colors.blue.shade900,
|
||
foregroundColor:
|
||
isSelected ? Colors.black : Colors.white,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(6),
|
||
),
|
||
),
|
||
child: Text('$min分钟'),
|
||
));
|
||
}),
|
||
)),
|
||
],
|
||
)),
|
||
Padding(
|
||
padding: EdgeInsets.fromLTRB(30.rpx, 0, 30.rpx,
|
||
81.rpx), // 👈 控制上方间隔（也可以用 all / symmetric）
|
||
child: OutlinedButton(
|
||
onPressed: () {
|
||
setState(() {
|
||
intensity = 4;
|
||
selectedTime = 10;
|
||
});
|
||
},
|
||
style: OutlinedButton.styleFrom(
|
||
side: const BorderSide(color: Color(0XFF74DAE5)),
|
||
foregroundColor: Colors.cyanAccent,
|
||
minimumSize: Size(bodysize.maxWidth, 92.rpx),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(6),
|
||
),
|
||
),
|
||
child: const Text('恢复到默认设置'),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
)));
|
||
});
|
||
}
|
||
}
|