refactor(measure): 重构测量项选择器

lib/view/measure/combo_widget.dart

@@ -5,14 +5,14 @@ import 'package:flutter/material.dart';
 import 'package:fis_theme/theme.dart';
 import 'package:get/get.dart';
 
-class SpecialCombo extends FStatefulWidget {
-  const SpecialCombo({Key? key}) : super(key: key);
+class SpecialItemHR extends FStatefulWidget {
+  const SpecialItemHR({Key? key}) : super(key: key);
 
   @override
-  FState<SpecialCombo> createState() => _SpecialComboState();
+  FState<SpecialItemHR> createState() => _SpecialItemHRState();
 }
 
-class _SpecialComboState extends FState<SpecialCombo> {
+class _SpecialItemHRState extends FState<SpecialItemHR> {
   final application = Get.find<IApplication>();
 
   late final item = application.activeMeasureItem!;
@@ -32,12 +32,11 @@ class _SpecialComboState extends FState<SpecialCombo> {
         decoration: BoxDecoration(
           color: selectedIndex == index
               ? const Color.fromARGB(255, 101, 211, 71)
-              : Colors.transparent,
-          border: Border.all(color: Colors.grey),
+              : const Color.fromRGBO(70, 70, 70, 1),
+          border: Border.all(color: const Color.fromRGBO(124, 124, 124, 1)),
           borderRadius: BorderRadius.circular(5),
         ),
         margin: const EdgeInsets.symmetric(horizontal: 11, vertical: 5),
-        padding: const EdgeInsets.all(8),
         child: FCenter(
           child: FText(
             index.toString(),
@@ -52,57 +51,65 @@ class _SpecialComboState extends FState<SpecialCombo> {
 
   @override
   FWidget build(BuildContext context) {
-    return FColumn(
-      children: [
-        FContainer(
-          padding: const EdgeInsets.symmetric(
-            vertical: 6,
-          ),
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(4),
-            color: FTheme.ins.colorScheme.primary,
-          ),
-          margin: const EdgeInsets.symmetric(
-            horizontal: 11,
-          ),
-          width: double.infinity,
-          child: const FCenter(
-            child: FText(
-              'Time',
-              style: TextStyle(
-                color: Colors.white,
+    return FContainer(
+      padding: const EdgeInsets.only(top: 10, bottom: 5),
+      decoration: const BoxDecoration(
+        color: Color.fromRGBO(60, 60, 60, 1),
+        borderRadius: BorderRadius.only(
+            bottomLeft: Radius.circular(5), bottomRight: Radius.circular(5)),
+      ),
+      child: FColumn(
+        children: [
+          FContainer(
+            padding: const EdgeInsets.symmetric(
+              vertical: 6,
+            ),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(4),
+              color: FTheme.ins.colorScheme.primary,
+            ),
+            margin: const EdgeInsets.symmetric(
+              horizontal: 11,
+            ),
+            width: double.infinity,
+            child: const FCenter(
+              child: FText(
+                'Time',
+                style: TextStyle(
+                  color: Colors.white,
+                ),
               ),
             ),
           ),
-        ),
-        FColumn(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            FRow(
-              children: const [
-                FSizedBox(
-                  width: 11,
-                ),
-                FText(
-                  'Heart Cycle',
-                  textAlign: TextAlign.start,
-                  style: TextStyle(
-                    color: Colors.white,
+          FColumn(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              FRow(
+                children: const [
+                  FSizedBox(
+                    width: 11,
                   ),
-                ),
-              ],
-            ),
-            FGridView.count(
-              shrinkWrap: true,
-              crossAxisCount: 2,
-              childAspectRatio: 3,
-              children: [1, 2, 3, 4, 5].map((e) {
-                return buildHRButton(e);
-              }).toList(),
-            ),
-          ],
-        ),
-      ],
+                  FText(
+                    'Heart Cycle',
+                    textAlign: TextAlign.start,
+                    style: TextStyle(
+                      color: Colors.white,
+                    ),
+                  ),
+                ],
+              ),
+              FGridView.count(
+                shrinkWrap: true,
+                crossAxisCount: 2,
+                childAspectRatio: 3,
+                children: [1, 2, 3, 4, 5].map((e) {
+                  return buildHRButton(e);
+                }).toList(),
+              ),
+            ],
+          ),
+        ],
+      ),
     );
   }
 }

lib/view/measure/measure_tool.dart

@@ -25,50 +25,59 @@ class LeftSiderSelectMeasure extends FStatefulWidget {
 }
 
 class LeftSiderSelectMeasureState extends FState<LeftSiderSelectMeasure> {
-  final ScrollController scrollController = ScrollController();
-
-  late final application = Get.find<IApplication>();
-  late final measureHandler = Get.find<MeasureHandler>();
-
   /// 数据
-  late final measureData = Get.find<MeasureDataController>();
+  final application = Get.find<IApplication>();
+  final measureHandler = Get.find<MeasureHandler>();
+  final measureData = Get.find<MeasureDataController>();
   final playerController = Get.find<IPlayerController>() as VidPlayerController;
-
-  /// 测量项控制器
   final measureMetaController = Get.find<MeasureMetaController>();
-  // final topMeasureItem = Get.put<ITopMeasureItem>();
-
-  /// 当前选中的测量项目
-  late String activeName = measureData.getItemMetaList[0].description;
-
-  /// 当前组合测量项
-  ItemMeta? comboItemMeta;
 
-  int? comboItemMetaActivedIndex;
+  /// 当前选中的测量项下标
+  int activeItemIndex = 0;
 
-  /// 是否展开组合测量项
-  bool isCombo = false;
-
-  /// 是否特殊组合测量项
-  late bool isSpecialCombo = false;
+  /// 当前选中的子测量项下标
+  int activeChildItemIndex = 0;
 
+  /// Styles
   late String fontFamily;
+  static const Color buttonBackgroundColor = Color.fromRGBO(70, 70, 70, 1);
+  static const Color buttonBorderColor = Color.fromRGBO(124, 124, 124, 1);
+  static const Color buttonBorderHighlight = Color.fromRGBO(124, 124, 124, 1);
+  static const Color buttonTextColor = Colors.white;
+  static const Color childButtonHighlight = Color.fromRGBO(84, 144, 249, 1);
+  static const Color childContainerBackground = Color.fromRGBO(60, 60, 60, 1);
+  static const double buttonBorderHighlightWidth = 1.0;
+
+  /// 触发测量项选中事件
+  void selectItem(int selectIndex) {
+    if (selectIndex == activeItemIndex) return;
+    final itemMeta = measureData.curItemMetaList[selectIndex];
+    changeItem(itemMeta);
+    setState(() {
+      activeItemIndex = selectIndex;
+      activeChildItemIndex = 0;
+    });
+  }
 
-  void workingChildChanged(sender, int e) {
-    comboItemMetaActivedIndex = e;
+  /// 触发子测量项选中事件
+  void selectChildItem(int selectIndex) {
+    if (selectIndex == activeChildItemIndex) return;
+    final item = application.activeMeasureItem!;
+    if (item is ITopMeasureItem) {
+      item.switchChild(selectIndex);
+      activeChildItemIndex = selectIndex;
+    }
     setState(() {});
   }
 
   /// 切换测量项
   void changeItem(ItemMeta itemMeta) {
-    activeName = itemMeta.description;
-    isSpecialCombo = MeasurespecialsupportedTerms.items.contains(activeName);
     try {
       application.switchItem(itemMeta);
       final item = application.activeMeasureItem!;
       if (item is ITopMeasureItem) {
         item.switchChild(0);
-        item.workingChildChanged.addListener(workingChildChanged);
+        item.workingChildChanged.addListener(_onWorkingChildChanged);
       }
     } catch (e) {
       logger.e("changeItem failed", e);
@@ -78,19 +87,28 @@ class LeftSiderSelectMeasureState extends FState<LeftSiderSelectMeasure> {
     }
   }
 
-  /// 当前测量数据源变更
-  void itemMetaList(Object s, dynamic e) {
+  /// 子测量项变化事件监听
+  void _onWorkingChildChanged(sender, int e) {
+    setState(() {
+      activeChildItemIndex = e;
+    });
+  }
+
+  /// TODO:[baka] 当前测量数据源变更 ???
+  void _onItemMetaListChanged(Object s, dynamic e) {
+    print("测量项变更_onItemMetaListChanged");
     try {
       if (e != null) {
         setState(() {});
       }
     } catch (e) {
-      debugPrint("callmethod fail " + e.toString());
+      debugPrint("ItemMetaListChanged fail " + e.toString());
     }
   }
 
-  /// 获取当前图像的测量项，从第一帧取
-  void firstFrameLoaded(Object sender, VidUsImage e) async {
+  /// 首帧加载完成事件监听： 获取当前图像的测量项，从第一帧取
+  void _onFirstFrameLoaded(Object sender, VidUsImage e) async {
+    print("onFirstFrameLoaded");
     List<String> getModes = [];
     for (var element in e.visuals[0].modes) {
       getModes.add(element.type.toString().split('.')[1]);
@@ -106,7 +124,6 @@ class LeftSiderSelectMeasureState extends FState<LeftSiderSelectMeasure> {
     var measureApplicationDTO =
         await measureData.getMeasureApplication.call(measureModeSelection);
     if (measureApplicationDTO != null) {
-      /// 模式版本
       measureData.measureApplicationVersion =
           measureApplicationDTO.version ?? '';
       measureData.availableModes = measureApplicationDTO.availableModes ?? [];
@@ -114,8 +131,6 @@ class LeftSiderSelectMeasureState extends FState<LeftSiderSelectMeasure> {
         measureData.currentMode = 'TPPTissue';
       }
       measureMetaController.setAvailableModes(measureData.currentMode);
-
-      activeName = measureData.getItemMetaList[0].description;
       setState(() {});
     }
     getNoteCommentsList();
@@ -131,289 +146,218 @@ class LeftSiderSelectMeasureState extends FState<LeftSiderSelectMeasure> {
     );
     measureData.measureCommentItemResult =
         measureCommentItemResult?.commentItems ?? [];
-
     measureCommentItemResult?.commentItems?.forEach((element) {
       commentsList.add(element.text ?? '');
     });
     measureData.getCommentsList = commentsList;
   }
 
-  void getItemMetaListChanged(sender, e) {
-    isCombo = false;
-    measureData.getTopItemMetaList = measureData.getItemMetaList;
-    measureData.getBottomItemMetaList = [];
-    if (measureData.getItemMetaList.isNotEmpty) {
-      changeItem(measureData.getItemMetaList[0]);
+  /// 测量项列表变化事件监听
+  void _onCurItemMetaListChanged(sender, e) {
+    print("_onCurItemMetaListChanged");
+    if (measureData.curItemMetaList.isNotEmpty) {
+      changeItem(measureData.curItemMetaList[0]);
     }
     setState(() {});
   }
 
   @override
   void initState() {
-    playerController.firstFrameLoaded.addListener(
-      (firstFrameLoaded),
-    );
-    measureData.getItemMetaListChanged.addListener(getItemMetaListChanged);
-    measureData.itemMetaListChanged.addListener(itemMetaList);
-
+    playerController.firstFrameLoaded.addListener(_onFirstFrameLoaded);
+    measureData.curItemMetaListChanged.addListener(_onCurItemMetaListChanged);
+    measureData.itemMetaListChanged.addListener(_onItemMetaListChanged);
     super.initState();
   }
 
   @override
   dispose() {
     super.dispose();
-    playerController.firstFrameLoaded.removeListener(
-      (firstFrameLoaded),
-    );
-    measureData.getItemMetaListChanged.removeListener(getItemMetaListChanged);
-    measureData.itemMetaListChanged.removeListener(itemMetaList);
-
+    playerController.firstFrameLoaded.removeListener(_onFirstFrameLoaded);
+    measureData.curItemMetaListChanged
+        .removeListener(_onCurItemMetaListChanged);
+    measureData.itemMetaListChanged.removeListener(_onItemMetaListChanged);
     final item = application.activeMeasureItem;
     if (item != null && item is ITopMeasureItem) {
-      item.workingChildChanged.removeListener(workingChildChanged);
+      item.workingChildChanged.removeListener(_onWorkingChildChanged);
     }
   }
 
   @override
   FWidget build(BuildContext context) {
     fontFamily = Theme.of(context).textTheme.labelLarge!.fontFamily!;
-    return FSingleChildScrollView(
-      controller: ScrollController(),
-      key: UniqueKey(),
-      child: FColumn(
-        children: [
-          _buildFGridView(measureData.getTopItemMetaList),
-          if (isCombo && !isSpecialCombo) _buildCombo(),
-          if (isCombo && isSpecialCombo) const SpecialCombo(),
-          _buildFGridView(measureData.getBottomItemMetaList),
-        ],
-      ),
-    );
+    return buildItemsListView(measureData.curItemMetaList);
   }
 
-  /// 未选中的普通测量项 选中事件
-  void chooseMeasure(ItemMeta itemMeta) {
-    isCombo = false;
-    changeItem(itemMeta);
-    measureData.getTopItemMetaList = measureData.getItemMetaList;
-    measureData.getBottomItemMetaList = [];
+  /// 构建测量项列表
+  FWidget buildItemsListView(List<ItemMeta> itemMetaList) {
+    return FListView(
+        shrinkWrap: true,
+        controller: ScrollController(),
+        children: List.generate(itemMetaList.length, (i) {
+          return _buildItemContainer(i);
+        }));
   }
 
-  void chooseComboMeasure(ItemMeta itemMeta) {
-    isCombo = true;
-    changeItem(itemMeta);
-    List<ItemMeta> top = [];
-    List<ItemMeta> bottom = [];
-    List<ItemMeta> getItemMetaList = measureData.getItemMetaList;
-    for (int i = 0; i < getItemMetaList.length; i++) {
-      if (i <= getItemMetaList.indexOf(itemMeta)) {
-        top.add(getItemMetaList[i]);
-      } else {
-        bottom.add(getItemMetaList[i]);
-      }
-      measureData.getTopItemMetaList = top.toSet().toList();
-      measureData.getBottomItemMetaList = bottom.toSet().toList();
-      if (i == getItemMetaList.indexOf(itemMeta)) {
-        comboItemMeta = getItemMetaList[i];
-        comboItemMetaActivedIndex = 0;
-      }
-    }
-  }
-
-  FWidget _buildComboItem(ItemMeta itemMeta, int index) {
-    FWidget child;
-    if (comboItemMetaActivedIndex == index) {
-      child = FElevatedButton(
-        onPressed: () {
-          final item = application.activeMeasureItem!;
-          if (item is ITopMeasureItem) {
-            item.switchChild(index);
-            comboItemMetaActivedIndex = index;
-          }
-          setState(() {});
-        },
-        child: FText(
-          itemMeta.description,
-          style: const TextStyle(
-            color: Colors.white,
-          ),
-        ),
-      );
-    } else {
-      child = FOutlinedButton(
-        onPressed: () {
-          final item = application.activeMeasureItem!;
-          if (item is ITopMeasureItem) {
-            item.switchChild(index);
-            comboItemMetaActivedIndex = index;
-          }
-          setState(() {});
-        },
-        style: OutlinedButton.styleFrom(
-          side: const BorderSide(
-            color: Color.fromRGBO(124, 124, 124, 1),
-          ),
-        ),
-        child: FText(
-          itemMeta.description,
-          style: const TextStyle(
-            color: Colors.white,
+  /// 构建测量项容器
+  FWidget _buildItemContainer(int itemMetaIndex) {
+    final itemMeta = measureData.curItemMetaList[itemMetaIndex];
+    final isActived = itemMetaIndex == activeItemIndex; // 是否选中
+    final hasChildItem = itemMeta.childItems.isNotEmpty; //是否为组合测量项
+    return FContainer(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(5),
+        border: isActived && hasChildItem
+            ? Border.all(
+                color: buttonBorderHighlight, width: buttonBorderHighlightWidth)
+            : null,
+      ),
+      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
+      child: FColumn(children: [
+        if (isActived && hasChildItem) ...[
+          _buildItemTitle(itemMetaIndex),
+          _buildChildItemContainer(itemMeta),
+        ] else
+          FContainer(
+            width: double.infinity,
+            child: _buildItemButton(itemMetaIndex),
           ),
-        ),
-      );
-    }
-    return child;
+      ]),
+    );
   }
 
-  /// 组合测量项打开的ui
-  FWidget _buildCombo() {
-    return FColumn(
-      mainAxisSize: MainAxisSize.max,
-      children: [
-        FContainer(
-          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
-          color: const Color.fromRGBO(70, 70, 70, 1),
-          child: FColumn(
-            children: (comboItemMeta?.childItems ?? [])
-                .asMap()
-                .entries
-                .map(
-                  (e) => FContainer(
-                    width: double.infinity,
-                    padding: const EdgeInsets.symmetric(
-                      vertical: 2,
-                    ),
-                    child: _buildComboItem(
-                      e.value,
-                      e.key,
-                    ),
-                  ),
-                )
-                .toList(),
+  // 构建测量项按钮
+  FWidget _buildItemButton(int itemIndex) {
+    final itemMeta = measureData.curItemMetaList[itemIndex];
+    final ifShowCN = i18nBook.isCurrentChinese && // 中文环境下显示中英文，否则只显示英文
+        MeasureLanguage.t(itemMeta.description) != itemMeta.description;
+    final isActived = itemIndex == activeItemIndex;
+    return FElevatedButton(
+      onPressed: () => selectItem(itemIndex),
+      child: FColumn(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          if (ifShowCN)
+            FText(
+              MeasureLanguage.t(itemMeta.description),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(
+                color: isActived ? null : buttonTextColor,
+                fontFamily: fontFamily,
+                fontSize: 12,
+              ),
+            ),
+          FText(
+            itemMeta.description,
+            style: TextStyle(
+              color: isActived ? null : buttonTextColor,
+            ),
           ),
+        ],
+      ),
+      style: ElevatedButton.styleFrom(
+        backgroundColor: isActived ? null : buttonBackgroundColor,
+        fixedSize: const Size.fromHeight(
+          50,
+        ),
+        side: BorderSide(
+          color: isActived ? Colors.transparent : buttonBorderColor,
         ),
-      ],
+      ),
     );
   }
 
-  FWidget _buildFGridView(List<ItemMeta> itemMeta) {
-    return FGridView.count(
-      shrinkWrap: true,
-      crossAxisCount: 1,
-      childAspectRatio: 5,
-      controller: ScrollController(),
-      children: itemMeta.map((e) {
-        if (e.description == activeName) {
-          // 选中的测量项
-          return _buildItemMetaContainer(e, () {});
-        } else {
-          if (e.childItems.isEmpty) {
-            return _buildItemMetaContainer(
-              e,
-              () => chooseMeasure(e),
-            );
-          } else {
-            return _buildItemMetaContainer(
-              e,
-              () => chooseComboMeasure(e),
-            );
-          }
-        }
-      }).toList(),
+  // 构建测量项标签【用于组合测量项顶部】
+  FWidget _buildItemTitle(int itemIndex) {
+    final itemMeta = measureData.curItemMetaList[itemIndex];
+    final ifShowCN = i18nBook.isCurrentChinese && // 中文环境下显示中英文，否则只显示英文
+        MeasureLanguage.t(itemMeta.description) != itemMeta.description;
+    return FContainer(
+      decoration: const BoxDecoration(
+        border: Border(
+          bottom: BorderSide(
+              color: buttonBorderHighlight, width: buttonBorderHighlightWidth),
+        ),
+      ),
+      child: FSizedBox(
+        height: 50,
+        width: double.infinity,
+        child: FColumn(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            if (ifShowCN)
+              FText(
+                MeasureLanguage.t(itemMeta.description),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  color: buttonTextColor,
+                  fontFamily: fontFamily,
+                  fontSize: 12,
+                ),
+              ),
+            FText(
+              itemMeta.description,
+              style: const TextStyle(
+                color: buttonTextColor,
+              ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 
-  FWidget _buildItemMetaContainer(ItemMeta e, Function onTap) {
-    FWidget measure;
-    if (e.description == activeName) {
-      measure = FElevatedButton(
-        onPressed: () => onTap.call(),
-        child: i18nBook.isCurrentChinese &&
-                MeasureLanguage.t(e.description) != e.description
-            ? FColumn(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  FText(
-                    MeasureLanguage.t(e.description),
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                    style: TextStyle(
-                      fontFamily: fontFamily,
-                      fontSize: 12,
-                    ),
-                  ),
-                  FText(
-                    e.description,
-                  ),
-                ],
-              )
-            : FText(
-                e.description,
-              ),
-        style: ElevatedButton.styleFrom(
-          fixedSize: const Size.fromHeight(
-            50,
-          ),
-        ),
-      );
+  /// 子测量项容器
+  FWidget _buildChildItemContainer(ItemMeta itemMeta) {
+    final activeName = itemMeta.description;
+    final isSpecial = MeasurespecialsupportedTerms.items.contains(activeName);
+    if (isSpecial) {
+      //是否为特殊组合测量项
+      return const SpecialItemHR();
     } else {
-      measure = FOutlinedButton(
-        onPressed: () => onTap.call(),
-        child: i18nBook.isCurrentChinese &&
-                MeasureLanguage.t(e.description) != e.description
-            ? FColumn(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  FText(
-                    MeasureLanguage.t(e.description),
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                    style: TextStyle(
-                      color: Colors.white,
-                      fontFamily: fontFamily,
-                      fontSize: 12,
-                    ),
-                  ),
-                  FText(
-                    e.description,
-                    style: const TextStyle(
-                      color: Colors.white,
-                    ),
-                  ),
-                ],
-              )
-            : FText(
-                e.description,
-                style: const TextStyle(
-                  color: Colors.white,
+      return FContainer(
+        decoration: const BoxDecoration(
+          color: childContainerBackground,
+          borderRadius: BorderRadius.only(
+              bottomLeft: Radius.circular(5), bottomRight: Radius.circular(5)),
+        ),
+        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 5),
+        child: FColumn(
+          children: (itemMeta.childItems)
+              .asMap()
+              .entries
+              .map(
+                (e) => _buildChildItemButton(
+                  e.value,
+                  e.key,
                 ),
-              ),
-        style: OutlinedButton.styleFrom(
-          fixedSize: const Size.fromHeight(
-            50,
-          ),
-          side: const BorderSide(
-            color: Color.fromRGBO(124, 124, 124, 1),
-          ),
-          textStyle: const TextStyle(
-            color: Colors.white,
-          ),
+              )
+              .toList(),
         ),
       );
     }
+  }
 
-    return FRow(
-      children: [
-        const FSizedBox(
-          width: 12,
-        ),
-        FExpanded(
-          child: measure,
-        ),
-        const FSizedBox(
-          width: 12,
-        ),
-      ],
-    );
+  // 构建子测量项按钮
+  FWidget _buildChildItemButton(ItemMeta itemMeta, int childItemIndex) {
+    final isActived = childItemIndex == activeChildItemIndex;
+    return FContainer(
+        width: double.infinity,
+        margin: const EdgeInsetsDirectional.all(5),
+        child: FElevatedButton(
+          onPressed: () {
+            selectChildItem(childItemIndex);
+          },
+          child: FText(
+            itemMeta.description,
+          ),
+          style: ElevatedButton.styleFrom(
+            backgroundColor: isActived ? null : buttonBackgroundColor,
+            side: BorderSide(
+              color: isActived ? Colors.transparent : buttonBorderColor,
+            ),
+          ),
+        ));
   }
 }