鸿蒙开发之ArkUI 界面篇 十七 购物综合案例

news2024/9/21 21:37:26
layoutWeight:子元素与兄弟元素主轴方向按照权重进行分配,参数是联合类型,数字或者是字符串,在指定的空间占多少份额,数字越大,表示在空间中占用的份额越多,如果父容器的子组件没有别的指定,剩下的空间全部指定给设定为layoutWeight的控件,要实现下图:
 

如果不加. layoutWeight(1),其结果显示如下图:

加上后显示正常,如下图:

综合分析这个实现的原理是:整体一个Colum布局,从上到下一个垂直布局,从上到下第一个组件是Image,第二个是Text,第三个是Row容器,row容器是的里面在包括两个子容器,因为昵称可能会比较长,所以把剩余的空间全部分配给他的父容器,他自然也就会去适应宽度,其完整代码如下图所示:

@Entry
@Component
struct IndexTest {

  @State message: string = 'IndexTest';
  build() {
    Column(){
      Column(){
      Image($r('app.media.nick'))
       .borderRadius({
       topLeft:10,
       topRight:10
     })

      Text('今天买这个 | 每日艺术分享NO.98')
        .fontWeight(666)
        .fontSize(18)
        .lineHeight(22)
        .margin({
          top:10,
          right:5,
          left:5
        })

      Row(){
        Row(){
          Image($r('app.media.m_user'))
            .width(24)
            .borderRadius(12)
          Text('值得买就是好东西')
            .fontSize(10)
            .fontColor('#999')
        }
        // .backgroundColor(Color.Orange)
        . layoutWeight(1)
        .margin({
          top:10,
          right:5,
          left:10
        })

        Row(){
        Image($r('app.media.ic_like'))
          .width(12)
          .fillColor('#999')
          .margin({
            right:5
          })
          Text('4590')
            .fontSize(10)
            .fontColor('#666')
        }
      } .margin({
        left:5
      })
  }.backgroundColor(Color.White)
      .width(200)
      .height(200)
  }.padding(10)
    .width('100%')
    .height('100%')
  }
}

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

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

相关文章

LeetCode[中等] 438. 找到字符串中所有字母异位词

给定两个字符串 s 和 p,找到 s 中所有 p 的 异位词 的子串,返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串(包括相同的字符串)。 思路:滑动窗口 s包含p的异位词 ——> 则…

如何导入一个Vue并成功运行

注意1:要确保自己已经成功创建了一个Vue项目,创建项目教程在如何创建Vue项目 注意2:以下操作均在VS Code,教程在VS Code安装教程 一、Vue项目导入VS Code 1.点击文件,然后点击将文件添加到工作区 2. 选择自己的vue项…

Java 每日一刊(第13期):this super static

“优秀的代码不仅仅是给机器看的,更是给人看的。” 前言 这里是分享 Java 相关内容的专刊,每日一更。 本期将为大家带来以下内容: this 关键字super 关键字static 关键字 this 关键字 this 关键字是 Java 中最常见的关键字之一&#xf…

数据中台系统产品原型RP原型Axure高保真交互原型 源文件分享

在数字化时代,数据已经成为企业最宝贵的资产之一。为了更好地管理和利用这些数据,这边为大家整理了一套数据中台Axure高保真原型。这套原型致力于为企业提供全方位的数据服务,助力企业实现数据驱动的创新发展。 下载及预览地址:h…

Spring自定义参数解析器

在这篇文章中,我们认识了参数解析器和消息转换器,今天我们来自定义一个参数解析器。 自定义参数解析器 实现HandlerMethodArgumentResolver的类,并注册到Spring容器。 Component//注册到Spring public class UserAr…

目标拟合椭圆

对于目标区域,the ellipse fit is computing by matching second-order moments.

吉首大学--23级题目讲解

7-1 单链表基本操作 在 C/C 中,.(点)和 ->(箭头)运算符用于访问结构体或类的成员,但它们的使用场景不同。 1. . 运算符 . 运算符用于访问结构体或类的成员,通过对象或结构体变量直接访问。…

双虚拟机架构:在Linux上分别部署Nginx/PHP和MariaDB

在第一台虚拟机上安装 Nginx 和 PHP 更新软件包索引: sudo apt update安装 Nginx: sudo apt install nginx -y启动 Nginx 服务: sudo systemctl start nginx安装 PHP 和 Nginx 的 PHP 支持: sudo apt install php-fpm php-common -y配置 Nginx 以使用 PHP: 查看 PHP…

docker搭建个人网盘,支持多种格式,还能画图,一键部署

