intimacy_analyse_page.dart 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_screenutil/flutter_screenutil.dart';
  3. import 'package:get/get.dart';
  4. import 'package:keyboard/base/base_page.dart';
  5. import 'package:keyboard/module/intimacy_analyse/screenshot_reply/intimacy_analyse_screenshot_reply_view.dart';
  6. import 'package:nested_scroll_views/material.dart';
  7. import '../../resource/assets.gen.dart';
  8. import '../../resource/colors.gen.dart';
  9. import '../../router/app_page_arguments.dart';
  10. import '../../router/app_pages.dart';
  11. import '../../widget/tabbar/custom_tab_indicator.dart';
  12. import 'analyse_report/intimacy_analyse_report_view.dart';
  13. import 'enums/intimacy_analyse_tab.dart';
  14. import 'intimacy_analyse_controller.dart';
  15. /// 亲密度报告页
  16. class IntimacyAnalysePage extends BasePage<IntimacyAnalyseController> {
  17. const IntimacyAnalysePage({super.key});
  18. @override
  19. bool immersive() {
  20. // 开启沉浸式
  21. return true;
  22. }
  23. @override
  24. backgroundColor() {
  25. return Colors.white;
  26. }
  27. /// 跳转
  28. static start({
  29. IntimacyAnalyseTab tab = IntimacyAnalyseTab.intimacyAnalyseReport,
  30. }) {
  31. Map<String, dynamic> args = {
  32. // Tab索引
  33. AppPageArguments.index: tab.tabIndex,
  34. };
  35. Get.toNamed(RoutePath.intimacyAnalyse, arguments: args);
  36. }
  37. @override
  38. Widget buildBody(BuildContext context) {
  39. return Scaffold(
  40. backgroundColor: backgroundColor(),
  41. body: Container(
  42. decoration: BoxDecoration(
  43. image: DecorationImage(
  44. image: Assets.images.bgIntimacyAnalyse.provider(),
  45. fit: BoxFit.fill,
  46. ),
  47. ),
  48. child: Column(
  49. children: [_buildStatusBar(), _buildTopBar(), _buildContent()],
  50. ),
  51. ),
  52. );
  53. }
  54. /// 导航栏占位
  55. Widget _buildStatusBar() {
  56. return Container(
  57. // 导航栏高度
  58. height: MediaQuery.of(Get.context!).padding.top,
  59. );
  60. }
  61. /// 顶部栏
  62. Widget _buildTopBar() {
  63. return Container(
  64. // 宽度撑满父组件
  65. width: double.infinity,
  66. // 背景颜色
  67. color: Colors.transparent,
  68. // padding: EdgeInsets.symmetric(horizontal: 16.0),
  69. child: ConstrainedBox(
  70. // 设置宽度为无限大,撑满父组件,否则Stack获取不到高度,会报错
  71. constraints: BoxConstraints(minWidth: double.infinity),
  72. child: Stack(
  73. alignment: Alignment.center,
  74. children: [
  75. // 返回按钮
  76. Positioned(
  77. left: 16.0,
  78. child: GestureDetector(
  79. onTap: controller.clickBack,
  80. child: Assets.images.iconWhiteBackArrow.image(
  81. width: 24.w,
  82. height: 24.h,
  83. ),
  84. ),
  85. ),
  86. // TabBar
  87. Positioned(child: _buildTabBar()),
  88. ],
  89. ),
  90. ),
  91. );
  92. }
  93. /// 指示器
  94. TabBar _buildTabBar() {
  95. return TabBar(
  96. // 是否可以滚动
  97. isScrollable: true,
  98. // 去除底部的黑线
  99. dividerHeight: 0,
  100. // 去除左边的边距,让Tab居中
  101. tabAlignment: TabAlignment.start,
  102. // 指示器的颜色
  103. indicator: _buildGradientLineIndicator(),
  104. // 选中时的颜色
  105. labelStyle: TextStyle(
  106. fontSize: 17.sp,
  107. fontWeight: FontWeight.bold,
  108. color: ColorName.white,
  109. ),
  110. // 未选中时的颜色
  111. unselectedLabelStyle: TextStyle(
  112. fontSize: 17.sp,
  113. color: ColorName.white70,
  114. ),
  115. // 配置Tab数据
  116. tabs:
  117. controller.tabBarList.map((tab) {
  118. return Tab(text: tab);
  119. }).toList(),
  120. controller: controller.tabController,
  121. onTap: (index) {
  122. controller.handleTabChange(index);
  123. },
  124. );
  125. }
  126. // 自定义渐变指示器
  127. CustomTabIndicator _buildGradientLineIndicator() {
  128. return CustomTabIndicator(
  129. // 指示器的宽度
  130. width: 16.0,
  131. // 指示器的形状,圆角
  132. strokeCap: StrokeCap.round,
  133. // 设置渐变色
  134. gradient: LinearGradient(
  135. colors: [ColorName.colorBrand, ColorName.colorAuxiliary1],
  136. begin: Alignment.centerLeft,
  137. end: Alignment.centerRight,
  138. ),
  139. // 指示器距离Tab的外边距
  140. insets: EdgeInsets.only(top: 9),
  141. // 指示器的高度
  142. borderSide: BorderSide(width: 4),
  143. );
  144. }
  145. /// PageView
  146. Widget _buildContent() {
  147. return Obx(() {
  148. return Expanded(
  149. child: NestedPageView(
  150. controller: controller.pageController,
  151. // 保持页面缓存
  152. wantKeepAlive: true,
  153. // 是否禁止滑动切换
  154. physics:
  155. controller.isPageViewSwipeEnabled.value
  156. ? ScrollPhysics()
  157. : NeverScrollableScrollPhysics(),
  158. onPageChanged: (index) {
  159. controller.handlePageChange(index);
  160. },
  161. children: [
  162. // 报告Tab
  163. IntimacyAnalyseReportView(),
  164. // 截图回复Tab
  165. IntimacyAnalyseScreenshotReplyView(),
  166. ],
  167. ),
  168. );
  169. });
  170. }
  171. }