棉花app新增页面
This commit is contained in:
czz
228
lib/pages/device_control/BackMovement.dart
Normal file
228
lib/pages/device_control/BackMovement.dart
Normal file
@@ -0,0 +1,228 @@
|
||||
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: 20.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('恢复到默认设置'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)));
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user