AiKeyboard2025/lib/module/intimacy_analyse/widget/step_card.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../resource/colors.gen.dart';
import '../../../widget/gradient_text.dart';
import '../intimacy_analyse_upload/widget/step_label_widget.dart';

/// 步骤卡片，支持设置卡片背景、步骤标题、步骤描述、顶部图标和内容区域
class StepCard extends StatelessWidget {
  /// 卡片背景
  final ImageProvider bgImageProvider;

  /// 步骤标签
  final String? stepLabel;

  /// 步骤标题
  final String stepTitle;

  /// 步骤描述
  final String stepDesc;

  /// 顶部图标
  final Image? topIconWidget;

  /// 内容组件
  final Widget contentWidget;

  const StepCard({
    super.key,
    required this.bgImageProvider,
    required this.stepLabel,
    required this.stepTitle,
    required this.stepDesc,
    required this.contentWidget,
    this.topIconWidget,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 12.w, top: 10.h, right: 12.w),
      child: Stack(
        // 不裁切超出区域的子组件，例如下面的顶部的图标
        clipBehavior: Clip.none,
        children: [
          // 顶部的图标
          topIconWidget == null
              ? SizedBox()
              : Positioned(top: -11.h, right: 0, child: topIconWidget!),
          // 卡片背景
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(image: bgImageProvider, fit: BoxFit.fill),
            ),
            child: Column(
              // 左对齐
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 步骤标题
                Container(
                  margin: EdgeInsets.only(left: 12.w, top: 16.h),
                  child: _buildStepTitle(),
                ),
                SizedBox(height: 4.h),
                // 步骤描述
                _buildStepDesc(stepDesc),
                SizedBox(height: 16.h),
                contentWidget,
                SizedBox(height: 18.h),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 步骤标题
  Widget _buildStepTitle() {
    // 步骤标签
    String stepLabelStr = stepLabel ?? "";
    Widget stepLabelWidget;
    if (stepLabelStr.isBlank == true) {
      stepLabelWidget = SizedBox();
    } else {
      stepLabelWidget = StepLabelWidget(label: stepLabelStr);
    }

    return Row(
      children: [
        // 步骤标签
        stepLabelWidget,
        SizedBox(width: 10.w),
        // 标题
        GradientText(
          // 渐变颜色
          colors: [ColorName.stepTitleColor1, ColorName.stepTitleColor2],
          child: Text(
            stepTitle,
            style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.w700),
          ),
        ),
      ],
    );
  }

  /// 构建步骤描述
  Widget _buildStepDesc(String desc) {
    return Container(
      margin: EdgeInsets.only(left: 12.w),
      child: Text(
        desc,
        style: TextStyle(
          fontSize: 12.sp,
          fontWeight: FontWeight.w400,
          color: ColorName.black60,
        ),
      ),
    );
  }
}