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

import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../data/bean/widget_location.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 Widget? topTitleWidget;

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

  /// 内容组件
  final Widget contentWidget;

  /// 顶部图标组件的位置信息
  final WidgetLocation? topIconWidgetLocation;

  const StepCard({
    super.key,
    required this.bgImageProvider,
    this.topTitleWidget,
    required this.contentWidget,
    this.topIconWidget,
    this.topIconWidgetLocation,
  });

  @override
  Widget build(BuildContext context) {
    var topIconWidgetLocation =
        this.topIconWidgetLocation ?? WidgetLocation(null, -11.h, 0, null);
    return Container(
      margin: EdgeInsets.only(left: 12.w, top: 10.h, right: 12.w),
      child: Stack(
        // 不裁切超出区域的子组件，例如下面的顶部的图标
        clipBehavior: Clip.none,
        children: [
          // 顶部的图标
          topIconWidget == null
              ? SizedBox()
              : Positioned(
                left: topIconWidgetLocation.left,
                top: topIconWidgetLocation.top,
                right: topIconWidgetLocation.right,
                bottom: topIconWidgetLocation.bottom,
                child: topIconWidget!,
              ),
          // 卡片背景
          Container(
            // 渐变背景
            // decoration: BoxDecoration(
            //   gradient: LinearGradient(
            //     colors: [Color(0xFFEFE9FF), Color(0xFFFBFAFF)],
            //     begin: Alignment.topCenter,
            //     end: Alignment.bottomRight,
            //   ),
            //   shape: BoxShape.rectangle,
            //   border: Border.all(color: ColorName.white80, width: 1.w),
            //   borderRadius: BorderRadius.all(Radius.circular(20.r)),
            // ),
            // 卡片背景
            decoration: BoxDecoration(
              image: DecorationImage(image: bgImageProvider, fit: BoxFit.fill),
            ),
            child: Column(
              // 左对齐
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 顶部标题区域
                topTitleWidget != null ? topTitleWidget! : SizedBox(),
                // 内容区域
                contentWidget,
                SizedBox(height: 12.h),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// 步骤标题组件
class StepTitleWidget extends StatelessWidget {
  /// 步骤标签
  final String stepLabel;

  /// 步骤标题
  final String stepTitle;

  /// 步骤描述
  final String stepDesc;

  const StepTitleWidget({
    super.key,
    this.stepLabel = "",
    this.stepTitle = "",
    this.stepDesc = "",
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 步骤标题
        Container(
          margin: EdgeInsets.only(top: 16.h, bottom: 4.h),
          child: _buildStepTitle(),
        ),
        // 步骤描述
        stepDesc.isNotEmpty ? _buildStepDesc(stepDesc) : SizedBox(height: 6.h),
      ],
    );
  }

  /// 步骤标题
  Widget _buildStepTitle() {
    return Container(
      padding: EdgeInsets.only(left: 12.w),
      child: Row(
        children: [
          // 步骤标签
          Visibility(
            visible: stepLabel.isNotEmpty,
            child: Container(
              margin: EdgeInsets.only(right: 10.w),
              child: StepLabelWidget(label: stepLabel),
            ),
          ),
          // 标题
          GradientText(
            // 渐变颜色
            colors: [ColorName.stepTitleColor1, ColorName.stepTitleColor2],
            child: Text(
              stepTitle,
              style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.w700),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建步骤描述
  Widget _buildStepDesc(String desc) {
    if (desc.isEmpty) {
      return SizedBox();
    }
    return Row(
      children: [
        Expanded(
          child: Container(
            margin: EdgeInsets.only(left: 12.w, right: 12.w),
            child: Text(
              desc,
              // 超过时显示省略号
              overflow: TextOverflow.ellipsis,
              // 最多多少行
              maxLines: 1,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: FontWeight.w400,
                color: ColorName.black60,
              ),
            ),
          ),
        ),
        SizedBox(height: 16.h),
      ],
    );
  }
}