{"id":849,"date":"2023-12-04T20:05:36","date_gmt":"2023-12-04T12:05:36","guid":{"rendered":"http:\/\/152.136.136.144\/?p=849"},"modified":"2023-12-04T20:05:37","modified_gmt":"2023-12-04T12:05:37","slug":"arkui%e4%bd%bf%e7%94%a8%e6%80%bb%e7%bb%93","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=849","title":{"rendered":"ArkUI\u4f7f\u7528\u603b\u7ed3"},"content":{"rendered":"\n<p>ArkUI\u91c7\u7528\u7684\u58f0\u660e\u5f0fUI\uff0c\u5199\u6cd5\u7c7b\u4f3c flutter \u8bed\u6cd5\uff0c\u601d\u60f3\u548c\u5c5e\u6027\u540c Flutter \u57fa\u672c\u4e00\u81f4\uff1b<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5e38\u7528\u7ec4\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5355\u4f4d\u7edf\u4e00\u914d\u7f6e<\/h3>\n\n\n\n<p>\u5728\u9e3f\u8499\u5e94\u7528\u4e2d\uff0c\u6ca1\u6709web\u4e2d\u7684 px \u5355\u4f4d\uff1b\u9e3f\u8499\u91c7\u7528 vp\uff08\u5c4f\u5e55\u5bc6\u5ea6\u5355\u4f4d\uff09\u5373\u6240\u6709\u5c3a\u5bf8\u540e\u9762\u8ffd\u52a0 vp\uff0c\u5982\u60f3\u6491\u6ee1\u6574\u4e2a\u5c4f\u5e55\u5bb9\u5668\u53ef\u4ee5\u7528 &#8220;100%&#8221; \u5b57\u7b26\u4e32\u8868\u793a\uff1b<\/p>\n\n\n\n<p>\u4e3a\u4e86\u7edf\u4e00\u8c03\u6574\u8fd9\u4e9b\u5c3a\u5bf8\uff0c\u5b98\u65b9\u5efa\u8bae\u4f7f\u7528 <code>Resource<\/code> \u6570\u636e\u7c7b\u578b\u7edf\u4e00\u914d\u7f6e\uff0c\u5b9a\u4e49\u4e00\u4e2a <code>xxx.ets<\/code> \u6587\u4ef6<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default class CommonConstants {\n    static readonly FULL_LENGTH: string = '100%'\n}<\/code><\/pre>\n\n\n\n<p>\u4f7f\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {CommonConstants} from \".\/xxx\"\nImage(\"http:\/\/...\").width(CommonConstants.FULL_LENGTH)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Text \u6587\u672c\u7ec4\u4ef6<\/h3>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>fonstSize(number)<\/td><td>\u5b57\u4f53\u5927\u5c0f,\u5355\u4f4d vp<\/td><\/tr><tr><td>fontWeight(FontWeight.Bold)<\/td><td>\u5b57\u4f53\u52a0\u7c97<\/td><\/tr><tr><td>fontColor(&#8220;\u5341\u516d\u8fdb\u5236&#8221;)<\/td><td>\u5b57\u4f53\u989c\u8272<\/td><\/tr><tr><td>opacity(number)<\/td><td>\u900f\u660e\u5ea60-1<\/td><\/tr><tr><td>decoration({type:TextDecorationType.LineThrough})<\/td><td>\u4e0b\u5212\u7ebf<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u793a\u4f8b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Text(\"\u9e3f\u8499todoList\")\n        .fontSize(28)\n        .fontWeight(FontWeight.Bold)\n        .padding(10)\n        .opacity(0.6)\n        .decoration({type:TextDecorationType.LineThrough})<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Image \u56fe\u7247\u7ec4\u4ef6<\/h3>\n\n\n\n<p>\u8bed\u6cd5\u89c4\u8303 <code>Image(src:string | PixelMap | Resource)<\/code><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4f7f\u7528\u7f51\u7edc\u56fe\u7247\u9700\u8981\u6dfb\u52a0\u6388\u6743\uff0c\u5728 <code>module.json5<\/code> \u914d\u7f6e<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\"requestPermissions\": &#91;\n      {\n        \"name\": \"ohos.permission.INTERNET\"\n      }\n]<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>\u4f7f\u7528 Resource \u4e2d\u9700\u8981\u5c06\u56fe\u7247\u653e\u5230 <code>AppScope \/ resources \/ base \/ media<\/code> \u7684\u6587\u4ef6\u5939\u4e0b<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>Image($r(\"app.media.xxx.png\"))<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Video\u7ec4\u4ef6<\/h3>\n\n\n\n<p>\u8bed\u6cd5\u89c4\u8303 <code>Image(src:string | PixelMap | Resource)<\/code> \u548c Image \u5143\u7d20\u4e00\u81f4\uff0c\u4f46\u53ef\u4ee5\u81ea\u5b9a\u4e49\u64ad\u653e\u5668\u7684\u63a7\u5236\u5668<\/p>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>previewUri:string<\/td><td>TS\u7b49\u683c\u5f0f<\/td><\/tr><tr><td>objectFit(ImageFit.Cintain)<\/td><td>\u5c5e\u6027\u4fdd\u6301\u6bd4\u4f8b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">TextInput \u8f93\u5165\u6846\u7ec4\u4ef6<\/h3>\n\n\n\n<p>\u8bed\u6cd5 <code>textInput({options})<\/code><\/p>\n\n\n\n<p>options<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>placeholder<\/td><td>\u6587\u672c\u63d0\u793a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>maxLength(number)<\/td><td>\u6700\u5927\u5b57\u7b26\u957f\u5ea6<\/td><\/tr><tr><td>type(InputType.Number)<\/td><td>\u8bbe\u7f6e\u6587\u672c\u7c7b\u578b<\/td><\/tr><tr><td>onChange((value:string)=&gt;{})<\/td><td>change\u4e8b\u4ef6\u76d1\u542c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Button \u6309\u94ae\u7ec4\u4ef6<\/h3>\n\n\n\n<p>\u8bed\u6cd5 <code>Button(\"\u6587\u672c\",{options})<\/code><\/p>\n\n\n\n<p>options<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>types:ButtonType.Capsule<\/td><td>\u8bbe\u7f6e\u6309\u94ae\u6837\u5f0f Capsule \u5706\u89d2 | Circle \u5706\u5f62 | Normal \u76f4\u89d2<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5bb9\u5668\u7ec4\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Row Column \u884c\u5217\u5bb9\u5668<\/h3>\n\n\n\n<p>\u548c Flutter \u4e00\u81f4\uff0c\u90fd\u91c7\u7528\u4e86 flex \u601d\u60f3\uff0c\u5c5e\u6027\u4e5f\u548c flex \u4fdd\u6301\u4e00\u81f4<\/p>\n\n\n\n<p>\u8bed\u6cd5\u683c\u5f0f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Row({space:string | number}) \/*space \u8868\u793a\u4e3b\u8f74\u65b9\u5411\u7684\u95f4\u8ddd*\/<\/code><\/pre>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>justifyConten<\/td><td>\u4e3b\u8f74\u65b9\u5411<\/td><\/tr><tr><td>dlignItems<\/td><td>\u4ea4\u53c9\u8f74\u65b9\u5411<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">List \u5217\u8868\u5bb9\u5668<\/h3>\n\n\n\n<p>\u6eda\u52a8\u7c7b\u5bb9\u5668\uff0c**\u5fc5\u987b\u5305\u542b\u5b50\u7ec4\u4ef6 ListItem ** \u601d\u60f3\u540c flutter \u4e00\u81f4<\/p>\n\n\n\n<p>\u8bed\u6cd5<\/p>\n\n\n\n<p><code>list(options){ ListItem(){}, ListItem(){} , ... }<\/code><\/p>\n\n\n\n<p>options : Object<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>space:number<\/td><td>\u8bbe\u7f6e\u95f4\u8ddd<\/td><\/tr><tr><td>initialIndex:number<\/td><td>\u52a0\u8f7d\u7684\u8d77\u59cb\u4f4d\u7f6e<\/td><\/tr><tr><td>scroller:Scroller<\/td><td>\u63a7\u5236 list \u7ec4\u4ef6\u7684\u6eda\u52a8<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>ListDireCtion()<\/td><td>\u8bbe\u7f6e list \u7ec4\u4ef6\u7684\u6392\u5217\u65b9\u5411<\/td><\/tr><tr><td>divider()<\/td><td>\u8bbe\u7f6e\u5206\u5272\u7ebf<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>divider \u5206\u5272\u7ebf<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>strokeWidth\uff1anumber<\/td><td>\u7ebf\u5bbd<\/td><\/tr><tr><td>color\uff1astring<\/td><td>\u989c\u8272<\/td><\/tr><tr><td>startMargin\uff1anumber<\/td><td>\u7ebf\u4e0e\u4fa7\u8fb9\u8d77\u59cb\u7aef\u8ddd\u79bb<\/td><\/tr><tr><td>endMargin\uff1anumber<\/td><td>\u7ebf\u4e0e\u4fa7\u8fb9\u7ed3\u675f\u7aef\u8ddd\u79bb<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Grid \u7f51\u683c\u5bb9\u5668<\/h3>\n\n\n\n<p>\u601d\u60f3\u540c flutter \u4e00\u81f4 <strong>\u5fc5\u987b\u5305\u542b\u5b50\u7ec4\u4ef6 GridItem<\/strong><\/p>\n\n\n\n<p>\u8bed\u6cd5<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Grid(scrder?:Scroller)<\/code><\/pre>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u65b9\u6cd5<\/th><\/tr><\/thead><tbody><tr><td>columnsTemplate()<\/td><td>\u5217\u7684\u6570\u91cf \u201c1fr 1fr 1fr\u201d<\/td><\/tr><tr><td>rowsTemplate()<\/td><td>\u884c\u7684\u6570\u91cf \uff08\u4e0d\u8bbe\u7f6e\u884c\u6570\u4f1a\u51fa\u73b0\u6ed1\u52a8\u6548\u679c\uff09<\/td><\/tr><tr><td>columnsGap()<\/td><td>\u5217\u95f4\u8ddd<\/td><\/tr><tr><td>rowsGap()<\/td><td>\u884c\u95f4\u8ddd<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Tab\u9875\u7b7e\u7ec4\u4ef6<\/h2>\n\n\n\n<p><strong>\u9700\u8981\u5b50\u7ec4\u4ef6 TabContent \u4e00\u540c\u4f7f\u7528<\/strong><\/p>\n\n\n\n<p>\u8bed\u6cd5<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Tab(options){}<\/code><\/pre>\n\n\n\n<p>options:Object<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>barPosition: BarPosition.Start | End<\/td><td>\u8bbe\u7f6e tabs \u7684\u4f4d\u7f6e,\u4e0e vertical \u5c5e\u6027\u5f3a\u5173\u8054<\/td><\/tr><tr><td>index:number<\/td><td>\u8bbe\u7f6e\u521d\u59cb\u503c<\/td><\/tr><tr><td>controller<\/td><td>\u8bbe\u7f6e tab \u63a7\u5236\u5668, \u7528\u4e8e\u63a7\u5236 tabs \u7ec4\u4ef6\u9875\u7b7e\u5207\u6362<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>vertical()<\/td><td>\u8bbe\u7f6e Tabs \u65b9\u5411\u662f\u5426\u4e3a\u7eb5\u5411,\u9ed8\u8ba4\u662f false<\/td><\/tr><tr><td>barMode()<\/td><td>Tabbar \u5e03\u5c40\u6a21\u5f0f Fixed \u5e73\u5747\u5206,Scrllable \u5b9e\u9645\u5bbd\u5ea6<\/td><\/tr><tr><td>barWidth()<\/td><td>tabbar\u7684\u5bbd\u5ea6<\/td><\/tr><tr><td>barHeight()<\/td><td>tabbar\u7684\u9ad8\u5ea6<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u81ea\u5b9a\u4e49TabBar\u793a\u4f8b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\u5f15\u5165\u4e24\u4e2a\u9875\u9762*\/\nimport {Index} from \".\/Index\"\nimport {ListPage} from \".\/listPage\"\n\n@Entry\n@Component\nstruct TabsPage {\n  \/*tabbar\u7684\u9009\u4e2d\u7d22\u5f15\u4e0b\u6807*\/\n  @State currentIndex:number = 0;\n  \/*\u521b\u5efa tabbas \u63a7\u5236\u5668*\/\n  private tabsController:TabsController = new TabsController();\n  \/*\u6784\u5efa\u6309\u94ae\u6a21\u7248\u7ec4\u4ef6*\/\n  @Builder MyTabBar(name:string,index:number,selectedImg: string, normalImg: string){\n    \/*\u4e0a\u56fe\u6807\u4e0b\u6587\u5b57\u5e03\u5c40*\/  \n    Column(){\n      \/*\u5224\u65ad\u5f53\u524d\u9009\u4e2d\u4e0b\u6807\u662f\u5426\u4e3a\u5f53\u524d\u83dc\u5355\u6570,\u4e09\u76ee\u8fd0\u7b97\u5207\u6362\u6309\u94ae\u989c\u8272*\/  \n      Image(this.currentIndex === index?selectedImg:normalImg).width(30)\n      Text(name)\n        .fontColor(this.currentIndex === index?'#d81e06' : '#6B6B6B')\n    }\n    .width('100%')\n    .height(50)\n    .justifyContent(FlexAlign.Center)\n    .onClick(()=&gt;{\n      \/*\u5c06\u5f53\u524d\u70b9\u51fb\u6309\u94ae\u72b6\u6001\u540c\u6b65\u5230\u9009\u4e2d\u7d22\u5f15\u4e2d,\u5e76\u901a\u77e5 tabsController \u63a7\u5236\u5668\u5207\u6362\u9875\u9762*\/\n      this.currentIndex = index;\n      this.tabsController.changeIndex(index)\n    })\n  }\n\n  build() {\n    Column(){\n      \/*\u4f7f\u7528Tabs\u7ec4\u4ef6*\/  \n      Tabs({barPosition:BarPosition.End,controller:this.tabsController}){\n        TabContent(){\n          \/*\u5f53\u524dtabbar\u8981\u663e\u793a\u7684\u9875\u7b7e\u5185\u5bb9*\/  \n          Index()\n        }.tabBar(this.MyTabBar(\"\u9996\u9875\",0,\"https:\/\/z1.ax1x.com\/2023\/11\/29\/piD6doV.png\",\"https:\/\/z1.ax1x.com\/2023\/11\/29\/piD6tLn.png\"))\n\n        TabContent(){\n          ListPage()\n        }.tabBar(this.MyTabBar(\"\u6211\u7684\",1,\"https:\/\/z1.ax1x.com\/2023\/11\/29\/piD6doV.png\",\"https:\/\/z1.ax1x.com\/2023\/11\/29\/piD6tLn.png\"))\n\n      }\n      .barWidth('100%')\n      .barHeight(50)\n      .onChange((index:number)=&gt;{\n        \/*\u5de6\u53f3\u6ed1\u52a8\u53ef\u4ee5\u5207\u6362\u9875\u7b7e*\/\n        this.currentIndex = index\n      })\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5f39\u7a97\u7c7b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u8b66\u544a\u5f39\u7a97<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>AlertDialog.show({\n          title: '\u5220\u9664\u8054\u7cfb\u4eba', \/\/ \u6807\u9898\n          message: '\u662f\u5426\u9700\u8981\u5220\u9664\u6240\u9009\u8054\u7cfb\u4eba?', \/\/ \u5185\u5bb9\n          autoCancel: false, \/\/ \u70b9\u51fb\u906e\u969c\u5c42\u65f6\uff0c\u662f\u5426\u5173\u95ed\u5f39\u7a97\u3002\n          alignment: DialogAlignment.Center, \/\/ \u5f39\u7a97\u5728\u7ad6\u76f4\u65b9\u5411\u7684\u5bf9\u9f50\u65b9\u5f0f\n          primaryButton: {\n            value: '\u53d6\u6d88',\n            action: () =&gt; {\n              console.info('\u53d6\u6d88');\n            }\n          },\n          secondaryButton: {\n            value: '\u5220\u9664',\n            fontColor: '#D94838',\n            action: () =&gt; {\n              console.info('\u5220\u9664');\n            }\n          },\n          cancel: () =&gt; { \/\/ \u70b9\u51fb\u906e\u969c\u5c42\u5173\u95eddialog\u65f6\u7684\u56de\u8c03\n            console.info('\u70b9\u51fb\u906e\u7f69\u5c42');\n          }\n})<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u65e5\u671f\u9009\u62e9\u5668<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>DatePickerDialog.show({\n            start: new Date(\"1900-1-1\"), \/\/ \u8bbe\u7f6e\u9009\u62e9\u5668\u7684\u8d77\u59cb\u65e5\u671f\n            end: new Date(\"2023-12-31\"), \/\/ \u8bbe\u7f6e\u9009\u62e9\u5668\u7684\u7ed3\u675f\u65e5\u671f\n            selected: this.selectedDate, \/\/ \u8bbe\u7f6e\u5f53\u524d\u9009\u4e2d\u7684\u65e5\u671f\n            lunar: false,\n            onAccept: (value: DatePickerResult) =&gt; { \/\/ \u70b9\u51fb\u5f39\u7a97\u4e2d\u7684\u201c\u786e\u5b9a\u201d\u6309\u94ae\u65f6\u89e6\u53d1\u8be5\u56de\u8c03\n              \/\/ \u901a\u8fc7Date\u7684setFullYear\u65b9\u6cd5\u8bbe\u7f6e\u6309\u4e0b\u786e\u5b9a\u6309\u94ae\u65f6\u7684\u65e5\u671f\uff0c\u8fd9\u6837\u5f53\u5f39\u7a97\u518d\u6b21\u5f39\u51fa\u65f6\u663e\u793a\u9009\u4e2d\u7684\u662f\u4e0a\u4e00\u6b21\u786e\u5b9a\u7684\u65e5\u671f\n              this.selectedDate.setFullYear(value.year, value.month, value.day)\n              console.info(\"DatePickerDialog:onAccept()\" + JSON.stringify(value))\n            },\n            onCancel: () =&gt; { \/\/ \u70b9\u51fb\u5f39\u7a97\u4e2d\u7684\u201c\u53d6\u6d88\u201d\u6309\u94ae\u65f6\u89e6\u53d1\u8be5\u56de\u8c03\n              console.info(\"DatePickerDialog:onCancel()\")\n            },\n            onChange: (value: DatePickerResult) =&gt; { \/\/ \u6ed1\u52a8\u5f39\u7a97\u4e2d\u7684\u6ed1\u52a8\u9009\u62e9\u5668\u4f7f\u5f53\u524d\u9009\u4e2d\u9879\u6539\u53d8\u65f6\u89e6\u53d1\u8be5\u56de\u8c03\n              console.info(\"DatePickerDialog:onChange()\" + JSON.stringify(value))\n            }\n})<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u6587\u672c\u9009\u62e9\u5668<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>private fruits: string&#91;] = &#91;'\u82f9\u679c', '\u6a58\u5b50', '\u9999\u8549', '\u7315\u7334\u6843', '\u897f\u74dc'];\nTextPickerDialog.show({\n            range: this.fruits, \/\/ \u8bbe\u7f6e\u6587\u672c\u9009\u62e9\u5668\u7684\u9009\u62e9\u8303\u56f4\n            selected: this.select, \/\/ \u8bbe\u7f6e\u521d\u59cb\u9009\u4e2d\u9879\u7684\u7d22\u5f15\u503c\u3002\n            onAccept: (value: TextPickerResult) =&gt; { \/\/ \u70b9\u51fb\u5f39\u7a97\u4e2d\u7684\u201c\u786e\u5b9a\u201d\u6309\u94ae\u65f6\u89e6\u53d1\u8be5\u56de\u8c03\u3002\n              \/\/ \u8bbe\u7f6eselect\u4e3a\u6309\u4e0b\u786e\u5b9a\u6309\u94ae\u65f6\u5019\u7684\u9009\u4e2d\u9879index\uff0c\u8fd9\u6837\u5f53\u5f39\u7a97\u518d\u6b21\u5f39\u51fa\u65f6\u663e\u793a\u9009\u4e2d\u7684\u662f\u4e0a\u4e00\u6b21\u786e\u5b9a\u7684\u9009\u9879\n              this.select = value.index;\n              console.info(\"TextPickerDialog:onAccept()\" + JSON.stringify(value));\n            },\n            onCancel: () =&gt; { \/\/ \u70b9\u51fb\u5f39\u7a97\u4e2d\u7684\u201c\u53d6\u6d88\u201d\u6309\u94ae\u65f6\u89e6\u53d1\u8be5\u56de\u8c03\u3002\n              console.info(\"TextPickerDialog:onCancel()\");\n            },\n            onChange: (value: TextPickerResult) =&gt; { \/\/ \u6ed1\u52a8\u5f39\u7a97\u4e2d\u7684\u9009\u62e9\u5668\u4f7f\u5f53\u524d\u9009\u4e2d\u9879\u6539\u53d8\u65f6\u89e6\u53d1\u8be5\u56de\u8c03\u3002\n              console.info(\"TextPickerDialog:onChange()\" + JSON.stringify(value));\n            }\n })<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u81ea\u5b9a\u4e49\u9009\u62e9\u5668(\u7b80\u6613\u7248)<\/h3>\n\n\n\n<p>\u629b\u5f00\u5b98\u65b9\u82b1\u91cc\u80e1\u54e8\u7684\u5b9a\u4e49\uff0c\u521b\u4e00\u4e2a <code>dialog.ets<\/code>\u6587\u4ef6\uff0c\u7528\u4e8e\u5b9a\u4e49\u5f39\u51fa\u5c42<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@CustomDialog\nexport default struct CustomDialogWidget {\n  \/*\u9009\u9879\u6570\u636e\u5143\u72b6\u6001*\/\n  @State hobbyBeans:Array&lt;{label:string,isChecked:boolean}&gt; = &#91;];\n  \/*\u81ea\u5b9a\u4e49\u7684\u6570\u636e*\/\n  @State listData:Array&lt;{value:string}&gt; = &#91;{value:\"\u82f9\u679c\"},{value:'\u9999\u8549'}]\n  \/*\u81ea\u5b9a\u4e49\u5f39\u7a97\u7684\u63a7\u5236\u5668*\/\n  private controller: CustomDialogController;\n \/*\u683c\u5f0f\u5316\u4e00\u4e0b\u81ea\u5b9a\u4e49\u6570\u636e\uff0c\u5c06\u683c\u5f0f\u597d\u7684\u5bf9\u8c61\u653e\u5230 hobbyBeans \u6570\u7ec4\u4e2d\uff0c\u540e\u9762\u76f4\u63a5\u5faa\u73af hobbyBeans \u6570\u7ec4*\/\n  aboutToAppear(){\n    this.listData.forEach((item)=&gt;{\n      this.hobbyBeans.push({\n        label:item.value,\n        isChecked:false\n      })\n    })\n  }\n  \/*\u5b9a\u4e49\u9875\u9762*\/\n  build(){\n    Column(){\n      List(){\n        \/*\u5faa\u73af hobbyBeans \u6570\u7ec4\u5f97\u5230\u6309\u94ae\u6570\u636e*\/  \n        ForEach(this.hobbyBeans,\n          (item,index)=&gt;{\n            ListItem(){\n              Row(){\n                Text(item.label)\n                Toggle({ type: ToggleType.Checkbox, isOn: false })\n                  .onChange((isCheck) =&gt; {\n                    item.isChecked = isCheck;\n                  })\n              }\n              .width(\"100%\")\n              .justifyContent(FlexAlign.SpaceBetween)\n            }\n          },\n          (item,index)=&gt;`${index}`)\n      }\n      \/*\u5e95\u90e8\u7684\u63a7\u5236\u6309\u94ae*\/\n      Row() {\n        Button(\"\u53d6\u6d88\")\n        .onClick(() =&gt; {\n          this.controller.close();\n        })\n        Button(\"\u786e\u5b9a\")\n        .onClick(() =&gt; {\n          this.controller.close();\n        })\n      }\n    }\n    .justifyContent(FlexAlign.SpaceBetween)\n    .padding(20)\n    .backgroundColor(\"#fff\")\n    .height(180)\n  }\n\n}<\/code><\/pre>\n\n\n\n<p>\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import CustomDialogWidget from \"..\/component\/dialog\"\n\/*\u521b\u5efa\u63a7\u5236\u5668*\/\ncustomDialogController: CustomDialogController = new CustomDialogController({\n    builder:CustomDialogWidget(), \/*\u5728\u8fd9\u91cc\u6784\u5efa\u4e00\u4e0b CustomDialogWidget \u7ec4\u4ef6*\/\n    alignment: DialogAlignment.Center, \/*\u6a21\u6001\u6846\u7684\u4f4d\u7f6e*\/\n    customStyle: true,\n})\n\nButton(\"\u81ea\u5b9a\u4e49\u5f39\u7a97\"){}.onClick(()=&gt;{this.CustomDialogController.open()})<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WebView<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Web\u7ec4\u4ef6<\/h3>\n\n\n\n<p>\u683c\u5f0f <code>Web(options)<\/code><\/p>\n\n\n\n<p>options {}<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>src\uff1astring<\/td><td>\u7f51\u5740\u5730\u5740<\/td><\/tr><tr><td>Controller\uff1awebController<\/td><td>\u63a7\u5236\u5668\uff0c\u524d\u8fdb\u540e\u9000<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>webController \u5b9e\u4f8b<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>controller.foreard()<\/td><td>\u63a7\u5236 webView \u7684\u9875\u9762\u8def\u7531\u524d\u8fdb<\/td><\/tr><tr><td>controller.backward()<\/td><td>\u63a7\u5236 webView \u7684\u9875\u9762\u8def\u7531\u540e\u9000<\/td><\/tr><tr><td>controller.refresh()<\/td><td>\u5237\u65b0\u9875\u9762<\/td><\/tr><tr><td>controller.stop()<\/td><td>\u505c\u6b62<\/td><\/tr><tr><td>controller.clearHistory()<\/td><td>\u6e05\u9664\u5386\u53f2<\/td><\/tr><tr><td>runJavaScript<\/td><td>\u8c03\u7528\u9875\u9762\u7684 js \u65b9\u6cd5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u5c5e\u6027<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u5c5e\u6027<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>.fileAccess(true)<\/td><td>\u5141\u8bb8\u8bbf\u95ee\u672c\u5730\u6587\u4ef6<\/td><\/tr><tr><td>.javaScriptAccess(true)<\/td><td>\u53ef\u4ee5\u8c03\u7528 JS \u811a\u672c<\/td><\/tr><tr><td>.imageAccess(fasle)<\/td><td>\u4e0d\u5141\u8bb8\u52a0\u8f7d\u56fe\u7247<\/td><\/tr><tr><td>.zoomAccess(false)<\/td><td>\u7981\u6b62\u9875\u9762\u7f29\u653e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u4e8b\u4ef6<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u4e8b\u4ef6<\/th><th>\u6ce8\u91ca<\/th><\/tr><\/thead><tbody><tr><td>onConfirm<\/td><td>\u7f51\u9875\u901a\u4fe1,\u53ef\u63a5\u6536\u5230\u9875\u9762\u4f20\u9012\u7684\u4fe1\u606f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u793a\u4f8b<\/p>\n\n\n\n<p>\u5728\u672c\u5730\u521b\u5efa html \u6587\u4ef6 <code>entry\/src\/main\/resources\/rawfile<\/code><\/p>\n\n\n\n<p>index.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;meta charset=\"utf-8\"&gt;\n&lt;body&gt;\n\n    &lt;h1 id=\"h1el\"&gt;&lt;\/h1&gt;\n    &lt;button onclick=\"htmlTest()\"&gt;\u8c03\u7528Web\u7ec4\u4ef6\u91cc\u9762\u7684\u65b9\u6cd5&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;script type=\"text\/javascript\"&gt;\n    function htmlTest() {\n        h1el.innerHTML = \"\u6d4b\u8bd5\u5185\u5bb9\";\n    }\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>webView \u4f7f\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>controller: WebController = new WebController();\n\nbuild(){\n    Column(){\n        Web({src:$fawfile(\"index.html\"),controller:this.controller})\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u63a5\u53d7web\u7aef\u7684\u4fe1\u606f onConfirm<\/h3>\n\n\n\n<p>\u793a\u4f8b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;meta charset=\"utf-8\"&gt;\n&lt;body&gt;\n    &lt;button onclick=\"confirmFun()\"&gt;confirm\u4e8b\u4ef6&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;script type=\"text\/javascript\"&gt;\n    function confirmFun(){\n        confirm(\"\u6765\u81eaweb\u7aef\u7684\u4fe1\u606f\")\n    }\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Web({ src: $rawfile('index.html'), controller: this.controller })\n        .javaScriptAccess(true)\n        .zoomAccess(false)\n        .textZoomAtio(150)\n        .onConfirm((event)=&gt;{\n          console.log(event.message) \/*\u6253\u5370\u51faweb\u7aef\u7684\u6d88\u606f*\/\n          return true\n        })<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">web\u7ec4\u4ef6\u8c03\u7528\u7f51\u9875js\u65b9\u6cd5<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Web({ src: $rawfile('index.html'), controller: this.controller })\n.onPageEnd((event)=&gt;{\n    this.controller.runJavaScript({\n        script:\"test()\",\n        callback:(result:string)=&gt;{\n            console.log(result) \/*\u6253\u5370js\u65b9\u6cd5\u8fd4\u56de\u7684\u5185\u5bb9*\/\n        }\n    })\n})<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"text\/javascript\"&gt;\n    function test(){\n        return \"\u9e3f\u8499web\u7ec4\u4ef6\u8c03\u7528js\u65b9\u6cd5\"\n    }\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">JS \u8c03\u7528 Web \u7ec4\u4ef6\u65b9\u6cd5<\/h3>\n\n\n\n<p>\u9e3f\u8499<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Entry\n@Component\nexport struct WebPage {\n  @State dataFromHtml: string = ''\n  controller: WebController = new WebController()\n  \/*\u5b9a\u4e49\u4f9b\u9875\u9762\u8c03\u7528\u7684\u65b9\u6cd5\u903b\u8f91*\/\n  testObj = {\n    test: (data) =&gt; {\n      this.dataFromHtml = data;\n      return '\u65b9\u6cd5\u88abjs\u7aef\u8c03\u7528\u4e86';\n    },\n    toString: () =&gt; {\n      console.log('Web Component toString');\n    }\n  }\n\n  build(){\n      Column(){\n           Button('\u5c06\u811a\u672c\u6ce8\u5165\u5230js\u9875\u9762\u4e2d').onClick(() =&gt; {\n              this.controller.registerJavaScriptProxy({\n                object: this.testObj,\n                name: 'objName',\n                methodList: &#91;'test', 'toString'],\n              });\n              this.controller.refresh();\n            })\n\n             Web({ src: $rawfile('index.html'), controller: this.controller })\n      } \n  }\n\n}<\/code><\/pre>\n\n\n\n<p>\u9875\u9762\u4e2d\u8c03\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button @click=\"btnFun()\"&gt;\u6309\u94ae&lt;\/button&gt;\n\nfunction btnFun(){\n    let result = objName.test(\"\u8c03\u7528\u9e3f\u8499\u7684\u65b9\u6cd5,\u4f20\u9012\u4e00\u4e2a\u4fe1\u606f\")\n    console.log(result)\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>ArkUI\u91c7\u7528\u7684\u58f0\u660e\u5f0fUI\uff0c\u5199\u6cd5\u7c7b\u4f3c flutter \u8bed\u6cd5\uff0c\u601d\u60f3\u548c\u5c5e\u6027\u540c Flutter \u57fa\u672c\u4e00\u81f4\uff1b \u5e38\u7528\u7ec4\u4ef6 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[],"class_list":["post-849","post","type-post","status-publish","format-standard","hentry","category-harmonyos4-0"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=849"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/849\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/849\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}