Parcourir la source

[feat]亲密度分析,截图回复Tab下,自定义嵌套TabBar的样式

hezihao il y a 7 mois
Parent
commit
6f9ea4b385

+ 3 - 0
assets/color/business_color.xml

@@ -53,4 +53,7 @@
 
     <!-- 亲密度分析,数值的图标的背景颜色 -->
     <color name="bg_report_value_icon">#FFF6F5FA</color>
+
+    <color name="bg_purple_tab1">#FF7D46FC</color>
+    <color name="bg_purple_tab2">#FFBC87FF</color>
 </resources>

+ 1 - 0
assets/color/common_color.xml

@@ -13,6 +13,7 @@
     <color name="white60">#99FFFFFF</color>
     <color name="white55">#8CFFFFFF</color>
     <color name="white50">#80FFFFFF</color>
+    <color name="white53">#87FFFFFF</color>
     <color name="white45">#73FFFFFF</color>
     <color name="white40">#66FFFFFF</color>
     <color name="white35">#59FFFFFF</color>

+ 6 - 6
lib/di/get_it.config.dart

@@ -95,9 +95,15 @@ extension GetItInjectableX on _i174.GetIt {
     gh.factory<_i666.IntimacyAnalyseUploadController>(
       () => _i666.IntimacyAnalyseUploadController(),
     );
+    gh.factory<_i510.ConversationAnalysisController>(
+      () => _i510.ConversationAnalysisController(),
+    );
     gh.factory<_i279.IntimacyAnalyseScreenshotReplyController>(
       () => _i279.IntimacyAnalyseScreenshotReplyController(),
     );
+    gh.factory<_i464.ScanImageReplyController>(
+      () => _i464.ScanImageReplyController(),
+    );
     gh.factory<_i248.KeyboardGuidePageController>(
       () => _i248.KeyboardGuidePageController(),
     );
@@ -107,12 +113,6 @@ extension GetItInjectableX on _i174.GetIt {
     gh.factory<_i415.KeyboardMethodHandler>(
       () => _i415.KeyboardMethodHandler(),
     );
-    gh.factory<_i510.ConversationAnalysisController>(
-      () => _i510.ConversationAnalysisController(),
-    );
-    gh.factory<_i464.ScanImageReplyController>(
-      () => _i464.ScanImageReplyController(),
-    );
     gh.singleton<_i361.Dio>(
       () => networkModule.createStreamDio(),
       instanceName: 'streamDio',

+ 58 - 48
lib/module/intimacy_analyse/screenshot_reply/intimacy_analyse_screenshot_reply_view.dart

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:keyboard/base/base_view.dart';
@@ -23,6 +24,7 @@ class IntimacyAnalyseScreenshotReplyView
   Widget buildBody(BuildContext context) {
     return Column(
       children: [
+        SizedBox(height: 13.h),
         // TabBar
         _buildTabBar(),
         // 内容
@@ -32,56 +34,64 @@ class IntimacyAnalyseScreenshotReplyView
   }
 
   /// TabBar
-  TabBar _buildTabBar() {
-    return TabBar(
-      // 是否可以滚动
-      isScrollable: true,
-      // 去除底部的黑线
-      dividerHeight: 0,
-      // 去除左边的边距,让Tab居中
-      tabAlignment: TabAlignment.start,
-      // 指示器的颜色
-      indicator: _buildGradientLineIndicator(),
-      // 选中时的颜色
-      labelStyle: TextStyle(
-        fontSize: 17.sp,
-        fontWeight: FontWeight.bold,
-        color: ColorName.white,
+  Widget _buildTabBar() {
+    return Container(
+      padding: EdgeInsets.symmetric(vertical: 2.w, horizontal: 2.w),
+      decoration: BoxDecoration(
+        color: ColorName.white50,
+        borderRadius: BorderRadius.all(Radius.circular(18.r)),
       ),
-      // 未选中时的颜色
-      unselectedLabelStyle: TextStyle(
-        fontSize: 17.sp,
-        color: ColorName.white70,
-      ),
-      // 配置Tab数据
-      tabs:
-          controller.tabBarList.map((tab) {
-            return Tab(text: tab);
-          }).toList(),
-      controller: controller.tabController,
-      onTap: (index) {
-        controller.handleTabChange(index);
-      },
-    );
-  }
-
-  // 自定义渐变指示器
-  CustomTabIndicator _buildGradientLineIndicator() {
-    return CustomTabIndicator(
-      // 指示器的宽度
-      width: 16.0,
-      // 指示器的形状,圆角
-      strokeCap: StrokeCap.round,
-      // 设置渐变色
-      gradient: LinearGradient(
-        colors: [ColorName.colorBrand, ColorName.colorAuxiliary1],
-        begin: Alignment.centerLeft,
-        end: Alignment.centerRight,
+      child: TabBar(
+        // 是否可以滚动
+        isScrollable: false,
+        // Tab居中
+        tabAlignment: TabAlignment.center,
+        // 去除底部的黑线
+        dividerHeight: 0,
+        indicatorPadding: EdgeInsets.zero,
+        // 让Tab严格贴近背景,默认左右会有padding
+        indicatorSize: TabBarIndicatorSize.tab,
+        // 去除Tab默认的padding,否则Tab之间会有默认的间距
+        labelPadding: EdgeInsets.zero,
+        // 渐变指示器
+        indicator: BoxDecoration(
+          // 渐变背景
+          gradient: LinearGradient(
+            colors: [ColorName.bgPurpleTab1, ColorName.bgPurpleTab2],
+            begin: Alignment.centerLeft,
+            end: Alignment.centerRight,
+          ),
+          shape: BoxShape.rectangle,
+          borderRadius: BorderRadius.all(Radius.circular(47.r)),
+        ),
+        // 选中时的颜色
+        labelStyle: TextStyle(
+          fontSize: 12.sp,
+          fontWeight: FontWeight.w700,
+          color: ColorName.white,
+        ),
+        // 未选中时的颜色
+        unselectedLabelStyle: TextStyle(
+          fontSize: 12.sp,
+          color: ColorName.black60,
+          fontWeight: FontWeight.w400,
+        ),
+        // 配置Tab数据
+        tabs:
+            controller.tabBarList.mapIndexed((int index, tabName) {
+              return Tab(
+                height: 38.h,
+                child: SizedBox(
+                  width: 127.w,
+                  child: Center(child: Text(tabName)),
+                ),
+              );
+            }).toList(),
+        controller: controller.tabController,
+        onTap: (index) {
+          controller.handleTabChange(index);
+        },
       ),
-      // 指示器距离Tab的外边距
-      insets: EdgeInsets.only(top: 9),
-      // 指示器的高度
-      borderSide: BorderSide(width: 4),
     );
   }
 

+ 9 - 0
lib/resource/colors.gen.dart

@@ -46,6 +46,12 @@ class ColorName {
   /// Color: #FFBC87FF
   static const Color bgOptionSelectSelected2 = Color(0xFFBC87FF);
 
+  /// Color: #FF7D46FC
+  static const Color bgPurpleTab1 = Color(0xFF7D46FC);
+
+  /// Color: #FFBC87FF
+  static const Color bgPurpleTab2 = Color(0xFFBC87FF);
+
   /// Color: #FFFAF9FC
   static const Color bgReportOverview = Color(0xFFFAF9FC);
 
@@ -250,6 +256,9 @@ class ColorName {
   /// Color: #80FFFFFF
   static const Color white50 = Color(0x80FFFFFF);
 
+  /// Color: #87FFFFFF
+  static const Color white53 = Color(0x87FFFFFF);
+
   /// Color: #8CFFFFFF
   static const Color white55 = Color(0x8CFFFFFF);