Android视角看鸿蒙第六课(module.json5中的各字段含义之pages）designWidth的用法

已于 2024-03-18 15:52:05 修改
阅读量1k 收藏 18
点赞数 14
分类专栏： Android视角看鸿蒙 文章标签： android harmonyos 鸿蒙 华为 json
于 2024-03-18 14:56:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44656996/article/details/136801089
版权

Android视角看鸿蒙第六课(module.json5中的各字段含义之pages）

导读

前面几篇文章，我们陆续分析了entry->src->main下的module.json5中的各个字段的含义及作用。目前剩余pages和abilities两个字段，本篇文章一起来了解pages。
过程有错误，一定要看到最后

pages

官方文档

在这里插入图片描述
在这里插入图片描述

字段定义

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以看到pages的值是String,通过正则要求值的格式必须是
$profile： 开始的，作用是定义了所有page的路径

需要注意的是官方文档中说明除默认存在的src外，还可以存在window标签（可缺省），缺省状态下designWidth默认为720，目测类似于autosize.

思考

1、page的路径仅仅是说明，还是必须声明？
2、window下的designWidth的作用
3、autoDesignWidth的作用

尝试

1、page的路径仅仅是说明，还是必须声明？

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
EntryAbility目前是程序的入口，EntryAbility加载了pages/Index, pages/Index在main_pages.json中的src下存在。
现在把main_pages.json中的pages/Index注释看看会发生什么。
在这里插入图片描述
报错了，json不允许注释
直接删除
在这里插入图片描述
ok，有警告但不报错。
运行看看效果.
在这里插入图片描述
日志显示的是成功的，但是界面无内容.
在这里插入图片描述
改回来，再上个正常的
在这里插入图片描述

结论

被调用的page必须在pages所配置的profile中声明，未声明时不会报错，不影响运行，不会闪退但加载不出内容且
在这里插入图片描述

1.1 重复声明会如何

突发奇想，不声明不行，那么如果声明了两个会如何
在这里插入图片描述
有警告，运行看看
在这里插入图片描述
ok，没有什么问题

结论

重复声明会有警告，建议删除重复项，虽然不影响运行

2、window下的designWidth的作用

默认是没有这个值的，我们先手写一个这个字段，看看字段描述
在这里插入图片描述
Defines window-related configurations. This attribute is not supported by devices running the OHOS.
定义窗口属性，但OHOS不支持。
在这里插入图片描述
看看其他同学对于OHOS的描述，简单来说就是和鸿蒙OS不是一回事。 先不管他。

根据这个我们定义了一个designWidth，和缺省值一致，为720
在这里插入图片描述
同时，也看下designWidth的字段描述
在这里插入图片描述
Indicates the baseline width for page design, in pixels. The size of an element is scaled by the actual device width. This label is an integer.
指示页面设计的基线宽度（以像素为单位）。元素的大小按实际设备宽度进行缩放。此标签是一个整数。

为了更好的看出效果，我们修改一下page/index中的宽度和背景色
在这里插入图片描述
看效果
在这里插入图片描述

虚拟机效果不太对，理论上应该正好全屏，看看真机。

真机效果一致，这是什么原因呢？

继续修改designWidth的值，为72，相比之前缩小10倍，视图应该放大10倍才对
在这里插入图片描述
看看效果
无任何变化-_
郁闷了

结论

并无任何影响，可能我的方向是错误的，想参考一下其他同学的帖子，也未能发现有效的资料。有其他想法的同学欢迎反馈吧。

3、autoDesignWidth的作用

看一下autoDesignWidth的值

在这里插入图片描述

在这里插入图片描述
按照文档说明，当autoDesignWidth=true时，designWidth设置的值会被忽略，将会自动计算的得出。
看看效果
在这里插入图片描述
依然一致，无任何变化
在这里插入图片描述
研究了半天，在这个目录下看到了window的更多说明，疑似专用于类web开发范式
基于类web开发范式，我找到了这个
在这里插入图片描述
Stage模型下的应用或服务的页面仅支持声明式开发范式（推荐），Stage模型下的卡片支持声明式和类web两种开发范式。

上个官方链接

结论(错误的)

在Stage模型下，确定window下的designWidth及autoDesignWidth字段，无任何作用。

修正

发布之后其实我是很放心的，所以我去研究UI了，我很好奇，
我们在上述篇幅中修改的
width(720)
中的720是什么单位，如何保证屏幕兼容的。
我去看文档，无意中看到了这个
在这里插入图片描述

我门上述的720，默认使用的vp，等同于Android中的dp
而lpx是和designwidth有关系的

下图是designWidth和lpx的使用方式
在这里插入图片描述

在这里插入图片描述

结论

designWidth类似于autosize，可以等比例还原设计图，但是组件的width默认输入number是Vp单位的，等同于DP，不受designWidth影响，必须通过==width(px2vp(lpx2px(70)))==将lpx转换为px，暂未发现lpx直接转vp的办法。
所以designWidth和autoDesignWidth都是有效的，只是需要配合**px2vp(lpx2px(70)**使用

走在路上的菜鸟
关注
  • 14
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Maker-HarmonyOS应用开发培训笔记01
ppyy8的博客
06-10 292
鸿蒙系统应用开发培训笔记01
梅科尔工作室-赵赟-鸿蒙笔记1
Z_Y200383的博客
02-01 493
鸿蒙app知识总结
鸿蒙基础入门与高频知识点梳理
流星雨的博客
12-03 709
鸿蒙基础入门与高频知识点梳理
鸿蒙开发基础-UIAbility内页面间的跳转
m0_62167422的博客
01-09 642
基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递。
【华为鸿蒙系统学习】- 如何利用鸿蒙系统进行App项目开发|自学篇
“路漫漫其修远兮，吾将上下求索。”
12-20 7583
创建鸿蒙App项目|运行Hello World| 认识基本工程目录|项目开发过程错误总结 --- Previewer虚拟机构建失败解决方案，鸿蒙虚拟机黑屏解决方案
HarmonyOS-module.json5配置文件
2301_81624474的博客
12-28 2000
先通过一个示例，整体认识一下module.json5配置文件。module.json5配置文件包含以下标签。
HarmonyOS实战开发：module.json5配置文件（Stage模型）
2401_84194030的博客
04-18 939
认识一下module.json5配置文件
WPF实现窗体中的悬浮按钮
08-26
WPF 实现窗体中的悬浮按钮 WPF 实现窗体中的悬浮按钮是一种常见的界面控件，在很多应用程序中都有着广泛的应用。本文将详细介绍如何使用 WPF 实现窗体中的悬浮按钮，并提供了相关的代码示例。 悬浮按钮是一种可以...
用于移动端designWidthlayoutWidth等参数根据计算并设置html的fontsize
08-10
用于移动端designWidth、layoutWidth等参数根据计算并设置html的font-size，并且可以设置最大的font-size
Flutter 不同终端适配方案
01-12
Android 手机的分别率也各不相同，例如 1920x1080、2400x1080、2560x1440 等。 二、Flutter 不同终端屏幕适配方案 Flutter 提供了多种屏幕适配方案，例如使用 MediaQuery、LayoutBuilder、FittedBox 等Widget 来...
vue移动端屏幕适配详解
10-17
5. 对于图片等元素，可以使用CSS的`object-fit`属性保持内容的适应性。 通过以上步骤，我们可以有效地解决Vue移动端的屏幕适配问题，使应用在各种屏幕尺寸下都能有良好的用户体验。记住，适配不是一次性的任务，...
Silverlight命名空间
12-15
在Silverlight中，经常需要引用自定义控件或第三方组件，这时就需要定义自定义命名空间。例如，`xmlns:a="clr-namespace:AAA;assembly=AAALibrary"`定义了一个新的命名空间前缀`a`，并将其关联到`AAA`命名空间下的`...
【Android 11】AOSP Settings添加屏幕旋转按钮
xuanyulevel6的博客
06-13 530
这里是客户要求添加按钮以实现屏幕旋转。这里的值可以是0，1，2，3 的任意一个。我这里没有陀螺仪，所以只需要这个命令就够了。更多的可以参考但是这有个缺陷，就是开机的动画不能随着设置好的屏幕方向旋转。
Android WebSocket长连接的实现
Billy_Zuo的博客
06-12 1486
WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于[“服务器推送技术”]的一种。WebSocket的特点包括：建立在 TCP 协议之上，服务器端的实现比较容易。与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。支持双向通信，实时性更强。
Android 自定义View
qq_44023485的博客
06-16 927
Android 自定义View
Android本地Gradle Plugin的创建以及使用
龙叔的专栏
06-12 404
2.新建一个module 取名叫buildSrc(注意，一定要叫这个名字，而且在setting.gradle中不要include这个Moudle，gradle会自动引入)有些Gradle插件，不想放到云端，本来也只是小功能而已，还放到云端，每次修改和发布都很麻烦，这种需求的插件放到本地还是合适的。使用就是在build.gradle中，正常使用插件。1.直接放到build.gradle。
RK3588 Android13去掉底部导航栏和修改壁纸图片
suifen_的博客
06-17 178
【代码】RK3588 Android13去掉底部导航栏和修改壁纸图片。
全志 Android 11：实现响应全局按键
最新发布
上周的博客
06-19 222
最近实现热键想功能，简单总结了下全志平台Android 11 的响应全局热键的方法。
WPF中Caliburn.Micro框架
12-13
Caliburn.Micro是一个轻量级的MVVM框架，它可以帮助我们更好地实现WPF应用程序的开发。下面是一些关于Caliburn.Micro框架的介绍和示例： 1.使用Caliburn.Micro实现MEF插件化开发，根据dll插件目录动态加载程序集和主程序的Tab页。 ```csharp // 在App.xaml.cs中添加以下代码 protected override void OnStartup(StartupEventArgs e) { base.OnStartup(e); // 创建插件管理器 var pluginManager = new PluginManager(); // 加载插件 pluginManager.LoadPlugins(); // 创建主窗口 var mainWindowViewModel = new MainWindowViewModel(pluginManager); // 显示主窗口 var mainWindow = new MainWindow(); mainWindow.DataContext = mainWindowViewModel; mainWindow.Show(); } ``` 2.CM框架搭建、事件发布与订阅、log打印、ioc容器、Conductor的用法，框架下的命名约定以及事件绑定、Emgucv进行模板匹配、右键菜单、单例模式等等。 ```csharp // ViewModelBase.cs public abstract class ViewModelBase : Screen { protected readonly IEventAggregator _eventAggregator; protected readonly ILog _logger; public ViewModelBase(IEventAggregator eventAggregator, ILog logger) { _eventAggregator = eventAggregator; _logger = logger; } // 发布事件 protected void Publish<TEvent>(TEvent @event) { _eventAggregator.PublishOnUIThread(@event); } // 订阅事件 protected void Subscribe<TEvent>(Action<TEvent> action) { _eventAggregator.Subscribe(action, ThreadOption.UIThread); } // 打印日志 protected void Log(string message) { _logger.Info(message); } } // ShellViewModel.cs public class ShellViewModel : Conductor<object>.Collection.OneActive { private readonly IWindowManager _windowManager; private readonly IEventAggregator _eventAggregator; private readonly ILog _logger; private readonly IContainer _container; public ShellViewModel(IWindowManager windowManager, IEventAggregator eventAggregator, ILog logger, IContainer container) { _windowManager = windowManager; _eventAggregator = eventAggregator; _logger = logger; _container = container; // 订阅事件 _eventAggregator.Subscribe(this); } // 打开新窗口 public void OpenWindow() { var viewModel = _container.Resolve<NewWindowViewModel>(); _windowManager.ShowDialog(viewModel); } // 关闭窗口 public void CloseWindow() { TryClose(); } // 处理事件 public void Handle(MyEvent @event) { // 处理事件 } } // ShellView.xaml <UserControl x:Class="MyApp.Views.ShellView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cal="http://www.caliburnproject.org" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Menu Grid.Row="0"> <MenuItem Header="File"> <MenuItem Header="Open" cal:Message.Attach="OpenWindow" /> <MenuItem Header="Close" cal:Message.Attach="CloseWindow" /> </MenuItem> </Menu> <ContentControl Grid.Row="1" cal:View.Model="{Binding ActiveItem}" /> </Grid> </UserControl> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值