华为 ArkTS 边框怎么设置,单边边框怎么设置以及条件设置边框(鸿蒙开发)

一、实例代码:

        border(params)

        接收一个对象参数,对象参数的属性为width?: Lenght,color?: ,radius?: Length,style?: BorderStyle

        注意:以下实例包含了我说知道的 边框的单位 以及 颜色 的各种用法

Column() {Image(item.img).width(120).height(80).objectFit(ImageFit.Contain)Text(item.title).height(20).margin({ top:10 })
}.width('50%').padding({top:10, bottom:10}).border({width:{top:1, left:1, right:1, bottom:1},color:0xCCCCCC})

当然边框颜色也是可以独立设置的如:

.border({ width: { left: '1px', right: '1px', top: '1px', bottom: '1px' }, color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
})
二、学习中遇到的问题以及需求 (内含更高阶的用法)
        1、需求

        需要给推荐商品列表添加边框, arkTS的边框跟前端一样,如果出现重叠也会加粗,如下图

 可以明显看到中间重叠的边框比较粗,所以不能每个容器都加上四边的边框, 只能分比给每个加左边框,上边框, 然后第二列加右边框, 最后一行加下边框

2、整部分代码:重点看border
        // 推荐列表Row() {Flex({wrap: FlexWrap.Wrap}) {ForEach(this.utils, (item:ModuleItem, i) => {Column() {Image(item.img).width(120).height(80).objectFit(ImageFit.Contain)Row() {Text(item.title + item.title).width('100%')}.height(20).margin({ top:10 })Row() {Text('价格:')Text('$ 30').width('100%').fontColor(Color.Red)}.height(20).margin({ top:10 })}.width('50%').padding({top:10, bottom:10}).border({width:{top:1, left:1, right:i % 2 == 1 ? 1 : 0, bottom:i == this.utils.length - 1 || i == this.utils.length - 2 ? 1 : 0},color:0xCCCCCC}).onClick(() => {router.pushUrl({url:item.path,params:{id:item.id}}, router.RouterMode.Single)})},item => item.id)}.padding(10).backgroundColor('#fff').borderRadius(10)}.width('100%').padding({right:15, left:15}).margin({top:20})

3、效果

三、官方:
        1、官方实例以及效果图

        可以看看官方的实例,官方的实例是四边一起,属性链式的形式的形式设置的

// 线段
Text('dashed').borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)// 点线
Text('dotted').border({ width: 5, color: 0x317AF7,radius: 10, style: BorderStyle.Dotted })

2、官方文档:

边框设置-通用属性-组件通用信息-组件-组件参考(基于ArkTS的声明式开发范式)-手机、平板、智慧屏和智能穿戴开发-ArkTS API参考-HarmonyOS应用开发icon-default.png?t=N7T8https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-universal-attributes-border-0000001333720989

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/199389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【已解决】MySQL:执行存储过程报错(MySQL字符集和排序方式冲突)

目录 问题现象: 问题分析: 解决方法: 拓展: 1、转换条件两边的字段或值为二进制数据: 2、转换条件两边的字段或值的字符集和排序方式: 3、修改列、表、库的字符集和排序方式 参考链接: 问…

微信商城小程序怎么制作?做一个小程序需要什么流程?

小程序商城对商家有哪方面的帮助? 随着移动互联网的快速发展,小程序商城已经成为了越来越多商家的选择。那么,小程序商城到底对商家有哪些方面的帮助呢? 一、提高商家曝光度 在小程序平台上开设自己的小程序商城,可以…

AI之火是如何燎原的?始于马斯克与佩奇的一场激辩

丨划重点 ①在2015年, 马斯克44岁生日派对上,他与谷歌联合创始人佩奇曾就AI产生严重分歧,甚至终结了十多年的友谊。佩奇认为人类最终将与AI机器融合,将会有许多种智能争夺资源, 马斯克则担心机器可能会毁灭人类。 ②在收购AI创企DeepMind时…

acwing1209.带分数暴力与优化(java版)

//n a b / c n是确定的,只需找到其中两个。判断剩下一个数是否满足条件即可 //由题目条件可知,每个数不能重复使用,需要一个st全局数组判断每个数是否使用过 //递归实现排列型枚举,cn ac b //对于枚举出来的每一个a,再去枚举每一个c,再在c的枚举里判断b是否满足条件 //…

人工智能学习3(特征变换:特征数值化)

编译工具:PyCharm 有些编译工具不用写print可以直接将数据打印出来,pycharm需要写print才会打印出来。 文章目录 编译工具:PyCharm 概念1.特征类型分类型二值型顺序型数值型 2.特征数值化练习13.特征数值化练习24.特征二值化使用sklearn库自…

