鸿蒙实战开发之常见设置圆角（一）

最新推荐文章于 2024-11-25 14:44:14 发布
最新推荐文章于 2024-11-25 14:44:14 发布
阅读量2.2k 收藏 8
点赞数 5
分类专栏： 鸿蒙之Java开发 文章标签： harmonyos 华为 java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44291585/article/details/122515760
版权

📒 博客首页：✎﹏ℳ๓敬坤的博客 🎈
😊 我只是一个代码的搬运工 🎃
🎉 欢迎来访的读者关注、点赞和收藏 🤞
😉有问题可以私信交流 😆
📃 文章标题：【鸿蒙实战开发之常见设置圆角（一）】 🖍

鸿蒙实战开发之常见样式

图片设置圆角

 //首先找到我们图片组件
Image img_logo = (Image)findComponentById(ResourceTable.Id_login_logo);
//通过setCornerRadius函数设置圆角单位f
img_logo.setCornerRadius(1000f);

输入框设置圆角

第一步设置我们background_element属性引入外部border_radius_12.xml文件

<TextField
   ohos:id="$+id:user"
   ohos:height="50vp"
   ohos:width="312vp"
   ohos:background_element="$graphic:border_radius_12"
   >
</TextField>

第二步设置外部border_radius_12.xml设置如下

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <!-- 设置输入框的圆角 -->
    <corners
        ohos:radius="12vp"
        />
    <!-- 设置输入框的边框颜色 -->
    <solid
        ohos:color="#FFFFFF"/>
</shape>

按钮设置圆角和圆角

