qhd-prevention-flutter/lib/pages/home/risk/risk_detail_page.dart

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

import '../../../tools/h_colors.dart';

class RiskDetailPage extends StatefulWidget {
  const RiskDetailPage({super.key, required this.itemData});

  final dynamic itemData;

  @override
  State<RiskDetailPage> createState() => _RiskDetailPageState();
}

class _RiskDetailPageState extends State<RiskDetailPage> {
  final List<Map<String, dynamic>> _dataInfos = [
    {
      "title": "存在风险",
      "detail": ["测试", "测试去外地恰逢其会发起违反去和我i回复IQ请勿凤求凰IQ佛ifi哦好气哦hi哦发i哦前期我放弃"],
    },
    {
      "title": "主要管控措施",
      "detail": ["测试去外地恰逢其会发起违反去和我i回复IQ请勿凤求凰IQ佛ifi哦好气哦hi哦发i哦前期我放"],
    },
    {
      "title": "管控部门",
      "detail": ["哈哈"],
    },
    {
      "title": "事故类型",
      "detail": ["物体打击，车辆伤害"],
    },
  ];

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppbar(title: "风险分布-详情"),
      body: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            // 设置底部最小高度，要预留出来
            const double bottomAreaHeight = 100;
            final double maxCardHeight =
                constraints.maxHeight - bottomAreaHeight;

            return Column(
              children: [
                // 卡片区：最大高度受限
                Padding(
                  padding: const EdgeInsets.all(15),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(maxHeight: maxCardHeight),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(5),
                        boxShadow: [/* ... */],
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          _buildHeader(),
                          const Divider(
                            height: .5,
                            thickness: .5,
                            color: Colors.grey,
                          ),

                          // ★ 这个 Flexible 包裹 SingleChildScrollView ★
                          Flexible(
                            fit: FlexFit.loose,
                            child: SingleChildScrollView(
                              padding: const EdgeInsets.symmetric(vertical: 10),
                              physics: const ClampingScrollPhysics(),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: _dataInfos.map(_itemCell).toList(),
                              ),
                            ),
                          ),

                          const Divider(
                            height: .5,
                            thickness: .5,
                            color: Colors.grey,
                          ),
                          _buildFooter(),
                        ],
                      ),
                    ),
                  ),
                ),
                Spacer(),
                // 底部按钮固定
                _buildBottomButton(),
              ],
            );
          },
        ),
      ),
    );
  }

  // 头部信息组件
  Widget _buildHeader() {
    return Padding(
      padding: const EdgeInsets.all(15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text(
            "风险点位",
            style: TextStyle(fontSize: 16, color: Colors.black54),
          ),
          Text(
            widget.itemData?['location'] ?? "未知地区",
            style: const TextStyle(fontSize: 16, color: Colors.black54),
          ),
        ],
      ),
    );
  }

  // 风险等级标签
  Widget _buildFooter() {
    return Padding(
      padding: const EdgeInsets.all(15),
      child: Row(
        children: [
          Container(
            margin: const EdgeInsets.only(bottom: 8),
            padding: const EdgeInsets.all(5),
            decoration: BoxDecoration(
              color: const Color(0xFFFADBD9),
              borderRadius: BorderRadius.circular(2),
            ),
            child: Text(
              "风险等级",
              style: TextStyle(color: const Color(0xFFE54D42)),
            ),
          ),
          const Spacer(),
        ],
      ),
    );
  }

  // 底部按钮
  Widget _buildBottomButton() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
      child: SizedBox(
        width: double.infinity,
        height: 50,
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            elevation: 3,
          ),
          onPressed: () {
            // 按钮点击事件
          },
          child: const Text(
            "提交位置",
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }

  // 单项信息组件
  Widget _itemCell(Map<String, dynamic> item) {
    final details = item["detail"] as List<String>;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题行
          Row(
            children: [
              Container(
                width: 4,
                height: 16,
                decoration: BoxDecoration(
                  color: Colors.black38,
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              const SizedBox(width: 5),
              Text(
                item["title"],
                style: const TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          // 内容区域
          ...details.map((text) => _textItem(text, false)).toList(),
        ],
      ),
    );
  }

  // 文本项组件
  Widget _textItem(String text, bool isInfinity) {
    return Container(
      width: isInfinity ? double.infinity : null,
      margin: const EdgeInsets.only(bottom: 8),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: h_backGroundColor(),
        borderRadius: BorderRadius.circular(6),
      ),
      child: Text(
        text,
        style: const TextStyle(
          fontSize: 14,
          color: Colors.black87,
          height: 1.5,
        ),
      ),
    );
  }
}