refactor(class): 抽离攻克任务组件并优化样式与资源
1. 将ResolveProblemBox从class_update_widgets.dart抽离到公共组件目录 2. 替换静态渐变背景为CDN资源背景图,适配平板和手机端 3. 将点赞评论按钮的图标从内置Icons替换为本地png资源 4. 更新pubspec.yaml添加新的图片资源路径 5. 删除冗余的空行配置
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:new_learn/core/utils/img_url.dart';
|
||||
import 'package:new_learn/core/utils/screen_adapt_template.dart';
|
||||
|
||||
/// ============================================================
|
||||
/// 【ResolveProblemBox】攻克任务卡(对标 Vue ResolveProblem.vue)
|
||||
///
|
||||
/// 用于展示"刚刚攻克了 「xxx」 的所有高难考点"类提示。
|
||||
/// 由 class_update_widgets.dart 抽离,详情页也可复用。
|
||||
/// 背景图 + 云朵装饰走 CDN,与 Vue 版 $img('/StaticResource/...') 同源。
|
||||
/// ============================================================
|
||||
class ResolveProblemBox extends StatelessWidget {
|
||||
const ResolveProblemBox({
|
||||
super.key,
|
||||
this.title = '刚刚攻克了',
|
||||
required this.desc,
|
||||
});
|
||||
|
||||
/// 标题(默认 "刚刚攻克了")
|
||||
final String title;
|
||||
|
||||
/// 攻克的知识点描述(如 "二次函数最值问题")
|
||||
final String desc;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isPad = MediaQuery.sizeOf(context).width >= AppAdapt.tabletBreakpoint;
|
||||
|
||||
final bgUrl = ImgUrl.build(
|
||||
isPad
|
||||
? '/StaticResource/2026-06-02/resolve-bg2-pad1780388446390.png'
|
||||
: '/StaticResource/2026-05-07/resolve-bg2.png',
|
||||
);
|
||||
final cloudUrl = ImgUrl.build(
|
||||
isPad
|
||||
? '/StaticResource/2026-06-02/cloud-pad1780388443051.png'
|
||||
: '/StaticResource/2026-05-07/cloud.png',
|
||||
);
|
||||
|
||||
final cloudHeight = isPad ? 107.h : 74.h;
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10.r),
|
||||
image: DecorationImage(
|
||||
image: CachedNetworkImageProvider(bgUrl),
|
||||
fit: BoxFit.fill,
|
||||
alignment: Alignment.topCenter,
|
||||
),
|
||||
),
|
||||
// 裁剪所有子元素到圆角内(对标 Vue overflow:hidden)
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Stack(
|
||||
// Stack 默认不裁剪 Positioned 子元素,必须显式设置
|
||||
clipBehavior: Clip.hardEdge,
|
||||
children: [
|
||||
// 底部云朵装饰(贴底部,z-index 1)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: cloudUrl,
|
||||
height: cloudHeight,
|
||||
width: double.infinity,
|
||||
fit: BoxFit.fitWidth,
|
||||
),
|
||||
),
|
||||
// 文本层(padding 在云朵之上,z-index 2)
|
||||
Padding(
|
||||
padding: EdgeInsets.fromLTRB(19.w, 25.h, 19.w, 11.h),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w900,
|
||||
color: Color(0xFF1D2B47),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 3.h),
|
||||
Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text: '「$desc」',
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color(0xFF1D2B47),
|
||||
),
|
||||
),
|
||||
const TextSpan(
|
||||
text: ' 的所有高难考点!',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color(0xFF45597E),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user