Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
0da2d5a9
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看板
提交
0da2d5a9
编写于
10月 19, 2022
作者:
S
sienna1128
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
sienna1128
<
lixiaoyan45@huawei.com
>
上级
9586585b
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
14 addition
and
12 deletion
+14
-12
zh-cn/application-dev/reference/arkui-ts/figures/text_clock.gif
...application-dev/reference/arkui-ts/figures/text_clock.gif
+0
-0
zh-cn/application-dev/ui/ui-ts-layout-flex.md
zh-cn/application-dev/ui/ui-ts-layout-flex.md
+1
-1
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+1
-0
zh-cn/application-dev/ui/ui-ts-layout-stack.md
zh-cn/application-dev/ui/ui-ts-layout-stack.md
+12
-11
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/text_clock.gif
查看替换文件 @
9586585b
浏览文件 @
0da2d5a9
82.6 KB
|
W:
|
H:
62.7 KB
|
W:
|
H:
2-up
Swipe
Onion skin
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @
0da2d5a9
# 弹性布局
弹性布局
又称Flex布局,
是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子元素进行排列、对齐和分配空白空间。
弹性布局
(Flex布局)
是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子元素进行排列、对齐和分配空白空间。
开发者可以通过Flex的接口创建容器组件,进而对容器内的其他元素进行弹性布局。
...
...
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @
0da2d5a9
...
...
@@ -14,6 +14,7 @@
## 媒体查询引入与使用流程
通过调用媒体查询接口,设置媒体查询条件和查询结果的回调函数,在对应的条件的回调函数里更改页面布局或者实现业务逻辑。具体步骤如下:
首先导入媒体查询模块,例如:
```
ts
import
mediaquery
from
'
@ohos.mediaquery
'
...
...
zh-cn/application-dev/ui/ui-ts-layout-stack.md
浏览文件 @
0da2d5a9
...
...
@@ -5,19 +5,19 @@
## 对齐方式
设置子组件在容器内的对齐方式。支持左上,上中,右上,左,中,右,右下,中下,右下九种对齐方式
设置子组件在容器内的对齐方式。支持左上,上中,右上,左,中,右,右下,中下,右下九种对齐方式
,如下表所示:
|名称| 描述| 图示 |
|---| ---|---|
|TopStart| 顶部起始端
。
|!
[](
figures/stacktopstart.png
)
|
Top |顶部横向居中
。
|!
[](
figures/stacktop.png
)
|
TopEnd| 顶部尾端
。
|!
[](
figures/stacktopend.png
)
|
Start| 起始端纵向居中
。
|!
[](
figures/stackstart.png
)
|
Center| 横向和纵向居中
。
|!
[](
figures/stackcenter.png
)
|
End| 尾端纵向居中
。
|!
[](
figures/stackend.png
)
|
BottomStart |底部起始端
。
|!
[](
figures/stackbottomstart.png
)
|
Bottom| 底部横向居中
。
|!
[](
figures/stackbottom.png
)
|
BottomEnd| 底部尾端
。
|!
[](
figures/stackbottomend.png
)
|
|TopStart| 顶部起始端
|!
[](
figures/stacktopstart.png
)
|
Top |顶部横向居中
|!
[](
figures/stacktop.png
)
|
TopEnd| 顶部尾端
|!
[](
figures/stacktopend.png
)
|
Start| 起始端纵向居中
|!
[](
figures/stackstart.png
)
|
Center| 横向和纵向居中
|!
[](
figures/stackcenter.png
)
|
End| 尾端纵向居中
|!
[](
figures/stackend.png
)
|
BottomStart |底部起始端
|!
[](
figures/stackbottomstart.png
)
|
Bottom| 底部横向居中
|!
[](
figures/stackbottom.png
)
|
BottomEnd| 底部尾端
|!
[](
figures/stackbottomend.png
)
|
## Z序控制
...
...
@@ -48,12 +48,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
}.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
Column(){
Text('Stack子元素2').fontSize(20)
}.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
}.width(150).height(150).backgroundColor(C
olor.Pink).zIndex(1)
Column(){
Text('Stack子元素3').fontSize(20)
}.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
```
!
[](
figures/stack1.png
)
-
通过Z序控制实现了显示效果。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录