Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
21301aaa
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
21301aaa
编写于
11月 29, 2022
作者:
O
openharmony_ci
提交者:
Gitee
11月 29, 2022
浏览文件
操作
浏览文件
下载
差异文件
!11926 敏感词修改+描述调整
Merge pull request !11926 from LiAn/master
上级
eceadfbd
459e5bcf
变更
4
展开全部
隐藏空白更改
内联
并排
Showing
4 changed file
with
234 addition
and
239 deletion
+234
-239
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
...ication-dev/reference/arkui-ts/ts-basic-components-web.md
+217
-217
zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md
zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md
+4
-11
zh-cn/application-dev/ui/ui-ts-developing-intro.md
zh-cn/application-dev/ui/ui-ts-developing-intro.md
+8
-8
zh-cn/application-dev/ui/ui-ts-layout-flex.md
zh-cn/application-dev/ui/ui-ts-layout-flex.md
+5
-3
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @
21301aaa
此差异已折叠。
点击以展开。
zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md
浏览文件 @
21301aaa
...
...
@@ -3,11 +3,11 @@
为开发者提供4种像素单位,框架采用vp为基准数据单位。
| 名称
| 描述
|
| ---- | ----------------------------------------
--------------------
|
| px | 屏幕物理像素单位。
|
| 名称
| 描述
|
| ---- | ---------------------------------------- |
| px | 屏幕物理像素单位。 |
| vp | 屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。 |
| fp | 字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。 |
| fp | 字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。
|
| lpx | 视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过
[
designWidth
](
../../quick-start/package-structure.md
)
配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。 |
...
...
@@ -72,10 +72,3 @@ struct Example {
```
![
zh-cn_image_0000001169582302
](
figures/zh-cn_image_0000001169582302.png
)
## 相关实例
基于像素转换,有以下相关实例可供参考:
-
[
像素转换(ArkTS)(API9)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/PixelUnitsDemo
)
zh-cn/application-dev/ui/ui-ts-developing-intro.md
浏览文件 @
21301aaa
...
...
@@ -2,14 +2,14 @@
## 开发说明
| 任务
| 简介 | 相关资源
|
| -----------
----------- | ------------------------------------------------------------ | --------------------
---------------------------------------- |
| 准备开发环境
| 了解声明式UI的工程结构。
<br>
了解资源分类与访问。
|
[
OpenHarmony工程介绍
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-project-overview-0000001218440650
)
<br>
[
资源分类与访问
](
../quick-start/resource-categories-and-access.md
)
|
| 学习ArkTS语言
| ArkTS是HarmonyOS优选的主力应用开发语言,当前,ArkTS在TS基础上主要扩展了声明式UI能力。 |
[
学习ArkTS语言
](
../quick-start/arkts-get-started.md
)
|
| 开发页面
| 根据页面的使用场景,选择合适的布局。
<br>
根据页面需要实现的内容,添加系统内置组件,并修改组件样式。
<br>
更新页面内容,丰富页面展现形式。 |
[
创建页面
](
#创建页面
)
<br>
[
常见布局开发指导
](
ui-ts-layout-linear.md
)
<br>
[
常见组件说明
](
ui-ts-components-intro.md
)
<br>
[
修改组件样式
](
#修改组件样式
)
<br>
[
更新页面内容
](
#更新页面内容
)
|
| (可选)页面多样化
| 绘图和动画。
|
[
绘图组件
](
../reference/arkui-ts/ts-drawing-components-circle.md
)
<br>
[
画布组件
](
../reference/arkui-ts/ts-components-canvas-canvas.md
)
<br>
[
动画
](
../reference/arkui-ts/ts-animatorproperty.md
)
|
| (可选)页面之间的跳转 | 使用页面路由实现多个页面之前的跳转。
|
[
页面路由
](
../reference/apis/js-apis-router.md
)
|
| (可选)性能提升
| 避免低性能代码对应用的性能造成负面影响。 |
[
性能提升的推荐方法
](
ui-ts-performance-improvement-recommendation.md
)
|
| 任务
| 简介 | 相关资源
|
| -----------
| ---------------------------------------- |
---------------------------------------- |
| 准备开发环境
| 了解声明式UI的工程结构。
<br>
了解资源分类与访问。
|
[
OpenHarmony工程介绍
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-project-overview-0000001218440650
)
<br>
[
资源分类与访问
](
../quick-start/resource-categories-and-access.md
)
|
| 学习ArkTS语言
| ArkTS是OpenHarmony优选的主力应用开发语言,当前,ArkTS在TS基础上主要扩展了声明式UI能力。 |
[
学习ArkTS语言
](
../quick-start/arkts-get-started.md
)
|
| 开发页面 | 根据页面的使用场景,选择合适的布局。
<br>
根据页面需要实现的内容,添加系统内置组件,并修改组件样式。
<br>
更新页面内容,丰富页面展现形式。 |
[
创建页面
](
#创建页面
)
<br>
[
常见布局开发指导
](
ui-ts-layout-linear.md
)
<br>
[
常见组件说明
](
ui-ts-components-intro.md
)
<br>
[
修改组件样式
](
#修改组件样式
)
<br>
[
更新页面内容
](
#更新页面内容
)
|
| (可选)页面多样化
| 绘图和动画。
|
[
绘图组件
](
../reference/arkui-ts/ts-drawing-components-circle.md
)
<br>
[
画布组件
](
../reference/arkui-ts/ts-components-canvas-canvas.md
)
<br>
[
动画
](
../reference/arkui-ts/ts-animatorproperty.md
)
|
| (可选)页面之间的跳转 | 使用页面路由实现多个页面之前的跳转。
|
[
页面路由
](
../reference/apis/js-apis-router.md
)
|
| (可选)性能提升 | 避免低性能代码对应用的性能造成负面影响。 |
[
性能提升的推荐方法
](
ui-ts-performance-improvement-recommendation.md
)
|
## 创建页面
...
...
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @
21301aaa
...
...
@@ -5,10 +5,12 @@
-
容器:
[
Flex组件
](
../reference/arkui-ts/ts-container-flex.md
)
作为Flex布局的容器,用于设置布局相关属性。
-
子组件: Flex组件内的子组件自动成为布局的子组件。
-
主轴:
水平
方向的轴线,子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端,结束位置称为主轴终点端。
-
交叉轴: 垂直
方向的轴线。交叉
始的位置称为主轴首部,结束位置称为交叉轴尾部。
-
主轴:
Flex组件布局
方向的轴线,子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端,结束位置称为主轴终点端。
-
交叉轴: 垂直
于主轴方向的轴线。交叉轴起
始的位置称为主轴首部,结束位置称为交叉轴尾部。
![](figures/flex.png)
以FlexDirection.Row的Flex为例:
![](
figures/flex.png
)
## 容器组件属性
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录