소스 검색

feat: 国旗图标增加阴影

Tony 1 개월 전
부모
커밋
3cabd5b634
2개의 변경된 파일31개의 추가작업 그리고 3개의 파일을 삭제
  1. 25 0
      lib/app/extensions/widget_extension.dart
  2. 6 3
      lib/app/widgets/country_icon.dart

+ 25 - 0
lib/app/extensions/widget_extension.dart

@@ -9,3 +9,28 @@ extension WidgetDesktopX on Widget {
     return this;
   }
 }
+
+extension WidgetShadowX on Widget {
+  /// 为 Widget 添加自定义阴影
+  Widget withShadow({
+    Color shadowColor = const Color(0xFF000000),
+    double opacity = 0.18,
+    double blurRadius = 3.0,
+    Offset offset = const Offset(1, 1),
+    double borderRadius = 0.0,
+  }) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(borderRadius),
+        boxShadow: [
+          BoxShadow(
+            color: shadowColor.withOpacity(opacity),
+            blurRadius: blurRadius,
+            offset: offset,
+          ),
+        ],
+      ),
+      child: this,
+    );
+  }
+}

+ 6 - 3
lib/app/widgets/country_icon.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:nomo/app/extensions/widget_extension.dart';
 import 'ix_image.dart';
 
 /// 国旗/图标组件
@@ -139,7 +140,9 @@ class _CountryIconState extends State<CountryIcon> {
   Widget build(BuildContext context) {
     // 仅首次加载时显示占位符,切换时保持旧图片
     if (_isFirstLoad || _imagePath == null || _imageType == null) {
-      return _buildPlaceholder();
+      return _buildPlaceholder().withShadow(
+        borderRadius: widget.borderRadius ?? 0,
+      );
     }
 
     // 根据图片类型返回不同的组件
@@ -153,7 +156,7 @@ class _CountryIconState extends State<CountryIcon> {
           fit: widget.fit ?? BoxFit.cover,
           placeholderBuilder: (context) => _buildPlaceholder(),
         ),
-      );
+      ).withShadow(borderRadius: widget.borderRadius ?? 0);
     } else {
       // png 类型使用 IXImage
       return IXImage(
@@ -163,7 +166,7 @@ class _CountryIconState extends State<CountryIcon> {
         height: widget.height,
         borderRadius: widget.borderRadius,
         fit: widget.fit,
-      );
+      ).withShadow(borderRadius: widget.borderRadius ?? 0);
     }
   }