修改首页布局以及添加本地签名

2024-04-16 19:41:51 +08:00
parent fe18fa1ca6
commit 4eaf337930
16 changed files with 266 additions and 81 deletions
--- a/app/src/main/ets/pages/Index.ets
+++ b/app/src/main/ets/pages/Index.ets
@@ -1,8 +1,28 @@
 import { ComponentConst, ScreenUtil, TitleBar } from '@devwiki/common_ui';
-import { TitleBarMenuType } from '@devwiki/common_ui/src/main/ets/component/TitleBar';
+import web_webview from '@ohos.web.webview';
+import { TitleBarMenuType } from '@devwiki/common_ui';
 import { WebPage } from './WebPage';
-import { window } from '@kit.ArkUI';
+import { router, window } from '@kit.ArkUI';
 import { WebPageDialog } from './WebPageDialog'
+import promptAction from '@ohos.promptAction';
+import { BusinessError } from '@ohos.base';
+
+@CustomDialog
+struct WebViewDialog {
+  webUrl: string = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password"
+  private webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+  dialogController: CustomDialogController;
+  @StorageLink(ScreenUtil.isPortraitKey)isPortrait: boolean = true;
+
+  build() {
+    Row() {
+      Web({ src: this.webUrl, controller: this.webviewController })
+        .javaScriptAccess(true)// 允许使用 js
+        .width('100%')
+        .height('100%');
+    }.height(this.isPortrait ? '95%' : '90%').width(this.isPortrait ? '100%' : '50%')
+  }
+}