1&#xff09;效果 2&#xff09;步骤 2.1&#xff09;docker安装 docker脚本 bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrorsmain/DockerInstallation.sh)docker-compose脚本 curl -L "https://github.com/docker/compose/releases/late…

PostgreSQL(PG)(二十二)

&#x1f33b;&#x1f33b; 目录 &#x1f33b;&#x1f33b; 一、PostgreSQL 简介1.1、PG 的历史1.2、PG的社区1.2.1 纯社区1.2.2 完善的组织结构1.2.3 开源许可独特性 1.3 、PostgreSQL与MySQL的比较 二、PostgresQL的下载安装2.1、Windows上安装 PostgreSQL2.2、远程 连接 …

新能源汽车数据大全(产销数据\充电桩\专利等)

新能源汽车数据大全&#xff08;产销数据\充电桩\专利等&#xff09; 来源&#xff1a;全国各省市统计年鉴、统计公报、国家能源署、中国汽车行业协会&#xff0c;各类汽车统计年鉴、中国电动汽车充电基础设施促进联盟等 1、汽车分品牌产销(95家车企&#xff0c;768个车型&am…

项目第六弹:虚拟机管理模块、路由匹配模块

项目第六弹&#xff1a;虚拟机管理模块、路由匹配模块 一、虚拟机管理模块的设计1.什么是虚拟机&#xff1f;2.借助MySQL来理解一下3.如何整合&#xff1f;【埋下伏笔】 二、RabbitMQ为何要有虚拟机1.从业务角度来讲2.步步探索1.优点2.结合业务适用场景和需求3.发掘真正的原因4…

图神经网络模型的扩展(5)--1

1.深层图卷积网络 前面讲到&#xff0c;随着图卷积网络层数的叠加&#xff0c;其表达力反而会丢失&#xff0c;因为过深的图卷积网络会造成过平滑的现象。同时&#xff0c;在标准数据集上的实验结果似乎也可以佐证&#xff1a;在我们常用的Cora 等图数据集上&#xff0c;如图卷…

【AcWing】875. 快速幂

#include<iostream> using namespace std; typedef long long LL;LL qmi(int a,int b,int p){LL res1%p;//%p是为了p1的时候&#xff0c;余数是0while(b){if(b&1) resres*a%p;//位数是1的b>>1;aa*(LL)a%p;//a*a再modp是为了防止溢出}return res; }int main(){i…

IO 多路转接之 select

文章目录 IO 多路转接之 select1、初识 select2、select 函数及其参数解释3、select 函数返回值4、select 的执行过程5、socket 就绪条件5.1、读就绪5.2、写就绪5.3、异常就绪 5、select 的特点6、select 的缺点7、select 使用实例7.1、只检测检测标准输入输出7.2、使用 select…

YOLOv8改进 | 自定义数据集训练 | AirNet助力YOLOv8检测

目录 一、本文介绍 二、AirNet原理介绍 2.1 对比基降解编码器&#xff08;CBDE&#xff09; 2.2 降解引导修复网络&#xff08;DGRN&#xff09; 三、yolov8与AirNet结合修改教程 3.1 核心代码文件的创建与添加 3.1.1 AirNet.py文件添加 3.1.2 __init__.py文件添加 3…

ONES 与华为云深度合作,共同打造企业智能研发管理平台

9月20日&#xff0c;在华为全联接大会&#xff08;HUAWEI CONNECT 2024&#xff09;上&#xff0c;深圳复临科技有限公司&#xff08;以下简称“ONES”&#xff09;与华为云计算技术有限公司&#xff08;以下简称“华为云”&#xff09;正式签署合作协议&#xff0c;双方将在企…

Java线程池实现父子线程上下文传递以及MDC追踪

文章目录 1. 总览2. 代码实现2.1. 日志配置2.2. ThreadPoolExecutor 父子线程信息不传递2.3. ContextPassThreadPoolExecutor 父子线程信息传递 3. 整体架构 1. 总览 在公司的项目中&#xff0c;为了解决慢接口问题&#xff0c;主线程经常会引入线程池并发调用下游的 RPC&…

pg_start_backup

pg_start_backup()函数在主库上发起一个在线备份&#xff0c;命令执行成功后&#xff0c;将数据文件拷贝到备份接口中 select pg_start_backup(full0918,false,false); 以上会话不要关闭&#xff0c;复制数据目录。 cp -r /pgdata/data/postgres-f66f5f7a/ /opt/qfusion/mnt/st…

Android实战经验之如何使用DiffUtil提升RecyclerView的刷新性能

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 DiffUtil 是一个用于计算两个列表之间差异的实用程序类&#xff0c;它可以帮助 RecyclerView 以更高效的方式更新数据。使用 DiffUtil 可以减少…