intimacy_analyse_page.dart 4.1 KB

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