@Entry
@Component
@@ -11,7 +31,7 @@ struct Index {
  @State title: string = "Home";

  dialogController: CustomDialogController = new CustomDialogController({
-    builder: WebPageDialog(),
+    builder: WebViewDialog(),
    alignment: DialogAlignment.BottomEnd,
    customStyle: true
  })
@@ -24,75 +44,70 @@ struct Index {
    ScreenUtil.getInstance().setPreferredOrientation(window.Orientation.AUTO_ROTATION);
  }

-  onTitleBarLeftClick(_event: ClickEvent) {
-    this.getUIContext().getRouter().back();
+  pageTransition() {
+    // 定义页面进入时的效果，无论页面栈发生push还是pop操作均可生效
+    PageTransitionEnter({ type: RouteType.None, duration: 100 }).opacity(1)
+    // 定义页面退出时的效果，无论页面栈发生push还是pop操作均可生效
+    PageTransitionExit({ type: RouteType.None, duration: 100 }).opacity(0)
  }

-  onButtonClicked() {
-    this.dialogController.open();
-    getContext(this).filesDir
+  onBackPress(): boolean | void {
+    // 弹出自定义的询问框
+    promptAction.showDialog({
+      message: '确定要退出吗？',
+      buttons: [
+        {
+          text: '取消',
+          color: '#FF0000'
+        },
+        {
+          text: '确认',
+          color: '#0099FF'
+        }
+      ]
+    }).then((result: promptAction.ShowDialogSuccessResponse) => {
+      if (result.index === 0) {
+        // 用户点击了“取消”按钮
+        console.info('User canceled the operation.');
+      } else if (result.index === 1) {
+        // 用户点击了“确认”按钮
+        console.info('User confirmed the operation.');
+        // 调用router.back()方法，返回上一个页面
+        router.back();
+      }
+    }).catch((err: Error) => {
+      let message = (err as BusinessError).message
+      let code = (err as BusinessError).code
+      console.error(`Invoke showDialog failed, code is ${code}, message is ${message}`);
+    })
+    return true;
+  }

-    // router.pushUrl({
-    //   // 两种方式都可以加载Page, 一个是和 resources/base/profile/main_pages.ets中的配置相同
-    //   // 一个是绝对路径
-    //   // url: "pages/WebPage",
-    //   url: PageRouter.WebPage
-    // }, router.RouterMode.Single);
+  async onTitleBarLeftClick(_event: ClickEvent) {
+   this.onBackPress;
  }

  build() {
    Column() {
-      Row() {}.width('100%')
-      .backgroundColor('#F08080')
-      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-      RelativeContainer() {
-        TitleBar({
-          title: this.title,
-          onLeftClicked: this.onTitleBarLeftClick,
-          rightMenuType: TitleBarMenuType.None
-        })
-          .width('100%')
-          .alignRules({
-            top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
-            left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
-          }).id("title_bar"); //必须要设置id 否则不显示
+      TitleBar({
+        title: this.title,
+        onLeftClicked: ()=> {this.onBackPress()},
+        rightMenuType: TitleBarMenuType.None
+      }).width('100%')

-        Divider().alignRules({
-          top: { anchor: "title_bar", align: VerticalAlign.Bottom },
-          left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
-        }).width('100%').id("divider") //必须要设置id 否则不显示
+      Column() {
+        Row() {
+          Button("WebDialog").width(100).height('100%').type(ButtonType.Normal)
+            .onClick(() => { this.dialogController.open() });

-        Grid() {
-          GridItem() {
-            Button("Layout").type(ButtonType.Capsule).height(32).width(80);
-          }.rowStart(0).rowEnd(0).columnStart(0).columnEnd(0)
+          Button("Layout").width(100).height('100%').type(ButtonType.Normal).onClick(() =>{
+            router.pushUrl({url: "pages/layout/LinearLayoutPage"});
+          });

-          GridItem() {
-            Button("WebPage").type(ButtonType.Capsule).height(32).width(80)
-              .onClick(() => { this.dialogController.open() });
-          }.rowStart(0).rowEnd(0).columnStart(1).columnEnd(1)
+          Button().width(100).height('100%').type(ButtonType.Normal);

-          GridItem() {
-            Button("3").type(ButtonType.Capsule).height(32).width(80);
-          }.rowStart(0).rowEnd(0).columnStart(2).columnEnd(2)
-
-          GridItem() {
-            Button("4").type(ButtonType.Capsule).height(32).width(80);
-          }.rowStart(0).rowEnd(0).columnStart(3).columnEnd(3)
-
-          GridItem() {
-            Button("1").type(ButtonType.Capsule).height(32).width(80);
-          }.rowStart(1).rowEnd(1).columnStart(0).columnEnd(0)
-        }
-        .width('100%')
-        .columnsTemplate('1fr 1fr 1fr 1fr').columnsGap(8)
-        .rowsTemplate('repeat(auto-fill, 36)').rowsGap(8)
-        .alignRules({
-          top: { anchor: "divider", align: VerticalAlign.Bottom },
-          left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
-          bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
-        }).id("host_web") //必须要设置id 否则不显示
-      }.width('100%').height('100%')
-    }.width('100%').height('100%').backgroundImage($r("app.media.bg_sky")).backgroundImageSize(ImageSize.Cover)
+        }.width('100%').height(48).justifyContent(FlexAlign.SpaceEvenly)
+      }.justifyContent(FlexAlign.Center).width('100%')
+    }.width('100%').height('100%')
  }
 }
--- a/app/src/main/ets/pages/PhotoPage.ets
+++ b/app/src/main/ets/pages/PhotoPage.ets
@@ -0,0 +1,64 @@
+import { TitleBar } from '@devwiki/common_ui/Index';
+import picker from '@ohos.file.picker';
+import { BusinessError } from '@kit.BasicServicesKit';
+import fs, { ReadOptions } from '@ohos.file.fs';
+import common from '@ohos.app.ability.common';
+import buffer from '@ohos.buffer';
+
+@Entry
+@Component
+struct PhotoPage {
+
+  build() {
+    Column() {
+      TitleBar({
+        title: "PhotoPage",
+        onLeftClicked: ()=> {
+          this.getUIContext().getRouter().back();
+      }}).width('100%')
+      Divider();
+      Button("Open").onClick(() =>{
+
+      }).margin(5);
+
+    }.width('100%').height('100%')
+  }
+
+  openPhotoSelector() {
+    let selectOptions = new picker.PhotoSelectOptions();
+    selectOptions.maxSelectNumber = 1;
+    let viewPicker = new picker.PhotoViewPicker()
+    viewPicker.select(selectOptions).then((result) => {
+      let uri = result.photoUris;
+      let file = fs.openSync(uri[0], fs.OpenMode.READ_ONLY);
+      // 打开文件流
+      let inputStream = fs.createStreamSync(uri[0], 'r+');
+      let outputStream = buffer.alloc(fs.statSync(uri[0]).size);
+      // 以流的形式读取源文件内容并写入目的文件
+      let bufSize = 4096;
+      let readSize = 0;
+      let buf = new ArrayBuffer(bufSize);
+      let readOptions: ReadOptions = {
+        offset: readSize,
+        length: bufSize
+      };
+      new String(buf);
+      let readLen = inputStream.readSync(buf, readOptions);
+      readSize += readLen;
+      while (readLen > 0) {
+        for (let index = 0; index < readSize; index++) {
+          outputStream[readSize] = buf.slice(index);
+        }
+        readOptions.offset = readSize;
+        readLen = inputStream.readSync(buf, readOptions);
+        readSize += readLen;
+      }
+      // 关闭文件流
+      inputStream.closeSync();
+
+      console.info('PhotoViewPicker.select to file succeed and uri is:' + uri);
+    }).catch((err: BusinessError) => {
+      console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
+    })
+  }
+}
--- a/app/src/main/ets/pages/WebPage.ets
+++ b/app/src/main/ets/pages/WebPage.ets
@@ -1,5 +1,4 @@
-import { WebView, ComponentConst,  CommonRes, TitleBar, WebViewController, ScreenUtil } from '@devwiki/common_ui';
-import { WebViewParam } from '@devwiki/common_ui/src/main/ets/component/web/WebView';
+import { WebView, WebViewParam, ComponentConst,  CommonRes, TitleBar, WebViewController, ScreenUtil } from '@devwiki/common_ui';

@Entry
@Component
--- a/app/src/main/ets/pages/layout/LinearLayoutPage.ets
+++ b/app/src/main/ets/pages/layout/LinearLayoutPage.ets
@@ -3,21 +3,51 @@
@Component
 struct LinearLayoutPage {

-  @State space: number = 10;
+  columnMargin:number = 8
+  columnBgColor:string = '#26c6da'
+  @State columnJustifyContent: FlexAlign = FlexAlign.SpaceEvenly;
+  @State columnAlignItems :HorizontalAlign = HorizontalAlign.Center;
+
+  pageTransition() {
+    // 定义页面进入时的效果，无论页面栈发生push还是pop操作均可生效
+    PageTransitionEnter({ type: RouteType.None, duration: 200 }).opacity(1)
+    // 定义页面退出时的效果，无论页面栈发生push还是pop操作均可生效
+    PageTransitionExit({ type: RouteType.None, duration: 200 }).opacity(0)
+  }

  build() {
-    Column({ space: '5' }) {
-      Text(`space:${this.space}`)
-      Row({ space: this.space}){
-        Column().height('100%').width('25%').backgroundColor("#ff5577")
-        Column().height('100%').width('25%').backgroundColor("#ff5577")
-        Column().height('100%').width('20%').backgroundColor("#ff5577")
-        Column().height('100%').width('20%').backgroundColor("#ff5577")
-      }.width('90%').height('10%').backgroundColor("#11ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-    }.width('100%')
+    // Column的子元素垂直排列, 即1列N行
+    Column() {
+      Row() {
+        Text(`Column的子元素垂直排列, 即1列N行, 当前为第1行 \n Column的margin:${this.columnMargin}`)
+          .width('100%')
+      }.width('80%').height(96).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)
+      .borderWidth(1)
+
+      Column() {
+        Text("当前为第2行,不同的justifyContent会影响行之间的间隔");
+        Button("切换justifyContent").onClick((event: ClickEvent) => {
+          if (this.columnJustifyContent < FlexAlign.SpaceEvenly) {
+            this.columnJustifyContent++;
+          } else {
+            this.columnJustifyContent = 0;
+          }
+        })
+      }.width('80%').height(96).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)
+      .borderWidth(1)
+
+      Column() {
+        Text("当前为第3行, 不同的alignItems会影响在水平方向上的对其方式");
+        Button("切换alignItems").onClick((event: ClickEvent) => {
+          if (this.columnAlignItems < HorizontalAlign.End) {
+            this.columnAlignItems++
+          } else {
+            this.columnAlignItems = 0;
+          }
+        })
+      }.width('80%').height(96).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)
+      .borderWidth(1)
+    }.height('100%').width('100%').alignItems(this.columnAlignItems).justifyContent(this.columnJustifyContent)
+    .backgroundColor('#26c6da')
  }
 }
--- a/app/src/main/resources/base/profile/main_pages.json
+++ b/app/src/main/resources/base/profile/main_pages.json
@@ -1,6 +1,7 @@
 {
  "src": [
    "pages/Index",
-    "pages/WebPage"
+    "pages/WebPage",
+    "pages/layout/LinearLayoutPage"
  ]
 }