商品详情页ing

Author: 罗国雄

lib/component/SliverCustomHeader.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+
+class SliverCustomHeaderDelegate extends SliverPersistentHeaderDelegate {
+  final double collapsedHeight;
+  final double expandedHeight;
+  final double paddingTop;
+  final Widget child;
+  final String title;
+
+  SliverCustomHeaderDelegate({
+    this.collapsedHeight,
+    this.expandedHeight,
+    this.paddingTop,
+    this.child,
+    this.title,
+  });
+
+  @override
+  double get minExtent => this.collapsedHeight + this.paddingTop;
+
+  @override
+  double get maxExtent => this.expandedHeight;
+
+  @override
+  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
+    return true;
+  }
+
+  Color makeStickyHeaderBgColor(shrinkOffset) {
+    final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
+        .clamp(0, 255)
+        .toInt();
+    return Color.fromARGB(alpha, 255, 255, 255);
+  }
+
+  Color makeStickyHeaderTextColor(shrinkOffset, isIcon) {
+    if (shrinkOffset <= 50) {
+      return isIcon ? Colors.white : Colors.transparent;
+    } else {
+      final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
+          .clamp(0, 255)
+          .toInt();
+      return Color.fromARGB(alpha, 0, 0, 0);
+    }
+  }
+
+  @override
+  Widget build(
+      BuildContext context, double shrinkOffset, bool overlapsContent) {
+    return Container(
+      height: this.maxExtent,
+      width: MediaQuery.of(context).size.width,
+      child: Stack(
+        fit: StackFit.expand,
+        children: <Widget>[
+          // 背景图
+          this.child,
+          // 收起头部
+          Positioned(
+            left: 0,
+            right: 0,
+            top: 0,
+            child: Container(
+              color: this.makeStickyHeaderBgColor(shrinkOffset), // 背景颜色
+              child: SafeArea(
+                bottom: false,
+                child: Container(
+                  height: this.collapsedHeight,
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: <Widget>[
+                      IconButton(
+                        icon: Icon(
+                          Icons.arrow_back_ios,
+                          color: this.makeStickyHeaderTextColor(
+                              shrinkOffset, true), // 返回图标颜色
+                        ),
+                        onPressed: () => Navigator.pop(context),
+                      ),
+                      Text(
+                        this.title,
+                        style: TextStyle(
+                          fontSize: 18,
+                          color: this.makeStickyHeaderTextColor(
+                              shrinkOffset, false), // 标题颜色
+                        ),
+                      ),
+                      IconButton(
+                        icon: Icon(
+                          Icons.share,
+                          color: Colors.transparent, // 分享图标颜色
+                        ),
+                        onPressed: () {},
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}