鸿蒙开发系列教程(二十五)--样式处理(一)

1、样式属性
参考网址:https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-universal-attributes-text-style-0000001427902436-V3
在这里插入图片描述

属性方法以 . 链式调用的方式配置系统组件的样式和其他属性

@Entry
@Component
struct Index {
  build() {
    Text('测试')
      .backgroundColor('red')
      .fontSize(50)
      .width('100%')
      .height(100)
  }
}

2、预设枚举值
参考官方网址:https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-appendix-enums-0000001478061741-V3
在这里插入图片描述

@Entry
@Component
struct Index {
  build() {
    Text('测试')
      .fontSize(50)
      .width('100%')
      .height(100)
      .backgroundColor(**Color.Blue**)
      .textAlign(**TextAlign.Center**)
      .fontColor(**Color.White**)
  }
}

3、样式适配

  • vp :鸿蒙默认单位,和屏幕像素有关,最终表现视觉大小在任何设备一致
  • 鸿蒙以伸缩 、网格、栅格进行布局适配,如要等比例缩放可以设置高宽比 aspectRatio

(1)伸缩: layoutWeight(flex: number) 占剩余空间多少份
在这里插入图片描述
加入`layoutWeight参数后,使用layoutWeight属性,让右侧内容去占满剩余宽度:
在这里插入图片描述
(2)内容等比例缩放:可以使用aspectRatio属性设置宽高比
aspectRatio(ratio: number)
在这里插入图片描述
调整aspectRatio值
在这里插入图片描述
参考代码:

@Entry
@Component
struct StyleCase {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Text("我在左面")
      Text("我在右面")
        .textAlign(TextAlign.End)
        .width('80%')
        .height(60)
        .backgroundColor('blue')
        .layoutWeight(1)
      Column()
        .width('50%')
        .height('50%')
        .backgroundColor('red')
        .aspectRatio(1)
    }.width('100%')
    .height('100%')

  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

由浅到深认识Java语言(1):前提概要

该文章Github地址:https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.c…

linux常用命令指南

什么是Linux命令? Linux命令是在Linux操作系统中用于执行特定任务的命令行工具。它们被用于管理文件和目录、执行程序、配置系统设置等。Linux命令通常由一个命令名称和一些选项或参数组成,并且可以通过命令行界面(CLI)或脚本文件…

C语言例3-24:赋值表达式的例子

代码如下&#xff1a; #include<stdio.h> int main(void) {int i1,j;float f2.0f;// printf("fi-1 :%0.1f\n",fi-1); //ff(i-1)2.0// printf("ii>f :%d\n",ii>f); //i>f -->0 -->i0// printf("j!(i1) :%d\n",j…

智能ai文生视频,文生动漫小程序,系统搭建开发

目录 前言&#xff1a; 一、文生动漫系统搭建常规步骤 二、文生漫画是怎么操作的 总结&#xff1a; 前言&#xff1a; 小说推文是继短视频之后的又一个黄金赛道&#xff0c;它最大的特点就是&#xff0c;有一个人观看了你推荐的小说就有一份收益。那么使用系统小说转漫功能…

AI换脸软件rope最新更新的蓝宝石中文版下载

rope换脸软件蓝宝石版下载地址&#xff1a;点击下载 最近AI软件非常的火爆&#xff0c;今天就给大家带来一个可以AI替换人脸的工具rope&#xff0c;得益于机器学习技术的不断发展&#xff0c;rope经过深度神经网络的无数次迭代优化&#xff0c;最终得出的模型可以自动学习和识…

八大排序算法

排序算法 排序的概述排序的分类分为5大类&#xff1a;优点及缺点如何选择排序算法 八种排序之间的关系:一、插入排序直接插入排序动图详解代码实现 希尔排序动图详解代码实现 二、交换排序冒泡排序:动图详解代码实现 快速排序:动图详解代码实现 三、选择排序直接选择排序动图详…

Echo服务器学习__01(基础)

ASIO是一个跨平台&#xff0c;主要用于实现异步网络和其他一些底层I/O操作的C库 可以基于ASIO实现Echo服务端&#xff0c;在这之前&#xff0c;学习一些基础的知识和概念 ​ 1&#xff1a;IO多路复用 简单的来说&#xff0c;一个线程同时监听多个I/O事件就是I/O多路复用。任…

边缘计算+WEB端应用融合:AI行为识别智能监控系统搭建指南 -- 边缘设备图像识别及部署(二)

专栏目录 边缘计算WEB端应用融合&#xff1a;AI行为识别智能监控系统搭建指南 – 整体介绍&#xff08;一&#xff09; 边缘计算WEB端应用融合&#xff1a;AI行为识别智能监控系统搭建指南 -- 边缘图像识别及部署&#xff08;二&#xff09; 前言边缘图像识别与推流整体思路原始…

【人工智能】Gitee AI 天数智芯有奖体验开源AI模型,一定能有所收货,快来体验吧

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章。 这是《人工智能》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 目录 前言两大赛道天数智芯1.模型地址2.天数智芯专区3.选择模型4.模型详情页5.部署模型6.成功部署7.执行例子8.移除模型 千模盲…

Flutter-仿淘宝京东录音识别图标效果

效果 需求 弹起键盘&#xff0c;录制按钮紧挨着输入框收起键盘&#xff0c;录制按钮回到初始位置 实现 第一步&#xff1a;监听键盘弹起并获取键盘高度第二步&#xff1a;根据键盘高度&#xff0c;录制按钮高度计算偏移高度&#xff0c;并动画移动第三步&#xff1a;键盘收起…

Unbuntu20.04 git push和pull相关问题

文章目录 Unbuntu20.04 git push和pull使用&#xff11;&#xff0e;下载[Git工具包](https://git-scm.com/downloads)&#xff12;&#xff0e;建立本地仓库&#xff13;&#xff0e;将本地仓库与github远程仓库关联&#xff14;&#xff0e;将本地仓库文件上传到github远程仓…

nuxt3项目总结

nuxt3项目总结 仓库 前言 大半年的时间&#xff0c;项目从秋天到春天&#xff0c;从管理后台到APP再到数据大屏&#xff0c;技术栈从vue3到uniApp再到nuxt3&#xff0c;需求不停的改&#xff0c;注释掉代码都快到项目总体的三分之一。 一、准备-搭建项目架子 1.1 创建一个…

图片怎么转jpg格式?一键完成图片格式转换

jpg图片格式作为最常用的图片类型之一&#xff0c;经常出现在不同的使用场景中&#xff0c;如果遇到手上的图片不是jpg格式的话&#xff0c;就需要图片转jpg之后再操作&#xff0c;那么该如何进行图片转换格式呢&#xff1f;试试本文分享的这个图片转格式的方法吧&#xff0c;利…

【经验分享】Wubuntu------体验Windows和Ubuntu的结合体

【经验分享】Wubuntu------体验Windows和Ubuntu的结合体 最近看到有一款Wubuntu的文章&#xff0c;对于习惯使用windows操作系统&#xff0c;又不熟悉ubuntu系统的程序员小白来说&#xff0c;可以说是福音了。目前的Wubuntu兼容性可能还有一点问题&#xff0c;如果再迭代几次的…

YOLOV5 改进:增加注意力机制模块(SE)

1、前言 本章将介绍yolov5的改进项目,为v5增加新的模块---注意力机制、SE模块 大部分更改的代码是重复的,只有少部分需要更改,下面会详细讲解 yolov5的yaml文件介绍:YOLOV5 模型:利用tensorboard查看网络结构和yaml文件介绍-CSDN博客 yolov5的模块更改,C3更改为C2f模块…

18个惊艳的可视化大屏(第27辑):安防与安全预警

可视化大屏在安防和安全预警领域具有以下几个重要作用&#xff1a; 实时监控和预警 可视化大屏可以将各种安防设备&#xff08;如摄像头、传感器等&#xff09;的监控画面和数据集中显示在一个屏幕上&#xff0c;实现对安全状况的实时监控。同时&#xff0c;通过设置预警规则…

【保姆级教程】YOLOv8_Pose多目标+关键点检测:训练自己的数据集

Yolov8官方给出的是单类别的人体姿态关键点检测&#xff0c;本文将记录如果实现训练自己的多类别的关键点检测。 一、YOLOV8环境准备 1.1 下载安装最新的YOLOv8代码 仓库地址&#xff1a; https://github.com/ultralytics/ultralytics1.2 配置环境 pip install -r requiremen…

JNDI+LDAP攻击手法

服务端&#xff1a; package com.naihe3; import java.net.InetAddress; import java.net.MalformedURLException; import java.net.URL;import javax.net.ServerSocketFactory; import javax.net.SocketFactory; import javax.net.ssl.SSLSocketFactory;import com.unboundid.…

27-4 文件上传漏洞 - 黑名单绕过

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、黑名单绕过和黑白名单机制: 黑名单:黑名单中的文件不允许通过。白名单:白名单中的文件允许通过。二、黑白名单判断: 当输入一串后缀如"sfahkfhakj"时,黑名单不…