HarmonyOS学习路之开发篇—Java UI框架(基础组件说明【三】)

简介: 接上一篇文章…上两篇文章已经介绍了大部分的Java UI组件 ,因为时间关系把一个内容分为了三个部分,这是最后一篇组件的介绍。分别介绍ListContainer、ScrollView和WebView。

接上一篇文章…

上两篇文章已经介绍了大部分的Java UI组件 ,因为时间关系把一个内容分为了三个部分,这是最后一篇组件的介绍。分别介绍ListContainer、ScrollView和WebView。

二、分类说明

⑪ListContainer

ListContainer是用来呈现连续、多行数据的组件,包含一系列相同类型的列表项。


ListContainer和ScrollView在介绍嵌套开发时使用到了其中的一些属性,但是没有具体的介绍说明。


ListContainer的共有XML属性继承自:Component,其基础属性就不再过多的赘述。ListContainer的自有XML属性见下表:


image.png

image.png使用ListContainer时,需要编写适配器来构造不同的数据结构,在编写适配器时需要注意:要继承自BaseItemProvider并重写以下方法;

image.png

⑫ScrollView

ScrollView是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容。

ScrollView的共有XML属性继承自:StackLayout,ScrollView的自有XML属性见下表:

image.png

ScrollView的速度、滚动、回弹等常用接口如下:

image.png

⑬WebView

WebView提供在应用中集成Web页面的能力。

在使用WebView时需要配置应用的网络权限。打开“entry > src > main > config.json”,并添加如下配置。

{
  ...
  "module": {
    ...
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    ...
  }
}

与Android中的Webview有着一样的功能,显示相应的网页数据,并且可以与JavaScript代码相互调用。


通过WebConfig启用JavaScript


webView.getWebConfig().setJavaScriptPermit(true);

使用回调方法或者应用内部调用JavaScript方法。


注入回调对象到页面内容

final String jsName = "JsCallbackToApp";
webView.addJsCallback(jsName, new JsCallback() {
    @Override
    public String onCallback(String msg) {
        // 增加自定义处理
        return "jsResult";
    }
});
//---------------------------------------------
function callToApp() {
    if (window.JsCallbackToApp && window.JsCallbackToApp.call) {
       var result = JsCallbackToApp.call("message from web");
    }
}

在应用内调用页面内的JavaScript方法

webView.executeJs("javascript:callFuncInWeb()", new AsyncCallback<String>() {
    @Override
    public void onReceive(String msg) {
        // 在此确认返回结果
    }
});


观测Web状态


通过setWebAgent方法设置自定义WebAgent对象,以观测页面状态变更等事件:


webView.setWebAgent(new WebAgent() {
    @Override
    public void onLoadingPage(WebView webview, String url, PixelMap favicon) {
        super.onLoadingPage(webview, url, favicon);
        // 页面开始加载时自定义处理
    }
    @Override
    public void onPageLoaded(WebView webview, String url) {
        super.onPageLoaded(webview, url);
        // 页面加载结束后自定义处理
    }
    @Override
    public void onLoadingContent(WebView webview, String url) {
        super.onLoadingContent(webview, url);
        // 加载资源时自定义处理
    }
    @Override
    public void onError(WebView webview, ResourceRequest request, ResourceError error) {
        super.onError(webview, request, error);
        // 发生错误时自定义处理
    }
});


相关文章
|
8天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
140 78
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
|
9天前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
114 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
14天前
|
存储 UED
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后,界面背景会随机变化为淡色系颜色,同时显示当前的颜色代码,页面还会展示一只猫咪图片作为装饰,提升趣味性。
68 36
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
|
11天前
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
本篇将带你实现一个升级版的数字猜谜游戏。相比基础版,新增了计分和历史记录功能,用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。
66 31
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
|
6天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
49 19
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
7天前
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
本篇将带你实现一个数字键盘应用,支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。
47 17
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
|
14天前
|
UED 开发者
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后,屏幕上的数字会以滚动动画的形式随机变动,最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。
66 23
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
|
10天前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
94 10
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
|
15天前
「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
本篇将带你实现一个简易日历应用,显示当前月份的日期,并支持选择特定日期的功能。用户可以通过点击日期高亮选中,还可以切换上下月份,体验动态界面的交互效果。
42 12
「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
|
18天前
|
存储 UED
「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏
本篇将带你实现一个简单的数字猜谜游戏。用户输入一个数字,应用会判断是否接近目标数字,并提供提示“高一点”或“低一点”,直到用户猜中目标数字。这个小游戏结合状态管理和用户交互,是一个入门级的互动应用示例。
57 7
「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