87 lines
2.6 KiB
Dart
87 lines
2.6 KiB
Dart
import 'package:flutter/material.dart';
|
||
|
||
class DeviceStatusCard extends StatelessWidget {
|
||
const DeviceStatusCard({super.key});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||
padding: const EdgeInsets.all(20),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(28),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// 设备图片/占位
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(16), // 保持和原代码一致的圆角
|
||
child: Transform.translate(
|
||
offset: const Offset(10, 0), // 向左偏移10像素，Y轴不变
|
||
child: Image.asset(
|
||
'assets/images/car.png',
|
||
width: 120,
|
||
height: 80,
|
||
fit: BoxFit.cover, // 确保图片填满80x80的区域
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 16),
|
||
// 信息区
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
const Text(
|
||
'未知设备',
|
||
style: TextStyle(
|
||
fontSize: 20,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
Icon(Icons.swap_horiz, color: Colors.grey[400]),
|
||
],
|
||
),
|
||
const SizedBox(height: 8),
|
||
Row(
|
||
children: [
|
||
_buildTag('离线', Colors.grey[400]!),
|
||
const Spacer(),
|
||
const Icon(Icons.battery_3_bar_rounded, size: 18),
|
||
const Text(
|
||
' 0%',
|
||
style: TextStyle(fontWeight: FontWeight.w500),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildTag(String text, Color color) {
|
||
return Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
color: color.withOpacity(0.2),
|
||
borderRadius: BorderRadius.circular(20),
|
||
),
|
||
child: Text(
|
||
text,
|
||
style: TextStyle(
|
||
color: color,
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|