day69

今日回顾 Django与Ajax 一、什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在…

YOLOv8优化策略:简单高效的模块-现代反向残差移动模块 (iRMB) | | ICCV2023 EMO

🚀🚀🚀本文改进:设计了一种面向移动端应用的简单而高效的现代反向残差移动模块 (Inverted Residual Mobile Block, iRMB),它吸收了类似 CNN 的效率来模拟短距离依赖和类似 Transformer 的动态建模能力来学习长距离交互,引入YOLOV8 🚀🚀🚀YOLOv8改进专栏:http:…

三个角度(握手、挥手、传输)优化TCP

TCP 三次握手的性能提升 客户端的优化 当客户端发起 SYN 包时,可以通过 tcp_syn_retries 控制其重传的次数。 服务端的优化 当服务端 SYN 半连接队列溢出后,会导致后续连接被丢弃,可以通过 netstat -s 观察半连接队列溢出的情况,如…

对标Gen-2!Meta发布新模型进军文生视频赛道

随着扩散模型的飞速发展,诞生了Midjourney、DALLE 3、Stable Difusion等一大批出色的文生图模型。但在文生视频领域却进步缓慢,因为文生视频多数采用逐帧生成的方式,这类自回归方法运算效率低下、成本高。 即便使用先生成关键帧,再生成中间帧新方法。如…

Windows下使用AndroidStudio及CMake编译Android可执行程序或静态库动态库

Windows下使用AndroidStudio及CMake编译Android可执行程序或静态库动态库 文章目录 Windows下使用AndroidStudio及CMake编译Android可执行程序或静态库动态库一、前言二、编译环境三、示例C/CPP程序1、总体工程结构2、示例代码3、CMakeLists.txt(重要)4、…

Python语言基础学习大纲(由某大模型生成)

自从上次经丙察察游了一次滇藏线,已有3个没写一篇了。今天利用由某大模型生成的上面这张思维导图,配合这个大模型生成的6000多字拼凑出一篇博文聊以交差。 Python语言概述 一、语言特点 1.语法简单明了 Python的语法简洁易懂,使得编写代码…

12.5作业

1. #include <iostream>using namespace std;class Animal { private:string name; public:Animal(){}Animal(string name):name(name){cout << "animal" << endl;}virtual void perfrom(){cout << "实现不同表演行为" << …

Windows下安装Git和Git小乌龟

目录 Git简介 Git安装 Git小乌龟简介 Git小乌龟安装 Git简介 Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地进行从很小到非常大的项目的版本管理。Git支持将本地仓库与远程仓库进行关联&#xff0c;实现多人协作开发。由于具有分布式版本控制、高效性、灵…

C++12.5

想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&#xff0c;动物园里有一位讲解员&#xff0c;他会为每种动物表演做简单的介绍。 在这个场景中&#xff0c;我们可以将动物比作是不同的类&#xff0c;而每种动物表演则…

【数据结构】链表OJ题(顺序表)(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

握这些员工管理技巧,助你打造高效团队!

人力资源是一个组织中至关重要的一环&#xff0c;而员工管理是确保团队高效运转的关键因素之一。一个优秀的经理需要具备多方面的技巧和能力&#xff0c;以便激发员工的潜力&#xff0c;促进合作和增加团队的效率。在这里&#xff0c;我将分享一些实用的员工管理技巧&#xff0…

Hadoop学习笔记(HDP)-Part.12 安装HDFS

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

RAR文件的密码保护如何设置和取消?

RAR文件是压缩包一种常用的压缩文件格式&#xff0c;对于这种文件&#xff0c;我们如何设置和取消密码保护呢&#xff1f; 首先我们要下载适用于RAR文件的WinRAR解压缩软件&#xff0c;然后在压缩文件的时候&#xff0c;就可以同步设置密码&#xff0c;选中需要压缩的文件&…

在外包公司干测试半年,提升的只有我的年龄···

有一说一&#xff0c;外包没有给很高的薪资&#xff0c;是真不能干呀&#xff01; 先说一下自己的情况&#xff0c;本科生&#xff0c;年初通过校招进入深圳某软件公司&#xff0c;干了接近半年的功能测试&#xff0c;直到最近遇到了瓶颈&#xff0c;感觉自己不能够在这样下去了…

分享5款小伙伴们推荐的好用软件

​ 转眼间2023年已经只剩下一个月了&#xff0c;最近陆陆续续收到好多小伙伴的咨询&#xff0c;这边也是抓紧整理出几个好用的软件&#xff0c;希望可以帮到大家。 1.文件格式转换——Convertio ​ Convertio是一款在线文件格式转换软件&#xff0c;可以让用户在不同的文件格…