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),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|