修改选择器样式
This commit is contained in:
czz
352
lib/pages/mh_page/MattressControl.dart
Normal file
352
lib/pages/mh_page/MattressControl.dart
Normal file
@@ -0,0 +1,352 @@
|
||||
import 'package:ef/ef.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
import 'package:flutter_switch/flutter_switch.dart';
|
||||
import 'package:vbvs_app/common/util/FitTool.dart';
|
||||
import 'package:vbvs_app/common/util/MyUtils.dart';
|
||||
import 'package:vbvs_app/component/tool/ClickableContainer.dart';
|
||||
|
||||
class MattressControlPage extends StatefulWidget {
|
||||
const MattressControlPage({super.key});
|
||||
|
||||
@override
|
||||
State<MattressControlPage> createState() => _MattressControlPageState();
|
||||
}
|
||||
|
||||
class _MattressControlPageState extends State<MattressControlPage> {
|
||||
final controller = Get.put(ControlCardController());
|
||||
|
||||
int selectedIndex = 1; // 当前选中的tab索引
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, bodySize) => GestureDetector(
|
||||
onTap: () => FocusScope.of(context).unfocus(),
|
||||
child: Container(
|
||||
decoration: const BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image:
|
||||
AssetImage('assets/images/new_background.png'), // 本地图片
|
||||
fit: BoxFit.fill, // 填满整个 Container
|
||||
),
|
||||
),
|
||||
child: Scaffold(
|
||||
backgroundColor: Colors.transparent,
|
||||
// 顶部返回 + 设备选择 + 蓝牙图标 + 设置按钮
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
automaticallyImplyLeading: false,
|
||||
titleSpacing: 0,
|
||||
elevation: 0,
|
||||
title: SizedBox(
|
||||
width: double.infinity,
|
||||
height: 180.rpx,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(width: 20.rpx),
|
||||
returnIconButtomNew,
|
||||
SizedBox(width: 26.rpx),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Color(0xFF003058),
|
||||
borderRadius: BorderRadius.circular(30.rpx),
|
||||
),
|
||||
constraints: BoxConstraints(
|
||||
minHeight: 60.rpx,
|
||||
maxHeight: 60.rpx,
|
||||
maxWidth: 260.rpx,
|
||||
minWidth: 260.rpx),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 20.rpx), // 加左右边距
|
||||
child: DropdownButton<String>(
|
||||
value: 'Eason Chan',
|
||||
underline: const SizedBox(),
|
||||
dropdownColor: Colors.blueGrey,
|
||||
iconEnabledColor: Colors.white,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
isExpanded: true,
|
||||
items: const [
|
||||
DropdownMenuItem(
|
||||
value: 'Eason Chan',
|
||||
child: Text('Eason Chan'),
|
||||
),
|
||||
DropdownMenuItem(
|
||||
value: 'Anna',
|
||||
child: Text('Anna'),
|
||||
),
|
||||
],
|
||||
onChanged: (_) {},
|
||||
),
|
||||
),
|
||||
],
|
||||
)),
|
||||
actions: [
|
||||
ClickableContainer(
|
||||
backgroundColor: Colors.transparent,
|
||||
highlightColor: Colors.transparent,
|
||||
padding: EdgeInsets.only(right: 69.rpx),
|
||||
onTap: () {},
|
||||
child: Icon(
|
||||
Icons.bluetooth,
|
||||
color: Colors.white,
|
||||
size: 42.rpx,
|
||||
),
|
||||
),
|
||||
ClickableContainer(
|
||||
backgroundColor: Colors.transparent,
|
||||
highlightColor: Colors.transparent,
|
||||
padding: EdgeInsets.only(right: 38.rpx),
|
||||
onTap: () {
|
||||
Get.toNamed('/bluetoothPage');
|
||||
},
|
||||
child: Icon(Icons.tune,
|
||||
color: Colors.white, size: 42.rpx))
|
||||
],
|
||||
centerTitle: false,
|
||||
),
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_buildBedImageSection(context),
|
||||
_buildModeSelector(context),
|
||||
Expanded(child: _buildControlCards(context)),
|
||||
],
|
||||
),
|
||||
),
|
||||
))));
|
||||
}
|
||||
|
||||
// 床体图示
|
||||
Widget _buildBedImageSection(BuildContext context) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.fromLTRB(0, 38.rpx, 0, 63.rpx),
|
||||
child: Image.asset(
|
||||
'assets/images/bed_control.png',
|
||||
width: MediaQuery.of(context).size.width * 0.7, // 你需要准备这个图像资源
|
||||
height: 193.rpx,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildModeSelector(BuildContext context) {
|
||||
final screenWidth = MediaQuery.of(context).size.width - 60.rpx; // 左右各30
|
||||
final spacing = 20.0.rpx;
|
||||
final thirdWidth = 215.rpx; // 三个卡片两个间距
|
||||
final tabCount = 3;
|
||||
final tabWidth = screenWidth / tabCount;
|
||||
final sideMargin = (tabWidth - thirdWidth) / 2;
|
||||
|
||||
final labels = ['左', '全局', '右'];
|
||||
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 30.rpx),
|
||||
child: Stack(
|
||||
children: [
|
||||
Row(
|
||||
children: List.generate(tabCount, (index) {
|
||||
return Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
selectedIndex = index;
|
||||
},
|
||||
child: _selectorTab(
|
||||
labels[index],
|
||||
isSelected: selectedIndex == index,
|
||||
sideMargin: sideMargin,
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
// 白线指示器
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: selectedIndex * tabWidth + sideMargin,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeInOut,
|
||||
width: thirdWidth,
|
||||
height: 3.rpx,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _selectorTab(String label,
|
||||
{bool isSelected = false, double sideMargin = 0}) {
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: sideMargin),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Center(
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: isSelected ? Colors.white : Colors.grey,
|
||||
fontSize: 30.rpx,
|
||||
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (isSelected) SizedBox(height: 15.rpx), // 保留间距，避免文字和线重叠
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildControlCards(BuildContext context) {
|
||||
final spacing = 20.0.rpx;
|
||||
|
||||
final List<Map<String, dynamic>> allCards = [
|
||||
{'title': '一键助眠', 'time': '30:00'},
|
||||
{'title': '疲劳缓解', 'time': '20:00'},
|
||||
{'title': '全身放松', 'time': '20:00'},
|
||||
{'title': '背部律动', 'time': '10:00'},
|
||||
{'title': '腿部律动', 'time': '30:00'},
|
||||
{'title': '垂直律动', 'time': ''},
|
||||
{'title': '加热', 'time': '30:00'},
|
||||
{'title': '柔性唤醒', 'time': 'PM 08:00'},
|
||||
{'title': '记忆', 'time': ''},
|
||||
];
|
||||
|
||||
final firstRow = allCards.sublist(0, 3);
|
||||
final restCards = allCards.sublist(3);
|
||||
|
||||
// 后续每行两个
|
||||
List<List<Map<String, dynamic>>> chunkedRows = [];
|
||||
for (int i = 0; i < restCards.length; i += 2) {
|
||||
int end = (i + 2 < restCards.length) ? i + 2 : restCards.length;
|
||||
chunkedRows.add(restCards.sublist(i, end));
|
||||
}
|
||||
|
||||
return SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 30.rpx, vertical: 30.rpx),
|
||||
child: Column(
|
||||
children: [
|
||||
// 第一行：三个卡片
|
||||
Row(
|
||||
children: List.generate(firstRow.length * 2 - 1, (index) {
|
||||
if (index.isOdd) {
|
||||
return SizedBox(width: spacing); // 卡片间距
|
||||
} else {
|
||||
final item = firstRow[index ~/ 2];
|
||||
return Expanded(
|
||||
flex: 1,
|
||||
child: _buildControlCard(
|
||||
index ~/ 2,
|
||||
item['title'],
|
||||
item['time'],
|
||||
// null, // 不再使用固定宽度
|
||||
),
|
||||
);
|
||||
}
|
||||
}),
|
||||
),
|
||||
SizedBox(height: spacing),
|
||||
// 其余每行两个卡片
|
||||
...chunkedRows.map((row) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(bottom: spacing),
|
||||
child: Row(
|
||||
children: List.generate(row.length * 2 - 1, (index) {
|
||||
if (index.isOdd) {
|
||||
return SizedBox(width: spacing);
|
||||
} else {
|
||||
final item = row[index ~/ 2];
|
||||
return Expanded(
|
||||
flex: 1,
|
||||
child: _buildControlCard(
|
||||
index ~/ 2,
|
||||
item['title'],
|
||||
item['time'],
|
||||
// null,
|
||||
),
|
||||
);
|
||||
}
|
||||
}),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildControlCard(
|
||||
int index,
|
||||
String title,
|
||||
String time,
|
||||
// double width,
|
||||
) {
|
||||
final controller = Get.find<ControlCardController>();
|
||||
|
||||
return Container(
|
||||
// width: width,
|
||||
height: 241.rpx,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF003058),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: EdgeInsets.all(15.rpx),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
SvgPicture.asset(
|
||||
'assets/img/icon/group.svg',
|
||||
width: 60.rpx,
|
||||
height: 60.rpx,
|
||||
color: Colors.white,
|
||||
),
|
||||
SizedBox(height: 22.rpx),
|
||||
Text(
|
||||
title,
|
||||
style: TextStyle(color: Colors.white, fontSize: 30.rpx),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
time,
|
||||
style: TextStyle(
|
||||
color: const Color(0XFF929699),
|
||||
fontSize: 26.rpx,
|
||||
fontFamily: 'PingFang SC',
|
||||
),
|
||||
),
|
||||
Obx(() => FlutterSwitch(
|
||||
width: 71.rpx,
|
||||
height: 36.rpx,
|
||||
toggleSize: 30.rpx,
|
||||
activeColor: const Color(0XFF6BFDAC),
|
||||
inactiveColor: const Color(0XFF011D33),
|
||||
value: controller.switchStates[index].value,
|
||||
onToggle: (val) {
|
||||
controller.switchStates[index].value = val;
|
||||
},
|
||||
)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ControlCardController extends GetxController {
|
||||
// 共9个卡片，每个卡片有自己的开关状态
|
||||
final List<RxBool> switchStates = List.generate(9, (index) => false.obs);
|
||||
}
|
||||
Reference in New Issue
Block a user