静态页面补充
This commit is contained in:
@@ -1,26 +1,284 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:getx_scaffold/getx_scaffold.dart';
|
||||
import 'package:get/get.dart';
|
||||
// import 'package:getx_scaffold/getx_scaffold.dart'; // 如果不使用其中的扩展，可以注释掉
|
||||
|
||||
import 'controller.dart';
|
||||
|
||||
class CarInfoPage extends GetView<CarInfoController> {
|
||||
const CarInfoPage({super.key});
|
||||
|
||||
// 主视图
|
||||
Widget _buildView() {
|
||||
return <Widget>[
|
||||
TextX.titleLarge('车辆信息'),
|
||||
].toColumn(mainAxisSize: MainAxisSize.min).center();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GetBuilder<CarInfoController>(
|
||||
init: CarInfoController(),
|
||||
id: 'car_info',
|
||||
builder: (_) {
|
||||
return _buildView();
|
||||
// 将所有 UI 构建逻辑都放在这里
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.grey[100],
|
||||
// 我们不再使用单独的 AppBar，而是通过自定义的 Container 来实现类似效果
|
||||
body: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_buildDriverInfoCard(),
|
||||
const SizedBox(height: 12),
|
||||
_buildCarBindingCard(),
|
||||
const SizedBox(height: 12),
|
||||
_buildCertificatesCard(),
|
||||
const SizedBox(height: 12),
|
||||
_buildTipsCard(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/// 1. 构建顶部的司机信息卡片（包含蓝色背景）
|
||||
Widget _buildDriverInfoCard() {
|
||||
return Card(
|
||||
elevation: 4,
|
||||
margin: EdgeInsets.zero, // Card 在蓝色背景内，不需要外边距
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
const CircleAvatar(
|
||||
radius: 28,
|
||||
backgroundColor: Colors.blue,
|
||||
child: Icon(Icons.person, color: Colors.white, size: 36),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text(
|
||||
'王小龙',
|
||||
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
const Text(
|
||||
'15888332828',
|
||||
style: TextStyle(color: Colors.grey, fontSize: 14),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.blue[50],
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: Colors.blue, width: 0.5),
|
||||
),
|
||||
child: const Row(
|
||||
children: [
|
||||
Icon(Icons.shield_outlined, color: Colors.blue, size: 14),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
'已认证',
|
||||
style: TextStyle(
|
||||
color: Colors.blue,
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(height: 1, indent: 16, endIndent: 16),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
_buildStatItem('156', '服务天数'),
|
||||
_buildStatItem('4.9', '评分'),
|
||||
_buildStatItem('98%', '准时率'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 司机信息卡片中的小统计项
|
||||
Widget _buildStatItem(String value, String label) {
|
||||
return Column(
|
||||
children: [
|
||||
Text(
|
||||
value,
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.blue,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(label, style: const TextStyle(color: Colors.grey, fontSize: 12)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// 2. 构建车辆绑定信息卡片
|
||||
Widget _buildCarBindingCard() {
|
||||
return Card(
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
_buildInfoRow('车牌号:', '扫码绑定'),
|
||||
const SizedBox(height: 12),
|
||||
_buildInfoRow('车架号:', '未知'),
|
||||
const SizedBox(height: 12),
|
||||
_buildInfoRow('车辆型号:', '未知'),
|
||||
const SizedBox(height: 12),
|
||||
_buildInfoRow('车辆品牌:', '未知'),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
// 您图片中的图标类似储氢罐，这里用一个相近的图标代替
|
||||
Icon(
|
||||
Icons.propane_tank_outlined,
|
||||
size: 80,
|
||||
color: Colors.blue.withOpacity(0.5),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 车辆绑定卡片中的信息行
|
||||
Widget _buildInfoRow(String label, String value) {
|
||||
bool isButton = value == '扫码绑定';
|
||||
return Row(
|
||||
children: [
|
||||
Text(label, style: const TextStyle(color: Colors.grey, fontSize: 14)),
|
||||
const SizedBox(width: 8),
|
||||
isButton
|
||||
? ElevatedButton.icon(
|
||||
onPressed: () {
|
||||
// TODO: 实现扫码绑定逻辑
|
||||
},
|
||||
icon: const Icon(Icons.qr_code_scanner, size: 16),
|
||||
label: Text(value),
|
||||
style: ElevatedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||
),
|
||||
)
|
||||
: Text(
|
||||
value,
|
||||
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// 3. 构建车辆证件卡片
|
||||
Widget _buildCertificatesCard() {
|
||||
return Card(
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text(
|
||||
'车辆证件',
|
||||
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_buildCertificateRow(Icons.local_gas_station, '驾驶证', '车辆驾驶证相关证件'),
|
||||
const Divider(),
|
||||
_buildCertificateRow(Icons.article_outlined, '营运证', '道路运输经营许可证'),
|
||||
const Divider(),
|
||||
_buildCertificateRow(Icons.person_pin_outlined, '加氢证', '车辆加氢许可证'),
|
||||
const Divider(),
|
||||
_buildCertificateRow(Icons.credit_card_outlined, '行驶证', '车辆行驶证相关证件'),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 车辆证件列表项
|
||||
Widget _buildCertificateRow(IconData icon, String title, String subtitle) {
|
||||
return ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
leading: CircleAvatar(
|
||||
radius: 24,
|
||||
backgroundColor: Colors.blue.withOpacity(0.1),
|
||||
child: Icon(icon, color: Colors.blue, size: 28),
|
||||
),
|
||||
title: Text(title, style: const TextStyle(fontWeight: FontWeight.bold)),
|
||||
subtitle: Text(subtitle, style: const TextStyle(color: Colors.grey, fontSize: 12)),
|
||||
trailing: Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[200],
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
// 图片中的图标是“查看”的意思，这里用一个类似的图标代替
|
||||
child: const Icon(Icons.find_in_page_outlined, color: Colors.black54),
|
||||
),
|
||||
onTap: () {
|
||||
// TODO: 查看证件详情逻辑
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/// 4. 构建提示信息卡片
|
||||
Widget _buildTipsCard() {
|
||||
return Card(
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildTipItem(Icons.info_outline, '请确保车辆证件齐全有效'),
|
||||
const SizedBox(height: 10),
|
||||
_buildTipItem(Icons.rule, '定期检查车辆状态和证件有效期'),
|
||||
const SizedBox(height: 10),
|
||||
_buildTipItem(Icons.headset_mic_outlined, '如有疑问请联系客服: 400-123-4567'),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 提示信息卡片中的列表项
|
||||
Widget _buildTipItem(IconData icon, String text) {
|
||||
return Row(
|
||||
children: [
|
||||
Icon(icon, color: Colors.blue, size: 20),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(text, style: const TextStyle(fontSize: 12, color: Colors.black54)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user