子栏目中UI层面实装预览和编辑,鼠标和触控

entry/src/main/ets/pages/Index.ets

@@ -1,12 +1,11 @@
 import { hilog } from '@kit.PerformanceAnalysisKit';
-import { OverlayManager } from '@kit.ArkUI';
 import { TitleTab } from './titletabs/TitleTab'
 import { LeftSideTab } from './leftside/LeftSideTab'
 import { RightSideTab } from './rightside/RightSideTab'
 import { View } from './view/View'
 import { TitleColumnSub } from './titletabs/TitleColumnSub'
 import { mdwInfo } from './displaywindowinfo/DispWinInfo'
-
+import { uiMode } from './eventhub/EventBase'
 const DOMAIN = 0x0000;
 
 //分割线类型,分左和右
@@ -22,7 +21,6 @@ struct Index {
   @Local isDragging:boolean=false;
   @Provider('LeftSideWidth') leftSideWidth:number=mdwInfo.winWidth * 0.1;
   @Provider('RightSideWidth') rightSideWidth:number=mdwInfo.winHeight * 0.1;
-  @Local overlayState:boolean=true;
 
   //利用分割线拖动改变区域容器大小.鼠标和触控整合
   dividerChangeSize(event:MouseEvent|TouchEvent,dividerType:DividerType){
@@ -72,13 +70,13 @@ struct Index {
     //OpenCAX主界面整体布局,采用多行布局
       Column() {
         //头部导航功能区
-        Blank().height(this.overlayState?'15%':'0%')
+        Blank().height(uiMode.state?'15%':'0%')
         //TitleTab().height('15%')
         //分割线
         Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey)
         //工具栏
         Row() {
-          TitleColumnSub({ subOverlayState:this.overlayState!! })
+          TitleColumnSub()
         }.height('4%')
         .align(Alignment.Start)
 
@@ -86,7 +84,7 @@ struct Index {
         Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey)
         Row() {
           //左侧边导航区
-          LeftSideTab().width(this.overlayState?this.leftSideWidth:'0%')
+          LeftSideTab().width(uiMode.state?this.leftSideWidth:'0%')
           // 左拖拽手柄
           Divider().vertical(true).strokeWidth(3).lineCap(LineCapStyle.Round).height('100%').backgroundColor(Color.Grey)
             .onMouse((event) => {
@@ -109,8 +107,8 @@ struct Index {
               this.dividerChangeSize(event,DividerType.RightSide)
             })
           //右侧边导航区
-          RightSideTab().width(this.overlayState?this.rightSideWidth:'0%')
-        }.height(this.overlayState?'77%':'92%')
+          RightSideTab().width(uiMode.state?this.rightSideWidth:'0%')
+        }.height(uiMode.state?'77%':'92%')
         //分割线
         Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey)
         ///状态栏
@@ -123,7 +121,7 @@ struct Index {
         .height('4%')
       }
       TitleTab()
-        .height(this.overlayState?'15%':'0%')
+        .height(uiMode.state?'15%':'0%')
         .backgroundColor(Color.Transparent)
         .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
 

entry/src/main/ets/pages/eventhub/EventBase.ets

@@ -29,9 +29,18 @@ export class SubWinInfo{
   }
 }
 
+@ObservedV2
+export class UIMode{
+  @Trace public state?:boolean;
+  constructor(_uiModeState?:boolean,)
+  {
+    this.state = _uiModeState;
+  }
+}
+
 //窗体保存容器
 export let subWins:Map<string,SubWinInfo>=new Map<string,SubWinInfo>;
-
+export let uiMode:UIMode=new UIMode(true);
 //随机ID
 export function RndId(): string {
   // 获取当前时间戳（毫秒）
@@ -111,6 +120,17 @@ export function EventExecute(event:TitleButton){
     let suffix:Array<string>=['step','stp','prt']
     PickFile(suffix);
   }
+
+  if(event?.btnEvent.command=='MODE_PREVIEW'){
+    uiMode.state=false;
+  }else if(event?.btnEvent.command=='MODE_EDIT'){
+    uiMode.state=true;
+  }
+  if(event?.btnEvent.command=='MODE_MOUSE'){
+
+  }else if(event?.btnEvent.command=='MODE_TOUCH'){
+
+  }
 }
 
 //事件类型:页面

entry/src/main/ets/pages/layout/SubColumn.ets

@@ -60,5 +60,15 @@ export let SwitchSelectFilter:Array<TitleButton>=[
   {btnModel:[ModelType.BASE],btnName:'视图',btnNamed:'',btnIcon:'',btnTips:'视图',btnEvent:{uid:'',command:'',page:'',type:EventType.EVENT,args:[]}},
   {btnModel:[ModelType.BASE],btnName:'图像',btnNamed:'',btnIcon:'',btnTips:'图像',btnEvent:{uid:'',command:'',page:'',type:EventType.EVENT,args:[]}}
 ]
+//预览和编辑
+export let EditMode:Array<TitleButton>=[
+  {btnModel:[ModelType.BASE],btnName:'编辑',btnNamed:'',btnIcon:'base_ui_mode_edit',btnTips:'编辑',btnEvent:{uid:'',command:'MODE_EDIT',page:'',type:EventType.EVENT,args:[]}},
+  {btnModel:[ModelType.BASE],btnName:'预览',btnNamed:'',btnIcon:'base_ui_mode_preview',btnTips:'预览',btnEvent:{uid:'',command:'MODE_PREVIEW',page:'',type:EventType.EVENT,args:[]}},
+]
+//鼠标和触控
+export let ControlMode:Array<TitleButton>=[
+  {btnModel:[ModelType.BASE],btnName:'鼠标',btnNamed:'',btnIcon:'base_control_mode_mouse',btnTips:'鼠标',btnEvent:{uid:'',command:'MODE_MOUSE',page:'',type:EventType.EVENT,args:[]}},
+  {btnModel:[ModelType.BASE],btnName:'触控',btnNamed:'',btnIcon:'base_control_mode_touch',btnTips:'触控',btnEvent:{uid:'',command:'MODE_TOUCH',page:'',type:EventType.EVENT,args:[]}},
+]
 
 

entry/src/main/ets/pages/titletabs/TitleColumnSub.ets

@@ -8,7 +8,9 @@ import {
   SwitchLayout,
   SwitchView,
   SwitchDisplayMode,
-  SwitchSelectFilter
+  SwitchSelectFilter,
+  EditMode,
+  ControlMode
 } from '../layout/SubColumn'
 @ComponentV2
 export struct TitleColumnSub {
@@ -16,8 +18,7 @@ export struct TitleColumnSub {
   @Local dX:number=0;
   @Local dY:number=0;
   @Local viewDialog:CustomDialogController|undefined=undefined;
-  @Param subOverlayState: boolean = true;
-  @Event $subOverlayState: (val: boolean) => void = (val: boolean) => {};
+
   //文件操作目录数据初始化
 
   private ViewDialog(): CustomDialogController {
@@ -63,15 +64,9 @@ export struct TitleColumnSub {
         height: '80%' // 图片高度占满按钮
         })
       SubColumnMenu({menus:SwitchDisplayMode})
+      SubColumnMenu({menus:EditMode})
+      SubColumnMenu({menus:ControlMode})
       Blank().layoutWeight(1)
-      //编辑or预览
-      Button('预览/编辑').onClick(()=>{
-         this.$subOverlayState(!this.subOverlayState);
-      })
-      //
-      Button('鼠标/触控').onClick(()=>{
-                this.$subOverlayState(!this.subOverlayState);
-      })
     }.width('100%')
      .height('100%')
      .backgroundBlurStyle(BlurStyle.Thin,