Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
123dcc9c
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看板
未验证
提交
123dcc9c
编写于
10月 29, 2022
作者:
L
luoying_ace
提交者:
Gitee
10月 29, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
8dd0469b
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
29 addition
and
32 deletion
+29
-32
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
...reference/arkui-ts/ts-universal-attributes-flex-layout.md
+29
-32
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @
123dcc9c
...
...
@@ -13,7 +13,7 @@
| flexBasis | number
\|
string | 设置组件在父容器主轴方向上的基准尺寸。
<br/>
默认值:'auto'(表示组件在主轴方向上的基准尺寸为组件原本的大小)。
<br/>
不支持百分比设置。 |
| flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。
<br/>
默认值:0 |
| flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。
<br/>
父容器为Row、Column时,默认值:0
<br/>
父容器为flex时,默认值:1 |
| alignSelf |
[
ItemAlign
](
ts-appendix-enums.md#itemalign
)
| 子组件在父容器交叉轴的对齐格式,
覆盖Flex布局容器中alignItems默认配
置。
<br/>
默认值:ItemAlign.Auto |
| alignSelf |
[
ItemAlign
](
ts-appendix-enums.md#itemalign
)
| 子组件在父容器交叉轴的对齐格式,
会覆盖Flex布局容器中的alignItems设
置。
<br/>
默认值:ItemAlign.Auto |
## 示例
...
...
@@ -26,86 +26,83 @@ struct FlexExample {
build
()
{
Column
({
space
:
5
})
{
Text
(
'
flexBasis
'
).
fontSize
(
9
).
fontColor
(
0xCCCCCC
).
width
(
'
90%
'
)
// 基于主轴基准尺寸
// flexBasis()值可以是
'auto',表示基准尺寸是元素本来的大小
,也可以是长度设置,相当于.width()/.height()
// 基于主轴
的
基准尺寸
// flexBasis()值可以是
字符串'auto',表示基准尺寸是元素本来的大小
,也可以是长度设置,相当于.width()/.height()
Flex
()
{
Text
(
'
flexBasis(100)
'
)
.
flexBasis
(
'
100
'
)
.
flexBasis
(
100
)
// 这里表示宽度为100vp
.
height
(
100
)
.
lineHeight
(
70
)
.
backgroundColor
(
0xF5DEB3
)
.
textAlign
(
TextAlign
.
Center
)
Text
(
'
flexBasis("auto")
'
)
.
flexBasis
(
'
auto
'
)
Text
(
`flexBasis('auto')`
)
.
flexBasis
(
'
auto
'
)
// 这里表示宽度保持原本设置的60%的宽度
.
width
(
'
60%
'
)
.
height
(
100
)
.
lineHeight
(
70
)
.
backgroundColor
(
0xD2B48C
)
.
textAlign
(
TextAlign
.
Center
)
}.
width
(
'
90%
'
).
height
(
120
).
padding
(
10
).
backgroundColor
(
0xAFEEEE
)
Text
(
'
flexGrow
'
).
fontSize
(
9
).
fontColor
(
0xCCCCCC
).
width
(
'
90%
'
)
// 剩余空间所占比例
// flexGrow()剩余空间分配给该元素的比例
// flexGrow()表示剩余空间分配给该元素的比例
Flex
()
{
Text
(
'
flexGrow(2)
'
)
.
flexGrow
(
2
)
.
flexGrow
(
2
)
// 父容器分配给该Text的宽度为剩余宽度的2/3
.
height
(
100
)
.
lineHeight
(
70
)
.
backgroundColor
(
0xF5DEB3
)
.
textAlign
(
TextAlign
.
Center
)
Text
(
'
flexGrow(1)
'
)
.
flexGrow
(
1
)
.
flexGrow
(
1
)
// 父容器分配给该Text的宽度为剩余宽度的1/3
.
height
(
100
)
.
lineHeight
(
70
)
.
backgroundColor
(
0xD2B48C
)
.
textAlign
(
TextAlign
.
Center
)
}.
width
(
'
90%
'
).
height
(
120
).
padding
(
10
).
backgroundColor
(
0xAFEEEE
)
Text
(
'
flexShrink
'
).
fontSize
(
9
).
fontColor
(
0xCCCCCC
).
width
(
'
90%
'
)
// flexShrink()
此属性所在的组件的比例
//
text1比例是0,其他都是默认值1,放不下时直接等比例缩放后两个,第一个不缩放
// flexShrink()
表示该元素的压缩比例,基于超出的总尺寸进行计算
//
第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩
Flex
({
direction
:
FlexDirection
.
Row
})
{
Text
(
'
flexShrink(0)
'
)
.
flexShrink
(
0
)
.
width
(
'
50%
'
)
.
height
(
100
)
.
lineHeight
(
70
)
.
backgroundColor
(
0xF5DEB3
)
.
textAlign
(
TextAlign
.
Center
)
Text
(
'
no flexShrink
'
)
Text
(
'
default flexShrink
'
)
// 默认值为1
.
width
(
'
40%
'
)
.
height
(
100
)
.
lineHeight
(
70
)
.
backgroundColor
(
0xD2B48C
)
.
textAlign
(
TextAlign
.
Center
)
Text
(
'
flexShrink(
2
)
'
)
.
flexShrink
(
2
)
Text
(
'
flexShrink(
1
)
'
)
.
flexShrink
(
1
)
.
width
(
'
40%
'
)
.
height
(
100
)
.
lineHeight
(
70
)
.
backgroundColor
(
0xF5DEB3
)
.
textAlign
(
TextAlign
.
Center
)
}.
width
(
'
90%
'
).
height
(
120
).
padding
(
10
).
backgroundColor
(
0xAFEEEE
)
Text
(
'
alignSelf
'
).
fontSize
(
9
).
fontColor
(
0xCCCCCC
).
width
(
'
90%
'
)
// alignSelf
()覆盖Flex布局容器中alignItems默认配
置
// alignSelf
会覆盖Flex布局容器中的alignItems设
置
Flex
({
direction
:
FlexDirection
.
Row
,
alignItems
:
ItemAlign
.
Center
})
{
Text
(
'
no alignSelf,height:80
'
).
width
(
'
33%
'
).
height
(
80
)
.
backgroundColor
(
0xF5DEB3
).
textAlign
(
TextAlign
.
Center
)
Text
(
'
alignSelf stretch
'
)
.
alignSelf
(
ItemAlign
.
Stretch
)
Text
(
'
no alignSelf,height:70
'
)
.
width
(
'
33%
'
)
.
height
(
80
)
.
lineHeight
(
70
)
.
height
(
70
)
.
backgroundColor
(
0xF5DEB3
)
.
textAlign
(
TextAlign
.
Center
)
Text
(
'
alignSelf End
'
)
.
alignSelf
(
ItemAlign
.
End
)
.
width
(
'
33%
'
)
.
height
(
70
)
.
backgroundColor
(
0xD2B48C
)
.
textAlign
(
TextAlign
.
Center
)
Text
(
'
no alignSelf,height:100
'
).
width
(
'
34%
'
).
height
(
100
)
.
backgroundColor
(
0xF5DEB3
).
textAlign
(
TextAlign
.
Center
)
Text
(
'
no alignSelf,height:100%
'
)
.
width
(
'
34%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
0xF5DEB3
)
.
textAlign
(
TextAlign
.
Center
)
}.
width
(
'
90%
'
).
height
(
120
).
padding
(
10
).
backgroundColor
(
0xAFEEEE
)
}.
width
(
'
100%
'
).
margin
({
top
:
5
})
}
}
```
![
zh-cn_image_0000001219744197
](
figures/zh-cn_image_0000001219744197.png
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录