qhd-prevention-flutter/lib/pages/home/work/danger_project_page.dart

import 'package:flutter/material.dart';
import 'package:qhd_prevention/tools/h_colors.dart';
import 'package:qhd_prevention/tools/tools.dart';
import 'package:qhd_prevention/pages/my_appbar.dart';

class DangerProjectPage extends StatefulWidget {
  const DangerProjectPage({super.key});

  @override
  State<DangerProjectPage> createState() => _DangerProjectPageState();
}

class _DangerProjectPageState extends State<DangerProjectPage> {
  // 单选按钮的值
  String? _selectedValue;

  // 单选按钮选项
  final List<Map<String, dynamic>> _options = [
    {
      "value": "option1",
      "label": "合格",
      "icon": Icons.check_circle_rounded,
      "color": Colors.green,
    },
    {
      "value": "option2",
      "label": "不合格",
      "icon": Icons.check_circle_rounded,
      "color": Colors.green,
    },
    {
      "value": "option3",
      "label": "不涉及",
      "icon": Icons.check_circle_rounded,
      "color": Colors.green,
    },
  ];

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      backgroundColor: h_backGroundColor(),
      appBar: MyAppbar(title: "隐患排除项"),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 内容卡片
              Card(
                color: Colors.white,
                child: Container(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 问题描述
                      Text(
                        "存在风险：1、罐体破损、变形、锈蚀等；2、附件安装不正确、不牢固；3、铭牌模糊无法识别；4、压力表不灵敏、不准确；5、报警装置故障失效；6、阀门锈蚀、泄露；7、洗眼器、防毒面具等应急设备缺失、过期。检查内容：1、定期检查獬体倩况，如发现破损、变形、锈蚀等情况及时进行维修；2、严格按照系统设计进行安装附件，确保附件安装牢固；3、及时清理铭牌上的异物，确保铭牌清晰可辨：4、定期检查压力表，确保压力表灵敏有效；5、定期检查报警装置，确保报警装置齐全有效；6、按时对阀门进行养护及定时检查紧固，及时更换阀门填料，操作时注意观察压帽是否随阀轴转动；7、定期检查应急设备，确保应急设备齐全有效",
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.grey[700],
                          height: 1.5,
                        ),
                      ),

                      // 单选按钮组
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children:
                            _options.map((option) {
                              return _buildOptionButton(
                                context: context,
                                value: option['value'],
                                label: option['label'],
                                icon: option['icon'],
                                color: option['color'],
                                screenWidth: screenWidth,
                              );
                            }).toList(),
                      ),

                    ],
                  ),
                ),
              ),
              Spacer(),
              // 下一步按钮
              Container(
                margin: const EdgeInsets.only(bottom: 20),
                height: 50,
                decoration: BoxDecoration(
                  color: _selectedValue != null ? Colors.green : Colors.grey,
                  borderRadius: BorderRadius.circular(10),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 6,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: TextButton(
                  onPressed: _selectedValue != null ? _submit : null,
                  child: Text(
                    "提交",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 构建单选按钮
  Widget _buildOptionButton({
    required BuildContext context,
    required String value,
    required String label,
    required IconData icon,
    required Color color,
    required double screenWidth,
  }) {
    final isSelected = _selectedValue == value;
    final buttonWidth = (screenWidth - 60) / 3 - 10; // 计算按钮宽度

    return GestureDetector(
      onTap: () {
        setState(() {
          _selectedValue = value;
        });
      },
      child: Container(
        width: buttonWidth,
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),

        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(icon, color: isSelected ? color : Colors.grey, size: 30),
            const SizedBox(width: 8),
            Text(
              label,
              style: TextStyle(
                fontSize: 16,
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                color: isSelected ? color : Colors.grey[600],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _submit() {
    if (_selectedValue == null) return;

    // 这里可以添加导航到下一页的代码
    // Navigator.push(context, MaterialPageRoute(builder: (_) => NextPage()));
  }
}