intimacy_analyse_page.dart 4.3 KB

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