Ver código fonte

[feat]亲密度分析,截图回复-对话分析Tab,调整选项布局,使用GridView而不是Wrap

hezihao 7 meses atrás
pai
commit
28aba6ec5b

+ 1 - 0
lib/module/intimacy_analyse/screenshot_reply/intimacy_analyse_screenshot_reply_view.dart

@@ -26,6 +26,7 @@ class IntimacyAnalyseScreenshotReplyView
         SizedBox(height: 13.h),
         // TabBar
         _buildTabBar(),
+        SizedBox(height: 10.h),
         // 内容
         _buildContent(),
       ],

+ 47 - 19
lib/module/intimacy_analyse/widget/option_select_widget.dart

@@ -74,18 +74,44 @@ class OptionSelectWidget extends StatelessWidget {
 
   /// 选项列表
   Widget _buildOptionList() {
-    return Wrap(
-      direction: Axis.horizontal,
-      alignment: WrapAlignment.start,
-      // 主轴间距
-      spacing: 8.0,
-      // 交叉轴间距
-      runSpacing: 7.0,
-      children: [
-        for (var option in optionSelect.options)
-          _buildOptionItem(optionSelect, option),
-      ],
+    // 固定一行3列,每项的宽度一样
+    return GridView.builder(
+      // 去掉默认的Padding,默认会有一个默认的顶部padding大小
+      padding: EdgeInsets.zero,
+      // 包裹内容
+      shrinkWrap: true,
+      // 禁止滚动
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        // 一行3列
+        crossAxisCount: 3,
+        // 垂直方向的间距
+        crossAxisSpacing: 8.0,
+        // 水平方向的间距
+        mainAxisSpacing: 7.0,
+        // 子项的宽高比
+        childAspectRatio: 2.6,
+      ),
+      itemCount: optionSelect.options.length,
+      itemBuilder: (context, index) {
+        OptionSelectItem option = optionSelect.options[index];
+        return _buildOptionItem(optionSelect, option);
+      },
     );
+
+    // 流式布局,类似安卓的FlowLayout,1列不固定3个,放不下就自动换行
+    // return Wrap(
+    //   direction: Axis.horizontal,
+    //   alignment: WrapAlignment.start,
+    //   // 主轴间距
+    //   spacing: 8.0,
+    //   // 交叉轴间距
+    //   runSpacing: 7.0,
+    //   children: [
+    //     for (var option in optionSelect.options)
+    //       _buildOptionItem(optionSelect, option),
+    //   ],
+    // );
   }
 
   /// 选项
@@ -124,15 +150,17 @@ class OptionSelectWidget extends StatelessWidget {
         optionSelectCallback(rowConfig, optionItem);
       },
       child: Container(
-        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
+        // padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
         decoration: bgDecoration,
-        child: Text(
-          optionItem.name,
-          style: TextStyle(
-            fontSize: 13.sp,
-            fontWeight: FontWeight.w400,
-            // 文字颜色,选中时为白色,未选中时为黑色
-            color: optionItem.selected ? ColorName.white : ColorName.black80,
+        child: Center(
+          child: Text(
+            optionItem.name,
+            style: TextStyle(
+              fontSize: 13.sp,
+              fontWeight: FontWeight.w400,
+              // 文字颜色,选中时为白色,未选中时为黑色
+              color: optionItem.selected ? ColorName.white : ColorName.black80,
+            ),
           ),
         ),
       ),