|
@@ -7,58 +7,27 @@ import '../intimacy_analyse_upload/widget/step_label_widget.dart';
|
|
|
/// 步骤卡片,支持设置卡片背景、步骤标题、步骤描述、顶部图标和内容区域
|
|
/// 步骤卡片,支持设置卡片背景、步骤标题、步骤描述、顶部图标和内容区域
|
|
|
class StepCard extends StatelessWidget {
|
|
class StepCard extends StatelessWidget {
|
|
|
/// 卡片背景
|
|
/// 卡片背景
|
|
|
- final ImageProvider? bgImageProvider;
|
|
|
|
|
|
|
+ final ImageProvider bgImageProvider;
|
|
|
|
|
|
|
|
- /// 步骤标签
|
|
|
|
|
- final String? stepLabel;
|
|
|
|
|
-
|
|
|
|
|
- /// 步骤标题
|
|
|
|
|
- final String? stepTitle;
|
|
|
|
|
|
|
+ /// 顶部标题区域的组件
|
|
|
|
|
+ final Widget? topTitleWidget;
|
|
|
|
|
|
|
|
- /// 步骤描述
|
|
|
|
|
- final String? stepDesc;
|
|
|
|
|
-
|
|
|
|
|
- /// 顶部图标
|
|
|
|
|
|
|
+ /// 顶部图标组件
|
|
|
final Image? topIconWidget;
|
|
final Image? topIconWidget;
|
|
|
|
|
|
|
|
/// 内容组件
|
|
/// 内容组件
|
|
|
final Widget contentWidget;
|
|
final Widget contentWidget;
|
|
|
|
|
|
|
|
- /// 是否有步骤
|
|
|
|
|
- final bool hasStep;
|
|
|
|
|
-
|
|
|
|
|
const StepCard({
|
|
const StepCard({
|
|
|
super.key,
|
|
super.key,
|
|
|
- this.bgImageProvider,
|
|
|
|
|
- this.stepLabel,
|
|
|
|
|
- this.stepTitle,
|
|
|
|
|
- this.stepDesc,
|
|
|
|
|
- this.hasStep = true,
|
|
|
|
|
|
|
+ required this.bgImageProvider,
|
|
|
|
|
+ this.topTitleWidget,
|
|
|
required this.contentWidget,
|
|
required this.contentWidget,
|
|
|
this.topIconWidget,
|
|
this.topIconWidget,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
@override
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
Widget build(BuildContext context) {
|
|
|
- BoxDecoration decoration;
|
|
|
|
|
- // 没有背景图,使用渐变背景
|
|
|
|
|
- if (bgImageProvider == null) {
|
|
|
|
|
- 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)),
|
|
|
|
|
- );
|
|
|
|
|
- } else {
|
|
|
|
|
- // 背景图
|
|
|
|
|
- decoration = BoxDecoration(
|
|
|
|
|
- image: DecorationImage(image: bgImageProvider!, fit: BoxFit.fill),
|
|
|
|
|
- );
|
|
|
|
|
- }
|
|
|
|
|
return Container(
|
|
return Container(
|
|
|
margin: EdgeInsets.only(left: 12.w, top: 10.h, right: 12.w),
|
|
margin: EdgeInsets.only(left: 12.w, top: 10.h, right: 12.w),
|
|
|
child: Stack(
|
|
child: Stack(
|
|
@@ -71,12 +40,27 @@ class StepCard extends StatelessWidget {
|
|
|
: Positioned(top: -11.h, right: 0, child: topIconWidget!),
|
|
: Positioned(top: -11.h, right: 0, child: topIconWidget!),
|
|
|
// 卡片背景
|
|
// 卡片背景
|
|
|
Container(
|
|
Container(
|
|
|
- decoration: decoration,
|
|
|
|
|
|
|
+ // 渐变背景
|
|
|
|
|
+ // 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(
|
|
child: Column(
|
|
|
// 左对齐
|
|
// 左对齐
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
children: [
|
|
|
- _buildStepLayout(),
|
|
|
|
|
|
|
+ // 顶部标题区域
|
|
|
|
|
+ topTitleWidget != null ? topTitleWidget! : SizedBox(),
|
|
|
// 内容区域
|
|
// 内容区域
|
|
|
contentWidget,
|
|
contentWidget,
|
|
|
SizedBox(height: 12.h),
|
|
SizedBox(height: 12.h),
|
|
@@ -87,15 +71,29 @@ class StepCard extends StatelessWidget {
|
|
|
),
|
|
),
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- /// 步骤
|
|
|
|
|
- Widget _buildStepLayout() {
|
|
|
|
|
- if (!hasStep) {
|
|
|
|
|
- return SizedBox();
|
|
|
|
|
- }
|
|
|
|
|
|
|
+/// 步骤标题组件
|
|
|
|
|
+class StepTitleWidget extends StatelessWidget {
|
|
|
|
|
+ /// 步骤标签
|
|
|
|
|
+ final String? stepLabel;
|
|
|
|
|
|
|
|
- String stepDescStr = stepDesc ?? "";
|
|
|
|
|
|
|
+ /// 步骤标题
|
|
|
|
|
+ final String? stepTitle;
|
|
|
|
|
+
|
|
|
|
|
+ /// 步骤描述
|
|
|
|
|
+ final String? stepDesc;
|
|
|
|
|
|
|
|
|
|
+ const StepTitleWidget({
|
|
|
|
|
+ super.key,
|
|
|
|
|
+ this.stepLabel,
|
|
|
|
|
+ this.stepTitle,
|
|
|
|
|
+ this.stepDesc,
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ @override
|
|
|
|
|
+ Widget build(BuildContext context) {
|
|
|
|
|
+ String stepDescStr = stepDesc ?? "";
|
|
|
return Column(
|
|
return Column(
|
|
|
children: [
|
|
children: [
|
|
|
// 步骤标题
|
|
// 步骤标题
|
|
@@ -124,18 +122,6 @@ class StepCard extends StatelessWidget {
|
|
|
return stepLabelStr.isNotEmpty == true;
|
|
return stepLabelStr.isNotEmpty == true;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- /// 是否有步骤标题
|
|
|
|
|
- bool _hasStepTitle() {
|
|
|
|
|
- String stepTitleStr = stepTitle ?? "";
|
|
|
|
|
- return stepTitleStr.isNotEmpty == true;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /// 是否有步骤标题
|
|
|
|
|
- bool _hasStepDesc() {
|
|
|
|
|
- String stepDescStr = stepDesc ?? "";
|
|
|
|
|
- return stepDescStr.isNotEmpty == true;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
/// 步骤标题
|
|
/// 步骤标题
|
|
|
Widget _buildStepTitle() {
|
|
Widget _buildStepTitle() {
|
|
|
String stepTitleStr = stepTitle ?? "";
|
|
String stepTitleStr = stepTitle ?? "";
|