【HarmonyOS】ArkUI - 自定义卡片样式

news2024/9/28 9:29:49

ArkUI - 自定义卡片样式

HarmonyOS API 9 没有提供原生的卡片样式,我定义了一个卡片样式,可以方便大家在日常开发中使用。

效果图:
请添加图片描述

卡片样式代码如下:

@Styles function card() {
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
}

使用卡片样式:

@Entry
@Component
struct Test {
  build() {
    Column({ space: 10 }) {
      Row() {
        Text('卡片样式')
      }
      .card()
      .margin({ top: 20, bottom: 10 })
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

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

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

相关文章

【CSP】2022-03-2 出行计划 经典差分和前缀和 (包含完整思路、代码和写代码过程中遇到的问题)

2022-03-2 出行计划 差分和前缀和 2022-03-2 出行计划 差分和前缀和思路遇到的问题(不小心出现的细节问题)完整代码 2022-03-2 出行计划 差分和前缀和 这题很久之前做过一次,现在已经基本忘记了,所以重新做一遍,然后一…

Linux动态追踪——ftrace

目录 摘要 1 初识 1.1 tracefs 1.2 文件描述 2 函数跟踪 2.1 函数的调用栈 2.2 函数调用栈 2.3 函数的子调用 3 事件跟踪 4 简化命令行工具 5 总结 摘要 Linux下有多种动态追踪的机制,常用的有 ftrace、perf、eBPF 等,每种机制适应于不同的场…

银河麒麟V10 安装部署大数据管理软件 DataSophon

一、概览 1、愿景 致力于快速实现部署、管理、监控以及自动化运维大数据云原生平台,帮助您快速构建起稳定、高效、可弹性伸缩的大数据云原生平台。 2、DataSophon是什么 《三体》,这部获世界科幻文学最高奖项雨果奖的作品以惊艳的"硬科幻"…

Jmeter+Ant+Git/SVN+Jenkins实现持续集成接口测试,一文精通(一)

前言 Jmeter,Postman一些基本大家相比都懂。那么真实在项目中去使用,又是如何使用的呢?本文将一文详解jmeter接口测试 一、接口测试分类 二、目前接口架构设计 三、市面上的接口测试工具 四、Jmeter简介,安装,环境…

【Kafka系列 08】生产者消息分区机制详解

一、前言 我们在使用 Apache Kafka 生产和消费消息的时候,肯定是希望能够将数据均匀地分配到所有服务器上。 比如很多公司使用 Kafka 收集应用服务器的日志数据,这种数据都是很多的,特别是对于那种大批量机器组成的集群环境,每分…

Visio无空白无黑边导出PDF

步骤1 文件->选项->自定义功能区->勾选开发工具 步骤2 开发工具->显示ShapeSheet->页->将Print Properties中的Margin都设置为0 步骤3 设计->大小->适应绘图 步骤4 导出PDF->选项->取消勾选【辅助功能文档结构标记】->发布

BetterDisplay for mac V2.2.5 强大的mac显示器管理开源工具

BetterDisplay是Mac OS 一个很棒的工具! 它允许您将显示器转换为完全可扩展的屏幕 管理显示器配置覆盖 允许亮度和颜色控制 提供 XDR/HDR 亮度升级(Apple Silicon 和 Intel Mac 上兼容的 XDR 或 HDR 显示器的额外亮度超过 100% - 多种方法可用&#x…

opengl 学习(三)-----纹理

纹理就是贴图 分类前提demo效果解析 分类 前提 需要使用一个库来处理图片&#xff1a;#include <stb_image.h> https://github.com/nothings/stb 你下载好了之后&#xff0c;把目目录包含了就好 然后再引入 #define STB_IMAGE_IMPLEMENTATION #include "stb_i…

鸿蒙开发学习:【ets_frontend组件】

简介 ets_frontend组件是方舟运行时子系统的前端工具&#xff0c;结合ace-ets2bundle组件&#xff0c;支持将ets文件转换为方舟字节码文件。 ets_frontend组件架构图 目录 /arkcompiler/ets_frontend/ ├── test262 # test262测试配置和运行脚本 ├── testTs…

如何轻松打造属于自己的水印相机小程序?

水印相机小程序源码 描述&#xff1a;微信小程序。本文将为您详细介绍小程序水印相机源码的搭建过程&#xff0c;教您如何轻松打造属于自己的水印相机小程序。无论您是初学者还是有一定基础的开发者&#xff0c;都能轻松掌握这个教程。 一&#xff1a;水印相机搭建教程 1 隐…

Node.js:构建高性能网络应用的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

IDEA + Git + GitHub(保姆级教学)

文章目录 IDEA Git GitHub1.IDEA克隆远程仓库到本地仓库1.创建一个GitHub远程仓库test12.IDEA克隆仓库到本地1.复制远程仓库地址2.创建一个版本控制项目3.克隆到本地仓库4.克隆成功 2.IDEA将本地项目push到远程仓库1.在这个项目下新建一个java模块1.新建模块2.填写模块名3.在…

【机器学习】一文掌握逻辑回归全部核心点(上)。

逻辑回归核心点-上 1、引言2、逻辑回归核心点2.1 定义与目的2.2 模型原理2.2.1 定义解析2.2.2 公式2.2.3 代码示例 2.3 损失函数与优化2.3.1 定义解析2.3.2 公式2.3.3 代码示例 2.4 正则化2.4.1 分类2.4.2 L1正则化2.4.3 L2正则化2.4.4 代码示例 3、总结 1、引言 小屌丝&#…

UE4开个头-简易小汽车

跟着谌嘉诚学的小Demo&#xff0c;记录一下 主要涉及到小白人上下车和镜头切换操作 1、动态演示效果 2、静态展示图片 3、蓝图-上下车

HTTP/2的三大改进:头部压缩、多路复用和服务器推送

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

01-分析同步通讯/异步通讯的特点及其应用

同步通讯/异步通讯 微服务间通讯有同步和异步两种方式 同步通讯: 类似打电话场景需要实时响应(时效性强可以立即得到结果方便使用),而且通话期间不能响应其他的电话(不支持多线操作)异步通讯: 类似发邮件场景不需要马上回复并且可以多线操作(适合高并发场景)但是时效性弱响应…

3D Object Detection for Autonomous Driving: A Comprehensive Survey文献阅读

目录 简言 文献地址&#xff1a; 重要网址&#xff08;该项目持续更新中&#xff09; 摘要 1、介绍 2、基础概念 2.1 3D object detection 2.2 Datasets 2.3 Evaluation metrics 2.3.1 评估指标类-1 2.3.2 评估指标类-2 2.3.3 评估指标对比 3、基于Lidar的…

vue实现购物车功能

实现功能 CSS部分 <style>.tr {display: flex;}.th {margin: 10px;width: 20%;height: 50%;}.td {display: flex;margin: 10px;width: 20%;height: 100px;align-items: center;}.app-container .banner-box {border-radius: 20px;overflow: hidden;margin-bottom: 10px;}…

图论(三)之最小生成树(kurskal/Prim)

Minimum Spanning Tree 两大算法&#xff1a;Kruskal 与 Prim 树的含义&#xff1a; 结构中不能形成环 必须连接图结构中的全部顶带&#xff0c;任意两个顶点都是互通的 不同的生成树有不同的权值和&#xff0c;而最小生成树即为最小的那个树 如何构造最小生成树 **目标&…

OB_GINS学习

OB_GINS学习 组合导航中的杆臂测量加速度计的零偏单位转换受到经纬度以及高程影响的正常重力位的计算公式大地坐标系&#xff08;LBH&#xff09;向空间直角坐标系&#xff08;XYZ&#xff09;的转换及其逆转换导航坐标系&#xff08;n系&#xff09;到地心地固坐标系&#xff…