intimacy_analyse_page.dart 4.4 KB

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