Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 ae44d303 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!9945 update docs 

Merge pull request !9945 from sienna1128/docs/0926
上级 dccc5bdb f5f8205c
隐藏空白更改
内联 并排
Showing with 196 addition and 137 deletion
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
浏览文件 @ ae44d303
......@@ -11,7 +11,7 @@
| 名称 | 参数说明 | 描述 |
| --------------- | ------ | ---------------------------------------- |
| aspectRatio | number | 指定当前组件的宽高比。 |
| aspectRatio | number | 指定当前组件的宽高比，aspectRatio = width/height。 |
| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>**说明：**<br/>仅在Row/Column/Flex(单行)容器组件中生效。 |
......@@ -22,29 +22,32 @@
@Entry
@Component
struct AspectRatioExample {
private children : string[] = ['1', '2', '3', '4', '5', '6']
private children: string[] = ['1', '2', '3', '4', '5', '6'];
build() {
Column({space: 20}) {
Column({ space: 20 }) {
Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%')
Row({space: 10}) {
Row({ space: 10 }) {
ForEach(this.children, (item) => {
// 组件宽度 = 组件高度*1.5 = 90
Text(item)
.backgroundColor(0xbbb2cb)
.fontSize(20)
.aspectRatio(1.5)
.height(60)
// 组件高度 = 组件宽度/1.5 = 60/1.5 = 40
Text(item)
.backgroundColor(0xbbb2cb)
.fontSize(20)
.aspectRatio(1.5)
.width(60)
}, item=>item)
}, item => item)
}
.size({width: "100%", height: 100})
.size({ width: "100%", height: 100 })
.backgroundColor(0xd2cab3)
.clip(true)
// grid子元素width/height=3/2
Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%')
Grid() {
ForEach(this.children, (item) => {
......@@ -54,12 +57,12 @@ struct AspectRatioExample {
.fontSize(40)
.aspectRatio(1.5)
}
}, item=>item)
}, item => item)
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.size({width: "100%", height: 165})
.size({ width: "100%", height: 165 })
.backgroundColor(0xd2cab3)
}.padding(10)
}
......@@ -74,40 +77,44 @@ struct AspectRatioExample {
```ts
class ContainerInfo {
label : string = ''
size : string = ''
label: string = '';
size: string = '';
}
class ChildInfo {
text : string = ''
priority : number = 0
text: string = '';
priority: number = 0;
}
@Entry
@Component
struct DisplayPriorityExample {
private container : ContainerInfo[] = [
{label: 'Big container', size: '90%'},
{label: 'Middle container', size: '50%'},
{label: 'Small container', size: '30%'}
// 显示容器大小
private container: ContainerInfo[] = [
{ label: 'Big container', size: '90%' },
{ label: 'Middle container', size: '50%' },
{ label: 'Small container', size: '30%' }
]
private children : ChildInfo[] = [
{text: '1\n(priority:2)', priority: 2},
{text: '2\n(priority:1)', priority: 1},
{text: '3\n(priority:3)', priority: 3},
{text: '4\n(priority:1)', priority: 1},
{text: '5\n(priority:2)', priority: 2}
private children: ChildInfo[] = [
{ text: '1\n(priority:2)', priority: 2 },
{ text: '2\n(priority:1)', priority: 1 },
{ text: '3\n(priority:3)', priority: 3 },
{ text: '4\n(priority:1)', priority: 1 },
{ text: '5\n(priority:2)', priority: 2 }
]
@State currentIndex : number = 0
@State currentIndex: number = 0;
build() {
Column({space: 10}) {
Column({ space: 10 }) {
// 切换父级容器大小
Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
.onClick((event: ClickEvent) => {
this.currentIndex = (this.currentIndex + 1) % this.container.length
.onClick(() => {
this.currentIndex = (this.currentIndex + 1) % this.container.length;
})
Flex({justifyContent: FlexAlign.SpaceBetween}) {
ForEach(this.children, (item)=>{
// 通过变量设置Flex父容器宽度
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
ForEach(this.children, (item) => {
// 使用displayPriority给子组件绑定显示优先级
Text(item.text)
.width(120)
.height(60)
......@@ -115,11 +122,11 @@ struct DisplayPriorityExample {
.textAlign(TextAlign.Center)
.backgroundColor(0xbbb2cb)
.displayPriority(item.priority)
}, item=>item.text)
}, item => item.text)
}
.width(this.container[this.currentIndex].size)
.backgroundColor(0xd2cab3)
}.width("100%").margin({top:50})
}.width("100%").margin({ top: 50 })
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
浏览文件 @ ae44d303
......@@ -12,25 +12,25 @@
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。<br/>默认值：Alignment.Center |
| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，当元素的width和height大小大于元素本身内容大小时生效。<br/>默认值：Alignment.Center |
| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。<br/>默认值：Direction.Auto |
| position | [Position](ts-types.md#position8) | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 |
| markAnchor | [Position](ts-types.md#position8) | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| offset | [Position](ts-types.md#position8) | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| position | [Position](ts-types.md#position8) | 绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 |
| markAnchor | [Position](ts-types.md#position8) | 设置元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>} |
| offset | [Position](ts-types.md#position8) | 相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>} |
| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则。<br/>-&nbsp;left：设置左对齐参数。<br/>-&nbsp;right：设置右对齐参数。<br/>-&nbsp;middle：设置中间对齐的参数。<br/>-&nbsp;top：设置顶部对齐的参数。<br/>-&nbsp;bottom：设置底部对齐的参数。<br/>-&nbsp;center：设置中心对齐的参数。<br/>**说明：**<br/>-&nbsp;anchor：设置作为锚点的组件的id值。<br>-&nbsp;align：设置相对于锚点组件的对齐方式。 |
## 示例
### 示例1
```ts
// xxx.ets
@Entry
@Component
struct PositionExample {
struct PositionExample1 {
build() {
Column() {
Column({space: 10}) {
Column({ space: 10 }) {
// 元素内容<元素宽高，设置内容在与元素内的对齐方式
Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%')
Text('top start')
.align(Alignment.TopStart)
......@@ -39,6 +39,14 @@ struct PositionExample {
.fontSize(16)
.backgroundColor(0xFFE4C4)
Text('Bottom end')
.align(Alignment.BottomEnd)
.height(50)
.width('90%')
.fontSize(16)
.backgroundColor(0xFFE4C4)
// 父容器设置direction为Direction.Auto|Ltr|不设置，子元素从左到右排列
Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
......@@ -47,6 +55,15 @@ struct PositionExample {
Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
}
.width('90%')
.direction(Direction.Auto)
// 父容器设置direction为Direction.Rtl，子元素从右到左排列
Row() {
Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
}
.width('90%')
.direction(Direction.Rtl)
}
}
......@@ -55,54 +72,75 @@ struct PositionExample {
}
```
![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif)
![align.png](figures/align.png)
### 示例2
```ts
// xxx.ets
@Entry
@Component
struct PositionExample2 {
build() {
Column({ space: 20 }) {
// 设置子组件左上角相对于父组件左上角的偏移位置
Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row({ space: 20 }) {
Text('1').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }) .fontSize(16)
Text('2 position(25, 15)')
.size({ width: '60%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 })
.fontSize(16).align(Alignment.Start)
.position({ x: 25, y: 15 })
Row() {
Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
Text('2 position(30, 10)')
.size({ width: '60%', height: '30' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.align(Alignment.Start)
.position({ x: 30, y: 10 })
Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
Text('4 position(50%, 70%)')
.size({ width: '50%', height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
.size({ width: '50%', height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.position({ x: '50%', y: '70%' })
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
// 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。
// y为最终定位点距离起点垂直方向间距，y>0向上，反之向下
Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%')
Stack({ alignContent: Alignment.TopStart }) {
Row()
.size({ width: '100', height: '100' })
.backgroundColor(0xdeb887)
Image($r('app.media.ic_health_heart'))
Text('text')
.size({ width: 25, height: 25 })
.backgroundColor(Color.Green)
.markAnchor({ x: 25, y: 25 })
Image($r('app.media.ic_health_heart'))
Text('text')
.size({ width: 25, height: 25 })
.markAnchor({ x: 25, y: 25 })
.position({ x: '100%', y: '100%' })
.backgroundColor(Color.Green)
.markAnchor({ x: -100, y: -25 })
Text('text')
.size({ width: 25, height: 25 })
.backgroundColor(Color.Green)
.markAnchor({ x: 25, y: -25 })
}.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed })
// 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上
Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row() {
Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
Text('2\noffset(15, 15)')
.size({ width: 120, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 })
.fontSize(16).align(Alignment.Start)
.offset({ x: 15, y: 15 })
Text('2 offset(15, 30)')
.size({ width: 120, height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.align(Alignment.Start)
.offset({ x: 15, y: 30 })
Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
Text('4\noffset(-10%, 20%)')
.size({ width: 150, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
.offset({ x: '-10%', y: '20%' })
Text('4 offset(-10%, 20%)')
.size({ width: 100, height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 })
.fontSize(16)
.offset({ x: '-5%', y: '20%' })
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
}
.width('100%').margin({ top: 25 })
......@@ -110,4 +148,4 @@ struct PositionExample2 {
}
```
![zh-cn_image_0000001174104392](figures/zh-cn_image_0000001174104392.gif)
![position.png](figures/position.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ ae44d303
......@@ -10,9 +10,9 @@
## 属性
| 名称 | 参数类型 | 描述 |
| ------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。<br>**说明：**<br/>子组件可以继承父组件的此属性。默认值：1 |
| 名称 | 参数类型 | 描述 |
| ------- | ---------------------------------------- | ---------------------------------------- |
| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。<br>**说明：**<br/>子组件可以继承父组件的此属性。默认值：1 |
## 示例
......@@ -30,6 +30,10 @@ struct OpacityExample {
Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
}
.width('100%')
.padding({ top: 5 })
......@@ -37,4 +41,4 @@ struct OpacityExample {
}
```
![zh-cn_image_0000001219662647](figures/zh-cn_image_0000001219662647.gif)
![opacity.png](figures/opacity.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ ae44d303
......@@ -8,10 +8,9 @@
## 属性
| 名称 | 参数类型 | 描述 |
| ------- | ----------------------------- | ------------------------- |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{<br> x?:&nbsp;number,<br> y?:&nbsp;number<br> }<br/>} | 在当前组件上，增加遮罩文本，布局与当前组件相同。<br>默认值：<br>{<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} |
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本。<br/> value: 遮罩文本内容。<br/>options: 文本定位，align设置文本相对于组件的方位，[offset](ts-universal-attributes-location.md)为文本基于自身左上角的偏移量。文本默认处于组件左上角。<br>两者都设置时效果重叠，文本相对于组件方位定位后再基于当前位置文本的左上角进行偏移。 |
## 示例
......@@ -28,7 +27,10 @@ struct OverlayExample {
Column() {
Image($r('app.media.img'))
.width(240).height(240)
.overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } })
.overlay("Winter is a beautiful season, especially when it snows.", {
align: Alignment.Bottom,
offset: { x: 70, y: 100 }
})
}.border({ color: Color.Black, width: 2 })
}.width('100%')
}.padding({ top: 20 })
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
浏览文件 @ ae44d303
# 尺寸设置
用于设置组件的宽高、边距等显示尺寸进行设置。
用于设置组件的宽高、边距。
> **说明：**
>
......@@ -18,7 +18,7 @@
| padding | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。<br>默认值：0 <br>padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 |
| margin | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。<br>默认值：0 <br>margin设置百分比时，上下左右外边距均以父容器的width作为基础值。|
| constraintSize | {<br/>minWidth?:&nbsp;[Length](ts-types.md#length),<br/>maxWidth?:&nbsp;[Length](ts-types.md#length),<br/>minHeight?:&nbsp;[Length](ts-types.md#length),<br/>maxHeight?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。<br>默认值：<br>{<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} |
| layoutWeight | number&nbsp;\|&nbsp;string | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。<br>**说明：**<br/>仅在Row/Column/Flex布局中生效。<br>默认值：0 |
| layoutWeight | number&nbsp;\|&nbsp;string | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br>**说明：**<br/>仅在Row/Column/Flex布局中生效。|
## 示例
......@@ -31,30 +31,41 @@ struct SizeExample {
build() {
Column({ space: 10 }) {
Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
// 宽度80 ,高度80 ,内外边距20
Row() {
// 宽度80 ,高度80 ,外边距20(蓝色区域），内边距10（白色区域）
Row() {
Row().size({ width: '100%', height: '100%' }).backgroundColor(0xAFEEEE)
}.width(80).height(80).padding(20).margin(20).backgroundColor(0xFDF5E6)
}.backgroundColor(0xFFA500)
Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
}
.width(80)
.height(80)
.padding(10)
.margin(20)
.backgroundColor(Color.White)
}.backgroundColor(Color.Blue)
Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%')
Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text')
.width('90%')
.constraintSize({ maxWidth: 200 })
Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%')
// 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
// 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
Row() {
// 权重1
// 权重1，占主轴剩余空间1/3
Text('layoutWeight(1)')
.size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
.layoutWeight(1)
// 权重2
// 权重2，占主轴剩余空间2/3
Text('layoutWeight(2)')
.size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
.layoutWeight(2)
// 权重默认0
// 未设置layoutWeight属性，组件按照自身尺寸渲染
Text('no layoutWeight')
.size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
}.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}}
}
}
```
![zh-cn_image_0000001174264384](figures/zh-cn_image_0000001174264384.gif)
![size](figures/size.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
浏览文件 @ ae44d303
# 文本样式设置
针对包含文本元素的组件，设置文本样式。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
针对包含文本元素的组件，设置文本样式。
## 属性
| 名称 | 参数类型 | 描述 |
| -----------| ---------------------------------------- | ------------------------------------ |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置文本颜色。 |
| fontSize | Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本尺寸，Length为number类型时，使用fp单位。 |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置文本的字体样式。<br>默认值：FontStyle.Normal |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置字体颜色。 |
| fontSize | Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置字体大小，Length为number类型时，使用fp单位。字体默认大小10。 |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置字体样式。<br>默认值：FontStyle.Normal |
| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。<br/>默认值：FontWeight.Normal |
| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。 |
| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置字体列表。默认字体'HarmonyOS Sans'，且当前只支持这种字体。|
## 示例
......@@ -29,40 +30,38 @@ struct TextStyleExample {
build() {
Column({ space: 5 }) {
Text('default text')
Text('text font color red')
Divider()
Text('text font color red').fontColor(Color.Red)
Divider()
Text('text font default')
Text('text font size 10').fontSize(10)
Text('text font size 10fp').fontSize('10fp')
Text('text font size 20').fontSize(20)
Divider()
Text('text font style Italic').fontStyle(FontStyle.Italic)
Divider()
Text('text fontWeight bold').fontWeight(700)
Text('text fontWeight lighter').fontWeight(FontWeight.Lighter)
Divider()
Text('red 20 Italic bold text')
.fontColor(Color.Red)
Text('text font size 20')
.fontSize(20)
Text('text font style Italic')
.fontStyle(FontStyle.Italic)
Text('text fontWeight bold')
.fontWeight(700)
Text('text fontFamily sans-serif')
.fontFamily('sans-serif')
Text('red 20 Italic bold cursive text')
.fontColor(Color.Red)
.fontSize(20)
.fontStyle(FontStyle.Italic)
.fontWeight(700)
.fontFamily('cursive')
.textAlign(TextAlign.Center)
.width('90%')
Text('Orange 18 Normal source-sans-pro text')
.fontWeight(FontWeight.Bold)
Divider()
Text('Orange 18 Normal text')
.fontColor(Color.Orange)
.fontSize(18)
.fontStyle(FontStyle.Normal)
.fontWeight(400)
.fontFamily('source-sans-pro,cursive,sans-serif')
}.width('100%')
}
}
```
![zh-cn_image_0000001219662673](figures/zh-cn_image_0000001219662673.png)
![textstyle](figures/textstyle.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ ae44d303
......@@ -23,20 +23,21 @@ struct VisibilityExample {
build() {
Column() {
Column() {
Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
// 隐藏不参与占位
Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
// 隐藏参与占位
Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
// 正常显示，组件默认的显示模式
Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
}.width('90%').border({ width: 1 })
}.width('100%').margin({ top: 5 })
}
}
```
![zh-cn_image_0000001174104390](figures/zh-cn_image_0000001174104390.gif)
![visibility.png](figures/visibility.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
浏览文件 @ ae44d303
# Z序控制
组件的Z序，指明了该组件在堆叠组件中的位置。
组件的Z序，设置组件的堆叠顺序。
> **说明：**
>
......@@ -25,20 +25,25 @@ struct ZIndexExample {
build() {
Column() {
Stack() {
// stack会重叠组件, 默认后定义的在最上面
Text('first child, zIndex(2)')
.size({width: '40%', height: '30%'}).backgroundColor(0xbbb2cb)
// stack会重叠组件, 默认后定义的在最上面，具有较高zIndex值的元素在zIndex较小的元素前面
Text('1, zIndex(2)')
.size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb)
.zIndex(2)
// 默认值0
Text('second child, default zIndex(0)')
.size({width: '90%', height: '80%'}).backgroundColor(0xd2cab3).align(Alignment.TopStart)
Text('third child, zIndex(1)')
.size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart)
Text('2, default zIndex(1)')
.size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)
.zIndex(1)
Text('3, zIndex(0)')
.size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart)
}.width('100%').height(200)
}.width('100%').height(200)
}
}
```
Stack容器内子组件不设置zIndex的效果
![nozindex.png](figures/nozindex.png)
Stack容器子组件设置zIndex后效果
![zindex.png](figures/zindex.png)
![zh-cn_image_0000001174582860](figures/zh-cn_image_0000001174582860.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ ae44d303
......@@ -42,4 +42,4 @@ struct AreaExample {
}
```
![zh-cn_image_0000001189634870](figures/zh-cn_image_0000001189634870.gif)
![zh-cn_image_0000001189634870](figures/zh-cn_image_0000001189634870.gif)
\ No newline at end of file
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ ae44d303
......@@ -7,16 +7,8 @@
## 示例
```
common
│ └─ utils
│ └─ utils.ets
└─ pages
└─ index.ets
```
如上所示，将utils放在common中,示例中index.ets访问utils.ets文件
示例页面位于pages目录中，在pages同级目录common中存放utils，从示例xxx.ets访问utils.ets文件方法如下：
```ts
// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils";
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或