You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
639 lines
24 KiB
639 lines
24 KiB
import 'package:flutter/material.dart'; |
|
import 'package:flutter/rendering.dart'; |
|
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart'; |
|
import 'package:huixiang/generated/l10n.dart'; |
|
import 'package:huixiang/view_widget/icon_text.dart'; |
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|
import 'package:huixiang/view_widget/round_button.dart'; |
|
|
|
class BrandPage extends StatefulWidget { |
|
@override |
|
State<StatefulWidget> createState() { |
|
return _BrandPage(); |
|
} |
|
} |
|
|
|
class _BrandPage extends State<BrandPage> |
|
with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin { |
|
ScrollController tabcontroller; |
|
|
|
List<String> tabs = [ |
|
S.current.bainianchuanjiao, |
|
S.current.haixiajiemei, |
|
S.current.qianjinmaiwei, |
|
]; |
|
|
|
Map<String, String> images = { |
|
S.current.bainianchuanjiao: "assets/image/icon_chili.png", |
|
S.current.haixiajiemei: "assets/image/icon_milk_tea.png", |
|
S.current.qianjinmaiwei: "assets/image/icon_bread.png", |
|
}; |
|
|
|
// GlobalKey contentGlobalKey = GlobalKey(); |
|
// GlobalKey tabGlobalKey = GlobalKey(); |
|
GlobalKey chiliGlobalKey = GlobalKey(); |
|
GlobalKey milkTeaGlobalKey = GlobalKey(); |
|
GlobalKey breadGlobalKey = GlobalKey(); |
|
|
|
// GlobalKey visibleGlobalKey = GlobalKey(); |
|
|
|
@override |
|
void initState() { |
|
super.initState(); |
|
if (tabcontroller == null) tabcontroller = ScrollController(); |
|
tabcontroller.addListener(() { |
|
// RenderBox contentRenderBox = contentGlobalKey.currentContext.findRenderObject(); |
|
RenderBox chiliRenderBox = |
|
chiliGlobalKey.currentContext.findRenderObject(); |
|
RenderBox milkTeaRenderBox = |
|
milkTeaGlobalKey.currentContext.findRenderObject(); |
|
RenderBox breadRenderBox = |
|
breadGlobalKey.currentContext.findRenderObject(); |
|
// Offset contentOffset = contentRenderBox.localToGlobal(Offset.zero); |
|
Offset chiliOffset = chiliRenderBox.localToGlobal(Offset.zero); |
|
Offset milkTeaOffset = milkTeaRenderBox.localToGlobal(Offset.zero); |
|
Offset breadOffset = breadRenderBox.localToGlobal(Offset.zero); |
|
|
|
print("chiliOffset: ${chiliOffset.dy}"); |
|
print("milkTeaOffset: ${milkTeaOffset.dy}"); |
|
print("breadOffset: ${breadOffset.dy}"); |
|
|
|
var top = 96.h; |
|
|
|
if (chiliOffset.dy <= top) { |
|
if (!isVisible) { |
|
isVisible = true; |
|
} |
|
} else { |
|
isVisible = false; |
|
selectedIndex = ""; |
|
} |
|
if (chiliOffset.dy <= top && milkTeaOffset.dy > top) { |
|
selectedIndex = tabs[0]; |
|
} else if (milkTeaOffset.dy <= top && breadOffset.dy > top) { |
|
selectedIndex = tabs[1]; |
|
} else if (breadOffset.dy <= top) { |
|
selectedIndex = tabs[2]; |
|
} |
|
setState(() {}); |
|
}); |
|
} |
|
|
|
String selectedIndex = ""; |
|
|
|
@override |
|
Widget build(BuildContext context) { |
|
return Scaffold( |
|
appBar: AppBar( |
|
toolbarHeight: 40 - MediaQuery.of(context).padding.top, |
|
backgroundColor: Colors.white, |
|
elevation: 0, |
|
), |
|
body: Container( |
|
// key: contentGlobalKey, |
|
child: Stack( |
|
children: [ |
|
Container( |
|
child: SingleChildScrollView( |
|
physics: BouncingScrollPhysics(), |
|
controller: tabcontroller, |
|
child: Container( |
|
color: Color(0xFFF7F7F7), |
|
margin: EdgeInsets.only(top: 16), |
|
child: Column( |
|
children: [ |
|
banner(), |
|
buildInfo(), |
|
buildTab(), |
|
// Container( |
|
// decoration: new BoxDecoration( |
|
// border: Border( |
|
// bottom: |
|
// BorderSide(color: Colors.black, width: 0.0)), |
|
// color: Colors.black, |
|
// ), |
|
// key: chiliGlobalKey, |
|
// child: Image.asset( |
|
// "assets/image/brand_store_cj.png", |
|
// fit: BoxFit.fill, |
|
// width: double.infinity, |
|
// ), |
|
// ), |
|
Container( |
|
decoration: new BoxDecoration( |
|
border: Border( |
|
bottom: |
|
BorderSide(color: Colors.black, width: 0.0)), |
|
color: Colors.black, |
|
), |
|
padding: |
|
EdgeInsets.only(left: 79, right: 85, bottom: 34), |
|
child: Column( |
|
mainAxisAlignment: MainAxisAlignment.spaceAround, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Padding( |
|
padding: EdgeInsets.only(bottom: 8), |
|
child: Text( |
|
"02 百年川椒(光谷店）", |
|
style: TextStyle( |
|
fontSize: 12, color: Color(0xffFFFCF5)), |
|
), |
|
), |
|
Row( |
|
mainAxisAlignment: MainAxisAlignment.start, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Text( |
|
"地址:", |
|
style: TextStyle( |
|
fontSize: 10, color: Colors.white), |
|
), |
|
Padding( |
|
padding: EdgeInsets.only(bottom: 5), |
|
child: Text( |
|
"洪山区关山大道哈乐城2楼(保利时\n代)", |
|
style: TextStyle( |
|
fontSize: 10, color: Colors.white), |
|
), |
|
), |
|
], |
|
), |
|
Row( |
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
children: [ |
|
Expanded( |
|
flex: 1, |
|
child: Text( |
|
"时间:09:30-21:30", |
|
style: TextStyle( |
|
fontSize: 10, color: Colors.white), |
|
), |
|
), |
|
Container( |
|
padding: EdgeInsets.only( |
|
left: 7, right: 10, bottom: 2, top: 2), |
|
width: 43, |
|
height: 14, |
|
decoration: new BoxDecoration( |
|
image: new DecorationImage( |
|
image: new AssetImage( |
|
"assets/image/icon_look.png"), |
|
), |
|
), |
|
child: Text( |
|
"去逛逛", |
|
style: TextStyle( |
|
fontSize: 8, color: Colors.white), |
|
), |
|
), |
|
], |
|
) |
|
], |
|
), |
|
), |
|
SizedBox( |
|
height: 16, |
|
), |
|
// Container( |
|
// decoration: new BoxDecoration( |
|
// border: Border( |
|
// bottom: |
|
// BorderSide(color: Colors.white, width: 0.0)), |
|
// color: Colors.white, |
|
// ), |
|
// key: milkTeaGlobalKey, |
|
// child: Image.asset( |
|
// "assets/image/brand_store_hx.png", |
|
// fit: BoxFit.fill, |
|
// width: double.infinity, |
|
// ), |
|
// ), |
|
Container( |
|
decoration: new BoxDecoration( |
|
border: Border( |
|
bottom: |
|
BorderSide(color: Colors.white, width: 0.0)), |
|
color: Colors.white, |
|
), |
|
padding: |
|
EdgeInsets.only(left: 32, right: 33, bottom: 18), |
|
child: Column( |
|
mainAxisAlignment: MainAxisAlignment.spaceAround, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Row( |
|
mainAxisAlignment: MainAxisAlignment.start, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Padding( |
|
padding: EdgeInsets.only(right: 12), |
|
child: Text( |
|
"●", |
|
style: TextStyle( |
|
fontSize: 10, color: Color(0xffE2BA83)), |
|
), |
|
), |
|
Padding( |
|
padding: EdgeInsets.only(bottom: 8), |
|
child: Text( |
|
"武昌区松竹路汉街总部国际C座正对面(肥肥虾庄旁)", |
|
style: TextStyle( |
|
fontSize: 10, color: Color(0xff604843)), |
|
), |
|
), |
|
], |
|
), |
|
Row( |
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
children: [ |
|
Padding( |
|
padding: EdgeInsets.only(right: 12), |
|
child: Text( |
|
"●", |
|
style: TextStyle( |
|
fontSize: 10, color: Color(0xffE2BA83)), |
|
), |
|
), |
|
Expanded( |
|
flex: 1, |
|
child: Text( |
|
"10:00-21:00", |
|
style: TextStyle( |
|
fontSize: 10, color: Color(0xff604843)), |
|
), |
|
), |
|
Text( |
|
"去逛逛", |
|
style: TextStyle( |
|
fontSize: 13, color: Color(0xff604843)), |
|
), |
|
Image.asset("assets/image/icon_right_z.png"), |
|
], |
|
) |
|
], |
|
), |
|
), |
|
SizedBox( |
|
height: 16, |
|
), |
|
// Container( |
|
// decoration: new BoxDecoration( |
|
// border: Border( |
|
// bottom: BorderSide( |
|
// color: Color(0xff052C4B), width: 0.0)), |
|
// color: Color(0xff052C4B), |
|
// ), |
|
// key: breadGlobalKey, |
|
// child: Image.asset( |
|
// "assets/image/brand_store_bg.png", |
|
// fit: BoxFit.fill, |
|
// width: double.infinity, |
|
// ), |
|
// ), |
|
Container( |
|
decoration: new BoxDecoration( |
|
border: Border( |
|
bottom: BorderSide( |
|
color: Color(0xff052C4B), width: 0.0)), |
|
color: Color(0xff052C4B), |
|
), |
|
padding: |
|
EdgeInsets.only(left: 46, right: 44, bottom: 21), |
|
child: Column( |
|
mainAxisAlignment: MainAxisAlignment.spaceAround, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Padding( |
|
padding: EdgeInsets.only(bottom: 8), |
|
child: Text( |
|
"01 前进麦味(光谷店）", |
|
style: TextStyle( |
|
fontSize: 12, color: Color(0xffFFFCF5)), |
|
), |
|
), |
|
Padding( |
|
padding: EdgeInsets.only(bottom: 5), |
|
child: Text( |
|
"地址:洪山区关山大道328号附7号", |
|
style: TextStyle( |
|
fontSize: 10, color: Colors.white), |
|
), |
|
), |
|
Row( |
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
children: [ |
|
Expanded( |
|
flex: 1, |
|
child: Text( |
|
"时间:09:00-20:30", |
|
style: TextStyle( |
|
fontSize: 10, color: Colors.white), |
|
), |
|
), |
|
Text( |
|
"去了解", |
|
style: TextStyle( |
|
fontSize: 13, color: Color(0xffFFFDF6)), |
|
), |
|
Image.asset("assets/image/icon_right.png"), |
|
], |
|
) |
|
], |
|
), |
|
), |
|
], |
|
), |
|
), |
|
), |
|
), |
|
Positioned( |
|
child: Visibility( |
|
visible: isVisible, |
|
child: Container( |
|
width: MediaQuery.of(context).size.width, |
|
child: Container( |
|
height: 52.h, |
|
color: Colors.white, |
|
padding: EdgeInsets.all(6), |
|
alignment: Alignment.center, |
|
child: Row( |
|
mainAxisAlignment: MainAxisAlignment.spaceAround, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
children: |
|
tabs.map((e) => item(e, selectedIndex == e)).toList(), |
|
), |
|
), |
|
), |
|
), |
|
top: 0, |
|
), |
|
], |
|
), |
|
), |
|
); |
|
} |
|
|
|
bool isVisible = false; |
|
|
|
Widget buildTab() { |
|
return Container( |
|
// key: tabGlobalKey, |
|
height: 52.h, |
|
padding: EdgeInsets.all(6), |
|
alignment: Alignment.center, |
|
child: Row( |
|
mainAxisAlignment: MainAxisAlignment.spaceAround, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
children: tabs.map((e) => item(e, selectedIndex == e)).toList(), |
|
), |
|
); |
|
} |
|
|
|
Widget item(text, isSelected) { |
|
return GestureDetector( |
|
onTap: () { |
|
FlexParentData parendData; |
|
if (text == S.of(context).bainianchuanjiao) { |
|
parendData = |
|
chiliGlobalKey.currentContext.findRenderObject().parentData; |
|
} else if (text == S.of(context).haixiajiemei) { |
|
parendData = |
|
milkTeaGlobalKey.currentContext.findRenderObject().parentData; |
|
} else if (text == S.of(context).qianjinmaiwei) { |
|
parendData = |
|
breadGlobalKey.currentContext.findRenderObject().parentData; |
|
} |
|
double offset = parendData.offset.dy - 52.h + 20; |
|
tabcontroller.animateTo(offset, |
|
duration: Duration(seconds: 1), curve: Curves.ease); |
|
}, |
|
child: tabItem(text, selectedIndex == text), |
|
); |
|
} |
|
|
|
Widget tabItem(text, isSelected) { |
|
if (isSelected) { |
|
return IconText( |
|
text, |
|
isMax: false, |
|
rightImage: images[text], |
|
iconSize: 16, |
|
iconColor: Colors.red, |
|
textStyle: TextStyle( |
|
fontWeight: FontWeight.bold, |
|
fontSize: 16, |
|
color: Color(0xFF353535)), |
|
); |
|
} else { |
|
return IconText( |
|
text, |
|
isMax: false, |
|
textStyle: TextStyle( |
|
fontWeight: FontWeight.bold, |
|
fontSize: 16, |
|
color: Color(0xFF353535)), |
|
); |
|
} |
|
} |
|
|
|
Widget buildInfo() { |
|
return Container( |
|
margin: EdgeInsets.only(bottom: 20, top: 16), |
|
padding: EdgeInsets.all(16), |
|
decoration: BoxDecoration( |
|
color: Colors.white, |
|
boxShadow: [ |
|
BoxShadow( |
|
color: Colors.black.withAlpha(12), |
|
offset: Offset(0, 2), |
|
blurRadius: 14, |
|
spreadRadius: 0) |
|
], |
|
), |
|
child: Column( |
|
mainAxisAlignment: MainAxisAlignment.start, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Row( |
|
children: [ |
|
ClipOval( |
|
child: Image.network( |
|
"https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF", |
|
fit: BoxFit.cover, |
|
width: 60, |
|
height: 60, |
|
), |
|
clipBehavior: Clip.hardEdge, |
|
), |
|
SizedBox( |
|
width: 16, |
|
), |
|
Expanded( |
|
child: Container( |
|
height: 60, |
|
child: Column( |
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Text.rich( |
|
TextSpan(children: [ |
|
TextSpan( |
|
text: "李旭清", |
|
style: TextStyle( |
|
fontWeight: FontWeight.bold, |
|
fontSize: 14, |
|
color: Colors.black), |
|
), |
|
TextSpan( |
|
text: " 集团创办人", |
|
style: TextStyle(fontSize: 10, color: Colors.black), |
|
), |
|
]), |
|
textDirection: TextDirection.ltr, |
|
), |
|
Text( |
|
"李旭清女士于1993年创建以「地球公民责任」为企业理念，打造一个与环境共存共荣的永续..", |
|
overflow: TextOverflow.ellipsis, |
|
maxLines: 2, |
|
style: TextStyle( |
|
fontSize: 12, |
|
color: Color(0xFF353535), |
|
), |
|
), |
|
], |
|
), |
|
), |
|
flex: 1, |
|
) |
|
], |
|
), |
|
SizedBox( |
|
height: 40, |
|
), |
|
Text( |
|
"海峡姐妹餐饮集团介绍", |
|
style: TextStyle( |
|
fontSize: 16.sp, |
|
fontWeight: FontWeight.bold, |
|
color: Colors.black), |
|
), |
|
SizedBox( |
|
height: 20, |
|
), |
|
Text( |
|
"湖北海峡姐妹餐饮有限公司于2019年08月01日成立。法定代表人李旭清，公司经营范围包括：餐饮服务（凭食品经营许可证在有效期内从事经营活动）；餐饮管理；烘焙、冷热饮料制售；预包装食品、散装食品销售；蔬果宅配；超市市场零售；中央厨房经营与管理；物业管理；酒制品生产、销售等。", |
|
textAlign: TextAlign.justify, |
|
style: TextStyle(fontSize: 12.sp, color: Color(0xFF353535)), |
|
), |
|
SizedBox( |
|
height: 40, |
|
), |
|
Text( |
|
"理念", |
|
style: TextStyle( |
|
fontSize: 16.sp, |
|
fontWeight: FontWeight.bold, |
|
color: Colors.black), |
|
), |
|
SizedBox( |
|
height: 20, |
|
), |
|
Row( |
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
children: [idea(), idea(), idea()], |
|
), |
|
], |
|
), |
|
); |
|
} |
|
|
|
banner() { |
|
var images = [ |
|
"https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF", |
|
"https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF", |
|
"https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF", |
|
"https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF", |
|
"https://t7.baidu.com/it/u=3655946603,4193416998&fm=193&f=GIF" |
|
]; |
|
return Container( |
|
child: AspectRatio( |
|
aspectRatio: 2.08, |
|
child: Swiper( |
|
viewportFraction: 0.88, |
|
scale: 0.93, |
|
pagination: SwiperPagination( |
|
alignment: Alignment.bottomCenter, |
|
builder: DotSwiperPaginationBuilder( |
|
size: 8, |
|
activeSize: 8, |
|
space: 5, |
|
activeColor: Colors.black, |
|
color: Colors.black.withAlpha(76), |
|
), |
|
), |
|
itemBuilder: (context, position) { |
|
return Container( |
|
decoration: BoxDecoration( |
|
borderRadius: BorderRadius.all(Radius.circular(8)), |
|
), |
|
child: ClipRRect( |
|
borderRadius: BorderRadius.all( |
|
Radius.circular(8), |
|
), |
|
child: Image( |
|
fit: BoxFit.cover, |
|
image: NetworkImage(images.elementAt(position)), |
|
), |
|
)); |
|
}, |
|
itemCount: images.length), |
|
), |
|
); |
|
} |
|
|
|
Widget idea() { |
|
return Stack( |
|
children: [ |
|
ClipRRect( |
|
borderRadius: BorderRadius.circular(4), |
|
child: Image.network( |
|
"https://t7.baidu.com/it/u=354366862,33514804&fm=193&f=GIF", |
|
width: 71, |
|
height: 71, |
|
fit: BoxFit.cover, |
|
), |
|
), |
|
Positioned( |
|
bottom: 0, |
|
child: Container( |
|
width: 71, |
|
decoration: BoxDecoration( |
|
color: Colors.black.withAlpha(125), |
|
borderRadius: BorderRadius.only( |
|
bottomRight: Radius.circular(4), |
|
bottomLeft: Radius.circular(4), |
|
), |
|
), |
|
padding: EdgeInsets.symmetric(vertical: 2), |
|
alignment: Alignment.center, |
|
child: Text( |
|
"有机原料", |
|
style: TextStyle( |
|
color: Colors.white, |
|
fontSize: 12.sp, |
|
), |
|
), |
|
), |
|
) |
|
], |
|
); |
|
} |
|
|
|
@override |
|
bool get wantKeepAlive => true; |
|
}
|
|
|