/// 商品详情页 library; import 'package:card_swiper/card_swiper.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../../behavior/custom_scroll_behavior.dart'; import '../../components/backtop.dart'; class Goods extends StatefulWidget { const Goods({super.key}); @override State createState() => _GoodsState(); } class _GoodsState extends State { late ScrollController scrollController = ScrollController(); // 滚动位置 double scrollOffset = 0; @override void initState() { super.initState(); scrollController.addListener(() { setState(() { scrollOffset = scrollController.offset; }); }); } @override void dispose() { scrollController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[50], body: CustomScrollView( scrollBehavior: CustomScrollBehavior().copyWith(scrollbars: false), controller: scrollController, slivers: [ SliverAppBar( backgroundColor: Colors.transparent, foregroundColor: Colors.white, pinned: true, expandedHeight: 280.0, titleSpacing: 10.0, leading: IconButton( icon: Icon( Icons.arrow_back, size: 20.0, ), style: ButtonStyle( backgroundColor: WidgetStateProperty.all(Colors.black.withAlpha(20)), ), onPressed: () { Get.back(); }, ), actions: [ IconButton( icon: Icon( Icons.search, size: 20.0, ), onPressed: () {}, ), IconButton( icon: Icon( Icons.favorite_border, size: 20.0, ), onPressed: () {}, ), IconButton( icon: Icon( Icons.share, size: 20.0, ), onPressed: () {}, ), ], // 自定义伸缩区域(轮播图) flexibleSpace: Container( decoration: BoxDecoration(gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Color(0xFFFF5000), Color(0xFFFFAA00)])), child: FlexibleSpaceBar( background: ScrollConfiguration( behavior: CustomScrollBehavior(), child: Swiper.children( pagination: SwiperPagination( builder: DotSwiperPaginationBuilder( color: Colors.white70, activeColor: Colors.white, )), indicatorLayout: PageIndicatorLayout.SCALE, children: [ Image.network( 'https://img13.360buyimg.com/n1/jfs/t1/263909/5/4187/123220/676eb220F3e481086/0cee829b1894fc4c.jpg', fit: BoxFit.cover, ), Image.network( 'https://img13.360buyimg.com/n1/jfs/t1/245928/34/24374/150795/673b0a0cFdb8831f9/9235d1ed7654aa44.jpg', fit: BoxFit.cover, ), Image.network( 'https://img30.360buyimg.com/n1/jfs/t1/240005/25/26374/136411/6756e1f9Fb685b2ec/3be83b3e1a08169d.jpg', fit: BoxFit.cover, ), ], ), ), ), ), ), SliverToBoxAdapter( child: ScrollConfiguration( behavior: CustomScrollBehavior().copyWith(scrollbars: false), child: Column( children: [ Container( padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 25.0), decoration: BoxDecoration( gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Color(0xFFFF5000), Color(0xFFFFAA00)])), child: Column( crossAxisAlignment: CrossAxisAlignment.start, spacing: 5.0, children: [ Row( spacing: 5.0, children: [ Text( '¥3838', style: TextStyle( color: Colors.white, fontSize: 16.0, decoration: TextDecoration.lineThrough, decorationColor: Colors.black, decorationThickness: 1.5, ), ), Container( padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 3.0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(50.0), ), child: Text( '现价¥3800', style: TextStyle(color: Colors.red, fontSize: 12.0), ), ), ], ), Text( '已售1.1w', style: TextStyle(color: Colors.white, fontSize: 12.0), ), ], ), ), Container( padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0), decoration: BoxDecoration( color: Color(0xFFFAFAFA), borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)), ), transform: Matrix4.translationValues(0.0, -15.0, 0.0), child: Column( children: [ // 标题 Container( padding: EdgeInsets.all(5.0), child: Text.rich( TextSpan(children: [ TextSpan(text: ' 年货节 ', style: TextStyle(fontSize: 11.0, backgroundColor: const Color(0xFFFF5000), color: Colors.white)), TextSpan( text: ' 茅台(MOUTAI)飞天 53度 酱香型白酒 500ml*2 海外版送礼袋年货送礼', style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w700), ), ]), maxLines: 2, overflow: TextOverflow.ellipsis, ), ), // 规格 Container( margin: EdgeInsets.only(top: 10.0), padding: EdgeInsets.all(10.0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15.0), ), child: Column( spacing: 10.0, children: [ Row( spacing: 5.0, children: [ Icon( Icons.timer, size: 16.0, ), Expanded( child: Text( '本商品请于2025.01.25前进行核销', style: TextStyle(fontSize: 12.0), ), ), ], ), Row( spacing: 5.0, children: [ Icon( Icons.house_outlined, size: 16.0, ), Expanded( child: Text( '营业时间:7x24', style: TextStyle(fontSize: 12.0), ), ), ], ), Row( spacing: 5.0, children: [ Icon( Icons.location_on, size: 16.0, ), Expanded( child: Text( '河北省唐山市玉田县', style: TextStyle(fontSize: 12.0), ), ), ], ), ], ), ), // 详情 Container( margin: EdgeInsets.only(top: 10.0), padding: EdgeInsets.all(10.0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15.0), ), child: Column( spacing: 10.0, children: [ Text('【飞天茅台】传承悠久,酱香型白酒典范,四大名酒之一。 【爆款直降】纯粮酿造,固态发酵。 【精髓制作】工艺精湛,入口绵、落口甜、饮后余香。'), Image.network( 'https://img30.360buyimg.com/n1/jfs/t1/187328/18/54595/115429/6756e1c7F126ab0d4/fe96f6fd5dfe125d.jpg', fit: BoxFit.contain, ), Image.network( 'https://img30.360buyimg.com/n1/jfs/t1/240005/25/26374/136411/6756e1f9Fb685b2ec/3be83b3e1a08169d.jpg', fit: BoxFit.contain, ), Image.network( 'https://img30.360buyimg.com/n1/jfs/t1/247398/2/28177/97778/6756da95F518f621c/746dc23032c171ca.jpg', fit: BoxFit.contain, ), ], ), ), ], ), ), ], ), ), ), ], ), // 商品导航栏 bottomNavigationBar: SafeArea( bottom: true, child: Container( height: 50.0, color: Colors.white, padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0), child: Row( children: [ Expanded( child: Row( spacing: 15.0, children: [ Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.store, color: Color(0xFFFF5000), size: 18.0, ), Text( '店铺', style: TextStyle(fontSize: 12.0), ) ], ), Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.child_care_outlined, size: 18.0, ), Text( '客服', style: TextStyle(fontSize: 12.0), ) ], ), Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Badge.count( backgroundColor: Color(0xFFFF5000), count: 6, child: Icon( Icons.shopping_cart_outlined, size: 18.0, ), ), Text( '购物车', style: TextStyle(fontSize: 12.0), ) ], ), ], ), ), Container( alignment: Alignment.center, height: 36.0, clipBehavior: Clip.antiAlias, decoration: BoxDecoration( color: Color(0xFFFFEBEB), borderRadius: BorderRadius.circular(30.0), ), child: Row( children: [ Padding( padding: EdgeInsets.symmetric(horizontal: 10.0), child: Text( '加入购物车', style: TextStyle(color: Color(0xFFFF5000), fontSize: 14.0), ), ), Container( alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 20.0), color: Color(0xFFFF5000), child: Text( '领券购买', style: TextStyle(color: Colors.white, fontSize: 14.0), ), ), ], ), ), ], ), ), ), // 返回顶部 floatingActionButton: Backtop(controller: scrollController, offset: scrollOffset), ); } }