//找到我们的按钮
Button login_btn = (Button) findComponentById(ResourceTable.Id_login_btn);
//ShapeElement提供一个带有颜色渐变的Element实例
ShapeElement shapeElement = new ShapeElement();
//设置渐变的起始结束方向
shapeElement.setGradientOrientation(ShapeElement.Orientation.BOTTOM_TO_TOP);
RgbColor[] rgbColors = new RgbColor[2];
//0x后面两面代表透明度十六进制FF代表1 33代表0.2后面是十六进制颜色
rgbColors[0] = RgbColor.fromArgbInt(0x33F60300);
rgbColors[1] = RgbColor.fromArgbInt(0x33FF6C5A);
//设置渐变色
shapeElement.setRgbColors(rgbColors);
//设置圆角
shapeElement.setCornerRadius(100);
使用HarmonyOS鸿蒙设置圆角效果
JfdCoding的博客
09-24 1644
在HarmonyOS鸿蒙系统中，要实现圆角效果，可以通过使用布局属性和自定义绘制来实现。下面将详细介绍如何在HarmonyOS鸿蒙应用程序中设置圆角效果，并提供相应的源代码示例。方法中，我们创建一个矩形区域，设置背景元素的颜色和圆角半径。在这个示例中，我们将圆角半径设置为宽度的一半，以实现圆形效果。通过以上步骤，我们可以在HarmonyOS鸿蒙应用程序中实现圆角效果。首先，我们需要在布局文件中设置圆角属性。在构造函数中，我们初始化了绘制背景的画笔和形状元素，并设置背景颜色为透明。在上述代码中，我们使用了。
harmonyos鸿蒙,HarmonyOS鸿蒙之设置圆角
weixin_31861055的博客
05-27 4059
1、同时设置四个角 a、静态设置graphic下新建 background_supertext_red.xmlohos:shape="rectangle">ohos:color="$color:white"/>ohos:width="2"ohos:color="$color:red"/>ohos:radius="20"/>layout.xml中引用ohos:height="...
鸿蒙的组件圆角
2301_81915581的博客
03-17 2681
属性：.borderRadius(参数)参数：数值或对象（四个角单独设置）topLeft：左上角topRight：右上角bottomLeft：左下角bottomRight：右下角。
鸿蒙开发实战系列之一：圆角
dsbdsbdsb的博客
09-17 3685
鸿蒙开发实战系列之一：圆角 前言 看过鸿蒙2.0系统的发布会，大家是不是蠢蠢欲动，想要开发第一个鸿蒙的程序呢，网上有很多文章介绍鸿蒙系统、跟Android的区别以及怎么写HelloWorld的文章，这边就不复制粘贴了。 今天换个花样，来看下如何实现Android里面一些常见功能与效果，因为鸿蒙刚出来不久，一切都还不是很成熟（没有前辈的神器），只能靠自己手x代码，废话不多说，来看下鸿蒙系统里如何实现基本的图片圆角功能吧。 如今大部分美术在设计样式的时候，都会给图片带上圆角，在鸿蒙开发过程中，一定会遇到要对图片
鸿蒙开发之ArkUI 界面篇 十一 美化篇 组件圆角
renfujiang的专栏
09-18 757
borderRadius可以用于所有的组件例如Text、Button和所有的容器。
【HarmonyOS实战开发】鸿蒙(HarmonyOS)常见的三种弹窗方式详解
好运来的博客
09-01 1658
最近有一个想法，做一个针对鸿蒙官方API的工具箱项目，介绍常用的控件，以及在项目中如何使用，今天介绍Harmony中如何实现弹窗功能。
【鸿蒙实战开发】一多开发实例（移动支付）
shangkangba的博客
11-06 706
本文从目前流行的垂类市场中，选择移动支付应用作为典型案例详细介绍 “一多” 在实际开发中的应用，同时提供该垂类应用在多设备上的界面设计与实现参考。本文选择移动支付首页作为典型页面进行开发，涉及的核心功能包括支付、收款、扫码等。扫一扫功能实现。收付款功能实现。下面的章节将分别从 UX设计、 架构设计、页面开发三个角度给出推荐的参考样例，介绍“一多”移动支付应用在开发过程中的最佳实践。
HarmonyOS 实战开发 —— 基于Slider的滑动条
CTrup的博客
11-25 825
底层Progress进度条的填充色充当视频进度条的缓冲色，Progress的背景色充当视频进度条的背景色；下图主要表达的是拓展了Slider滑动手势的响应范围，红色区域就是原始的Slider响应去，上下橙色和粉色区域都是拓展的手势响应区。效果中的红色区域是Slider原始的可触摸区域，增大的橙色和粉色区主要思路是通过responseRegion这个全局属性来增大触摸热区，然后通过给热区设置平移手势来控制Slider的value来进而控制Slider的滑动，是一个类似视频软件拖动进度条的场景。
鸿蒙(HarmonyOS)实战开发篇——基于ArkUI现有能力实现自定义弹窗封装方案
lc748258的博客
09-27 1125
从下往上的抽屉式弹出、关闭时从上往下收回。
16-鸿蒙开发中的组件圆角和特殊形状圆角设置
LCFliu的博客
11-12 1735
圆角（Border Radius）：圆角是指将矩形的角变成圆弧形。通过设置圆角，可以使矩形组件的边缘更加柔和，提升用户体验。特殊形状圆角：特殊形状圆角是指将组件的某些特定部分设置成圆角，例如只设置左上角和右下角为圆角。通过本文，你已经学会了如何在鸿蒙开发中设置组件的圆角和特殊形状的圆角。这些样式属性对于创建美观且现代化的用户界面非常重要。希望这篇文章对你有所帮助，如果有任何问题或建议，欢迎在评论区留言交流。期待在鸿蒙开发的道路上与你共同成长！再见！
HarmonyOS App开发造轮子--自定义圆形图片
m0_64422261的博客
06-05 1125
在原有的Image组件获取到位图之后，利用该位图数据利用addDrawTask方法配合Canvas进行位图输出形状的重新绘制，这里需要使用Canvas的一个
HarmonyOS给图片组件设置圆角不生效问题解决
weixin_43766475的博客
05-23 795
鸿蒙应用开发通过java代码给image组件设置圆角
harmonyos系统图片,【HarmonyOS】图片圆角功能
weixin_36095974的博客
05-27 445
public class MainAbilitySlice extends AbilitySlice {DirectionalLayout imageDirectionalLayout;@Overrideprotected void onStart(Intent intent) {super.onStart(intent);initView();}​private void initView(){...
鸿蒙Glide圆角图处理 已测试完成
Kair小笔记
06-18 523
glide依赖： public class GlideRoundTransform extends BitmapTransformation { private static float radius = 0f; public GlideRoundTransform(Context context) { this(context, 0); } public GlideRoundTransform(Context context, int dp) {
OpenHarmony实战开发-按钮 (Button)
m0_70749039的博客
04-26 1871
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。
鸿蒙星河版笔记来袭！布局元素、边框、圆角等附案例
黑马程序员官方博客
05-29 1101
属性：.justifyContent(枚举FlexAlign) (Row 组件的 justifyContent 属性效果相似)属性：.backgroundImage(背景图地址, 背景图平铺方式-枚举ImageRepeat)宽高默认单位 → vp：虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致 （推荐）作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角。作用：在组件内添加间距，拉开内容与组件之间的距离。作用：在组件外添加间距，拉开两个组件之间的距离。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：位置设置）
m0_64420071的博客
03-01 5108
ArkTS声明式开发（通用属性：位置设置）
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：边框设置）
m0_64420071的博客
03-01 3900
ArkTS声明式开发（通用属性：边框设置）
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
天月智联
10-27 1451
在鸿蒙应用开发中，Image 组件用于加载和显示图片资源，并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
@Extend怎么用
最新发布
03-15
<think>好的，我现在需要回答用户关于ArkTS中@Extend装饰器的用法的问题。首先，我需要回忆一下@Extend在ArkTS中的作用和基本用法。记得@Extend主要用于扩展组件的样式，允许开发者定义可复用的样式集合，类似于CSS中的类。但具体怎么用呢？ 用户之前的问题是关于@Extend的使用，所以我需要详细说明它的功能、语法以及使用场景。可能还需要比较其他装饰器如@Styles的区别，这样用户能更清楚何时使用@Extend。 首先，我应该从基本定义开始，解释@Extend是什么，然后给出语法结构。比如，@Extend装饰的函数，用来扩展组件的样式，可以在多个组件中复用。然后举一个简单的例子，比如定义一种文本样式，然后在不同的Text组件中应用。 接下来，可能需要说明@Extend的一些限制，比如不能用在自定义组件上，只能用于系统内置组件，如Text、Button等。同时，它支持参数，可以动态调整样式，这也是比@Styles更灵活的地方。这里可能需要对比@Styles和@Extend的不同，比如@Styles定义的样式是静态的，而@Extend可以接受参数动态变化。 然后，用户可能会想知道如何正确使用参数化的@Extend，这里需要举一个带参数的例子，比如定义一个带颜色参数的扩展样式，然后应用在不同颜色的文本上。同时，需要注意参数的类型，比如颜色参数应该用Color类型。 还需要提到组合样式的功能，即@Extend可以和其他样式组合使用，例如同时应用多个@Extend样式或者和行内样式结合。这时候举一个组合的例子会更有帮助，比如先定义一个基础的文本样式，再定义一个颜色样式，然后在组件中同时应用这两个样式。 另外，使用注意事项也很重要，比如不支持内部状态，不能使用状态变量，只能用于样式属性的设置。还要强调它和@Styles的区别，特别是参数化和非参数化的对比，以及适用场景的不同，比如需要复用带动态参数的样式时用@Extend，而固定样式用@Styles。 最后，总结一下@Extend的核心优势，比如提高代码复用性，保持UI一致性，动态调整样式等。同时给出一个综合性的示例，展示如何在实际开发中使用@Extend来优化代码结构。 在整理这些思路时，我需要确保语言简洁明了，结构清晰，分点说明，并配合代码示例，这样用户能更容易理解和应用。同时要注意避免技术错误，比如语法是否正确，参数传递是否恰当，以及是否符合ArkTS的最新文档规范。</think>好的！`@Extend` 是 ArkUI（鸿蒙应用开发框架）中用于**扩展组件样式**的核心装饰器，主要作用是**定义可复用的样式逻辑**，类似 CSS 中的类样式。以下是详细用法解析： --- ### **一、基础语法** ```typescript // 定义 @Extend(组件类型) function 样式名(参数?) { // 样式属性设置 } // 使用 组件名() .样式名(参数?) ``` --- ### **二、核心功能与示例** #### **1. 基础样式复用** ```typescript // 定义一个红色加粗文本样式 @Extend(Text) function redBoldText() { .fontColor(Color.Red) .fontWeight(FontWeight.Bold) } // 使用 Text('Hello ArkTS') .redBoldText() // 应用样式 ``` #### **2. 参数化样式** ```typescript // 定义可动态设置颜色的文本样式 @Extend(Text) function dynamicColorText(color: Color) { .fontColor(color) .fontSize(20) } // 使用 Text('参数化样式') .dynamicColorText(Color.Blue) // 传入颜色参数 ``` #### **3. 组合样式** ```typescript // 定义基础样式 @Extend(Text) function baseTextStyle() { .fontSize(18) .fontWeight(500) } // 定义强调样式 @Extend(Text) function highlightText(color: Color) { .fontColor(color) .textDecoration({ type: TextDecorationType.Underline }) } // 组合使用 Text('组合样式示例') .baseTextStyle() .highlightText(Color.Green) ``` --- ### **三、关键限制与最佳实践** #### **1. 限制条件** - **仅支持系统组件**：不能用于自定义组件 ```typescript // ✅ 正确：用于 Text 组件 @Extend(Text) function myStyle() { ... } // ❌ 错误：用于自定义组件 @Extend(MyComponent) function customStyle() { ... } ``` - **无状态性**：不能访问组件状态变量（需用 `@Styles` 替代） - **不继承组件属性**：仅能扩展样式属性 #### **2. 与 @Styles 对比** | 特性 | `@Extend` | `@Styles` | |---------------------|------------------------------|-----------------------------| | **作用对象** | 系统组件 | 自定义组件/系统组件 | | **参数支持** | ✅ 支持 | ❌ 不支持 | | **状态访问** | ❌ 不支持 | ✅ 支持（通过 this.xxx） | | **复用方式** | 组合式扩展 | 固定样式模板 | --- ### **四、典型应用场景** 1. **统一 UI 规范**：定义全局按钮/文本样式 ```typescript @Extend(Button) function primaryButton() { .width('90%') .backgroundColor(Color.Blue) } ``` 2. **动态主题切换**：通过参数传递颜色/尺寸 3. **代码瘦身**：消除重复样式代码 --- ### **五、综合实战案例** ```typescript // 定义参数化边框样式 @Extend(Text) function borderedText( color: Color, radius: number = 4 ) { .border({ width: 1, color }) .borderRadius(radius) .padding(10) } // 使用 Column() { Text('警告信息') .borderedText(Color.Red, 8) // 红色圆角边框 Text('普通提示') .borderedText(Color.Gray) // 默认圆角4 } ``` --- ### **六、常见问题** **Q：什么时候该用 `@Extend` 而不是 `@Styles`？** A：当需要： - 复用系统组件样式且需要参数化时 → 用 `@Extend` - 在自定义组件内封装样式或需要访问状态 → 用 `@Styles` **Q：能否多层嵌套 `@Extend` 样式？** A：支持！可以链式调用多个 `@Extend` 样式： ```typescript Text('多层样式') .styleA() .styleB() .styleC() ``` 掌握 `@Extend` 可以显著提升代码复用率和可维护性，建议在项目初期规划好全局样式体系。需要深入讨论具体场景吗？ 😊
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

✎﹏ℳ๓敬坤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值