384 lines
15 KiB
Dart
384 lines
15 KiB
Dart
/// 商品详情页
|
||
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<Goods> createState() => _GoodsState();
|
||
}
|
||
|
||
class _GoodsState extends State<Goods> {
|
||
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),
|
||
);
|
||
}
|
||
}
|