【鸿蒙 HarmonyOS】UI 组件 ( 进度条 ProgressBar 和 RoundProgressBar 组件 )(一)

简介: 【鸿蒙 HarmonyOS】UI 组件 ( 进度条 ProgressBar 和 RoundProgressBar 组件 )(一)

文章目录

一、布局中设置 ProgressBar、RoundProgressBar 进度条

二、代码中设置 ProgressBar、RoundProgressBar 进度条

三、完整代码示例

四、GitHub 地址





一、布局中设置 ProgressBar、RoundProgressBar 进度条


ProgressBar 进度条组件分为两种 , ① 圆形进度条 RoundProgressBar , ② 直线型进度条 ProgressBar ;


布局设置代码 :


<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <!-- 直线进度条 -->
    <ProgressBar
        ohos:id="$+id:progressbar"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="200"
        ohos:layout_alignment="horizontal_center"
        ohos:min="0"
        ohos:max="100"
        ohos:progress="66"
        ohos:vice_progress="88"/>
    <!-- 圆形进度条 -->
    <RoundProgressBar
        ohos:id="$+id:roundprogressbar"
        ohos:height="400"
        ohos:width="400"
        ohos:top_margin="200"
        ohos:layout_alignment="horizontal_center"
        ohos:min="0"
        ohos:max="100"
        ohos:progress="66"/>
</DirectionalLayout>




进度条属性简介 :


最小值 : ohos:min=“0”


最大值 : ohos:max=“100”


当前进度 : ohos:progress=“66”


顶部边距 : ohos:top_margin=“200”


布局对齐 : ohos:layout_alignment=“horizontal_center”


宽度 : ohos:width=“400”


高度 : ohos:height=“400”



纯布局效果 :


image.png






二、代码中设置 ProgressBar、RoundProgressBar 进度条


获取直线进度条 ProgressBar 组件 , 并设置最大值 , 最小值 , 当前第一进度 , 当前第二进度 ;


   

// 获取 XML 布局中的 ProgressBar 按钮
        ProgressBar progressBar = (ProgressBar) findComponentById(ResourceTable.Id_progressbar);
        // 设置最大值最小值
        progressBar.setMaxValue(100);
        progressBar.setMinValue(0);
        // 设置当前进度
        progressBar.setProgressValue(20);
        // 设置第二进度值
        progressBar.setViceProgress(80);



获取圆形进度条 RoundProgressBar 组件 , 并设置最大值 , 最小值 , 当前第一进度 , 当前第二进度 ;


   

// 获取 XML 布局中的 RoundProgressBar 按钮
        RoundProgressBar roundProgressBar = (RoundProgressBar) findComponentById(ResourceTable.Id_roundprogressbar);
        // 设置最大值最小值
        roundProgressBar.setMaxValue(20);
        roundProgressBar.setMinValue(0);
        // 设置当前进度
        roundProgressBar.setProgressValue(10);
        // 设置第二进度
        roundProgressBar.setViceProgress(15);





目录
相关文章
|
3天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
20 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
3天前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
59 1
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
9 1
|
2天前
|
Android开发 算法 架构师
android的基础ui组件,这些知识点你会吗
android的基础ui组件,这些知识点你会吗
android的基础ui组件,这些知识点你会吗
|
2天前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
3天前
|
Java 开发工具 Android开发
鸿蒙HarmonyOS 与 Android 的NDK有什么区别?
鸿蒙(HarmonyOS)和Android的NDK(Native Development Kit)是两个不同的概念,它们在设计理念、架构、开发方式和目标平台等方面存在着一些显著的不同。
11 0
|
3天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
3天前
|
前端开发 JavaScript UED
前端UI组件
前端UI组件
22 0
|
3天前
|
编解码 JavaScript 数据可视化
【vue3】 vue3 几款值得推荐的UI组件库
【vue3】 vue3 几款值得推荐的UI组件库
99 0
|
3天前
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看

热门文章

最新文章