Browse Source

[new]商店页购买按钮增加光效

zk 1 year ago
parent
commit
3f128e55a5
2 changed files with 106 additions and 12 deletions
  1. 15 12
      lib/module/store/view.dart
  2. 91 0
      lib/widget/shimmer_effect.dart

+ 15 - 12
lib/module/store/view.dart

@@ -10,6 +10,7 @@ import 'package:get/get.dart';
 
 import '../../data/bean/store_item.dart';
 import '../../data/consts/Constants.dart';
+import '../../widget/shimmer_effect.dart';
 import 'controller.dart';
 
 enum StoreFromType { home, mine, analyse }
@@ -538,19 +539,21 @@ class StorePage extends BasePage<StoreController> {
       ),
       child: GestureDetector(
         onTap: () => controller.onBuyClick(),
-        child: Container(
-          height: 48.w,
-          alignment: Alignment.center,
-          decoration: BoxDecoration(
-            gradient: LinearGradient(
-              colors: ['#9075FF'.color, '#4366FF'.color],
-              begin: Alignment.centerLeft,
-              end: Alignment.centerRight,
-              stops: const [0.0, 1.0],
+        child: ShimmerEffect(
+          child: Container(
+            height: 48.w,
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                colors: ['#9075FF'.color, '#4366FF'.color],
+                begin: Alignment.centerLeft,
+                end: Alignment.centerRight,
+                stops: const [0.0, 1.0],
+              ),
+              borderRadius: BorderRadius.circular(8.w),
             ),
-            borderRadius: BorderRadius.circular(8.w),
+            child: _buildBuyButton(),
           ),
-          child: _buildBuyButton(),
         ),
       ),
     );
@@ -558,7 +561,7 @@ class StorePage extends BasePage<StoreController> {
 
   Widget _buildBuyButton() {
     return Obx(() => Text(
-          "立即购买  ¥${controller.currentSelectedStoreItem.value?.amountText}",
+          "立即购买  ¥${controller.currentSelectedStoreItem.value?.amountText ?? ''}",
           style: TextStyle(
               fontWeight: FontWeight.bold,
               fontSize: 16.sp,

+ 91 - 0
lib/widget/shimmer_effect.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+
+class ShimmerEffect extends StatefulWidget {
+  final Widget child;
+  final Duration duration; // 控制光线滑动的速度
+  final List<Color> colors; // 渐变的颜色列表 与 stops 配合使用,长度必须一致
+  final Alignment begin; // 光线起点
+  final Alignment end; // 光线终点
+  final double shimmerWidth; // 光线宽度参数
+  final Duration delay; // 每次执行完后的延迟时间
+
+  const ShimmerEffect({
+    super.key,
+    required this.child,
+    this.duration = const Duration(seconds: 2),
+    this.colors = const [
+      Colors.transparent,
+      Colors.white60,
+      Colors.transparent,
+    ],
+    this.begin = const Alignment(-1, -1),
+    this.end = const Alignment(1, 1),
+    this.shimmerWidth = 0.1,
+    this.delay = const Duration(seconds: 1),
+  });
+
+  @override
+  _ShimmerEffectState createState() => _ShimmerEffectState();
+}
+
+class _ShimmerEffectState extends State<ShimmerEffect>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    // 初始化动画控制器
+    _controller = AnimationController(
+      vsync: this,
+      duration: widget.duration,
+    );
+
+    _startAnimation();
+  }
+
+  void _startAnimation() async {
+    while (mounted) {
+      await _controller.forward();
+      _controller.reset();
+      await Future.delayed(widget.delay);
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        final shimmerPosition = _controller.value * 2 - 1;
+
+        return ClipRRect(
+            borderRadius: BorderRadius.circular(8),
+            child: ShaderMask(
+              shaderCallback: (bounds) {
+                return LinearGradient(
+                  begin: widget.begin,
+                  end: widget.end,
+                  colors: widget.colors,
+                  stops: [
+                    shimmerPosition - widget.shimmerWidth,
+                    shimmerPosition,
+                    shimmerPosition + widget.shimmerWidth,
+                  ],
+                ).createShader(bounds);
+              },
+              blendMode: BlendMode.screen,
+              child: widget.child,
+            ));
+      },
+      child: widget.child,
+    );
+  }
+}