sliver_header_bar.dart 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_note/provide/goods_detail_provide.dart';
  3. class SliverHeaderBar extends StatelessWidget {
  4. final GoodsDetailProvide detailProvide;
  5. final List<String> tabs;
  6. final bool innerScrolled;
  7. final double _expandedHeight = 560.0;
  8. SliverHeaderBar({Key key, this.detailProvide, this.tabs, this.innerScrolled})
  9. : super(key: key);
  10. @override
  11. Widget build(BuildContext context) {
  12. var _detail = detailProvide.detail;
  13. return SliverAppBar(
  14. pinned: true,
  15. centerTitle: true,
  16. // 商品名
  17. title: Text(
  18. _detail.data.goodInfo.goodsName,
  19. maxLines: 1,
  20. overflow: TextOverflow.ellipsis,
  21. ),
  22. forceElevated: innerScrolled,
  23. // 折叠头部信息
  24. flexibleSpace: HeaderFlex(
  25. detailProvide: detailProvide, expandedHeight: _expandedHeight),
  26. // 折叠高度
  27. expandedHeight: _expandedHeight,
  28. bottom: TabBar(
  29. indicator: BoxDecoration(color: Colors.transparent),
  30. labelColor: Colors.pink,
  31. indicatorWeight: .0,
  32. indicatorColor: Colors.pink,
  33. indicatorSize: TabBarIndicatorSize.label,
  34. unselectedLabelColor: Colors.black,
  35. labelPadding: EdgeInsets.zero,
  36. tabs: tabs
  37. .map((tab) => Container(
  38. height: 60.0,
  39. color: Colors.white,
  40. alignment: Alignment.center,
  41. child: Text(tab, style: TextStyle(fontSize: 18.0)),
  42. ))
  43. .toList()),
  44. );
  45. }
  46. }
  47. class HeaderFlex extends StatelessWidget {
  48. final GoodsDetailProvide detailProvide;
  49. final double expandedHeight;
  50. HeaderFlex({Key key, this.detailProvide, this.expandedHeight})
  51. : super(key: key);
  52. @override
  53. Widget build(BuildContext context) {
  54. var _detail = detailProvide.detail.data;
  55. return FlexibleSpaceBar(
  56. collapseMode: CollapseMode.pin,
  57. background: Container(
  58. alignment: Alignment.center,
  59. color: Colors.white,
  60. height: expandedHeight,
  61. child: Column(
  62. children: <Widget>[
  63. Image.network(_detail.goodInfo.image1, height: 340), // 图片
  64. Column(
  65. mainAxisAlignment: MainAxisAlignment.center,
  66. crossAxisAlignment: CrossAxisAlignment.start,
  67. children: <Widget>[
  68. // 商品名
  69. Padding(
  70. padding:
  71. const EdgeInsets.only(top: 20.0, left: 12.0, right: 12.0),
  72. child: Text(
  73. _detail.goodInfo.goodsName,
  74. style: TextStyle(fontSize: 18.0, color: Colors.black),
  75. ),
  76. ),
  77. // 商品编号
  78. Padding(
  79. padding:
  80. const EdgeInsets.only(top: 12.0, left: 12.0, right: 12.0),
  81. child: Text('编号:${_detail.goodInfo.goodsSerialNumber}'),
  82. ),
  83. // 商品价格
  84. Padding(
  85. padding:
  86. const EdgeInsets.only(top: 8.0, left: 12.0, right: 12.0),
  87. child: Row(
  88. crossAxisAlignment: CrossAxisAlignment.end,
  89. children: <Widget>[
  90. Text('¥${_detail.goodInfo.presentPrice}',
  91. style:
  92. TextStyle(fontSize: 16.0, color: Colors.red)),
  93. Padding(
  94. padding: const EdgeInsets.only(left: 16.0),
  95. child: Text('市场价:',
  96. style: TextStyle(color: Colors.black))),
  97. Text('¥${_detail.goodInfo.oriPrice}',
  98. style: TextStyle(
  99. decoration: TextDecoration.lineThrough,
  100. color: Colors.black26)),
  101. ]),
  102. ),
  103. Container(
  104. height: 8.0,
  105. color: Colors.black12,
  106. margin: const EdgeInsets.only(top: 4.0),
  107. ),
  108. Container(
  109. alignment: Alignment.centerLeft,
  110. padding: const EdgeInsets.all(12.0),
  111. child: Text('说明:>急速送达 >正品保证',
  112. style: TextStyle(fontSize: 16.0, color: Colors.red)),
  113. ),
  114. Container(height: 8.0, color: Colors.black12)
  115. ],
  116. ),
  117. ],
  118. ),
  119. ),
  120. );
  121. }
  122. }