Skip to content

D
Docs

Tonvia / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 0
Fork 0
D
Docs

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

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

!14234 【UI组件重构】文档整改 

Merge pull request !14234 from 田雨/master
上级 809e7120 baee1ca6
隐藏空白更改
内联 并排
Showing with 130 addition and 461 deletion
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @ 8f053bcd
......@@ -101,7 +101,6 @@
- [ColumnSplit](ts-container-columnsplit.md)
- [Counter](ts-container-counter.md)
- [Flex](ts-container-flex.md)
- [FlowItem](ts-container-flowitem.md)
- [GridCol](ts-container-gridcol.md)
- [GridRow](ts-container-gridrow.md)
- [Grid](ts-container-grid.md)
......@@ -121,7 +120,6 @@
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- [WaterFlow](ts-container-waterflow.md)
- 媒体组件
- [Video](ts-media-components-video.md)
- 绘制组件
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 8f053bcd
......@@ -70,38 +70,19 @@ struct ImageAnimatorExample {
ImageAnimator()
.images([
{
src: $r('app.media.img1'),
duration: 500,
width: 170,
height: 120,
top: 0,
left: 0
src: $r('app.media.img1')
},
{
src: $r('app.media.img2'),
duration: 500,
width: 170,
height: 120,
top: 0,
left: 170
src: $r('app.media.img2')
},
{
src: $r('app.media.img3'),
duration: 500,
width: 170,
height: 120,
top: 120,
left: 170
src: $r('app.media.img3')
},
{
src: $r('app.media.img4'),
duration: 500,
width: 170,
height: 120,
top: 120,
left: 0
src: $r('app.media.img4')
}
])
.duration(2000)
.state(this.state).reverse(this.reverse).fixedSize(false)
.fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
.margin({ top: 100 })
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 8f053bcd
......@@ -41,4 +41,4 @@ struct LoadingProgressExample {
}
```
![zh-cn_image_000000111864201](figures/zh-cn_image_000000111864201.gif)
![loadProgress](figures/loadProgress.jpeg)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md
浏览文件 @ 8f053bcd
......@@ -20,3 +20,61 @@ NavRouter()
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onStateChange(callback: (isActivated: boolean) => void) | 组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。</br> **说明：** 用户点击NavRouter，激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)；NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。 |
## 示例
```ts
// xxx.ets
@Entry
@Component
struct NavRouterExample {
private arr: number[] = [0, 1, 2, 3]
@State isActive: boolean = false
@State dex: number = 0
build() {
Column() {
Navigation() {
List({ space: 12, initialIndex: 0 }) {
ForEach(this.arr, (item: number, index: number) => {
ListItem() {
NavRouter() {
Row() {
Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
Text(`NavRouter${item + 1}`)
.fontSize(22)
.fontWeight(500)
.textAlign(TextAlign.Center)
}
.width(180)
.height(72)
.backgroundColor(this.dex === index ? '#ccc' : '#fff')
.borderRadius(24)
NavDestination() {
Text(`我是NavDestination第${item + 1}页内容`).fontSize(50)
Flex({ direction: FlexDirection.Row }) {
Row() {
Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
Text('今天共有七节课').fontSize(30)
}.padding({ left: 15 })
}
}.backgroundColor('#ccc')
.title(`NavDestination${item + 1}`)
}.onStateChange((isActivated: boolean) => {
this.dex = index
})
}
}, item => item)
}
.height('100%')
.margin({ top: 12, left: 12 })
}
.mode(NavigationMode.Split)
.hideTitleBar(true)
.hideToolBar(true)
}.height('100%')
}
}
```
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ 8f053bcd
......@@ -122,7 +122,6 @@ struct StepperExample {
.itemTextStyle()
}.itemStyle()
}
.nextLabel('Finish')
}
.backgroundColor('#F1F3F5')
.onFinish(() => {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 8f053bcd
......@@ -93,7 +93,7 @@ struct FlexExample1 {
}
```
![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif)
![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.PNG)
```ts
// xxx.ets
......@@ -139,7 +139,7 @@ struct FlexExample2 {
}
```
![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png)
![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.PNG)
```ts
// xxx.ets
......@@ -188,7 +188,7 @@ struct FlexExample3 {
}
```
![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif)
![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.PNG)
```ts
// xxx.ets
......@@ -286,4 +286,4 @@ struct FlexExample5 {
}
```
![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.gif)
![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.PNG)
zh-cn/application-dev/reference/arkui-ts/ts-container-flowitem.md 已删除 100644 → 0
浏览文件 @ 809e7120
# FlowItem
[瀑布流组件](ts-container-waterflow.md)的子组件，用来展示瀑布流具体item。
> **说明：**
>
> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件
支持单个子组件。
## 接口
FlowItem()
使用该接口来创建瀑布流子组件。
## 属性
无
## 示例
详见[瀑布流组件示例](ts-container-waterflow.md#示例)。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md 已删除 100644 → 0
浏览文件 @ 809e7120
# WaterFlow
瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。
> **说明：**
>
> 该组件从API Version 9 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件
包含[FlowItem](ts-container-flowitem.md)子组件。
## 接口
WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ----------------------------------------------- | ------ | -------------------------------------------- |
| footer | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置WaterFlow尾部组件。 |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器，与可滚动组件绑定。<br/>目前瀑布流仅支持Scroller组件的scrollToIndex接口。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| columnsTemplate | string | 设置当前瀑布流组件布局列的数量，不设置时默认1列。<br/>例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。并支持[auto-fill](#auto-fill说明)。<br>默认值：'1fr' |
| rowsTemplate | string | 设置当前瀑布流组件布局行的数量，不设置时默认1行。<br/>例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。并支持[auto-fill](#auto-fill说明)。<br/>默认值：'1fr' |
| itemConstraintSize | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 设置约束尺寸，子组件布局时，进行尺寸范围限制。 |
| columnsGap | Length |设置列与列的间距。 <br>默认值：0|
| rowsGap | Length |设置行与行的间距。<br> 默认值：0|
| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。<br/>默认值：FlexDirection.Column|
layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况，分为以下三种设置模式:
- layoutDirection设置纵向布局（FlexDirection.Column 或 FlexDirection.ColumnReverse）
此时columnsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。
- layoutDirection设置横向布局（FlexDirection.Row 或 FlexDirection.RowReverse）
此时rowsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件横向布局，辅轴均分成纵向3列。
- layoutDirection未设置布局方向
布局方向为layoutDirection的默认值：FlexDirection.Column，此时columnsTemplate有效。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。
## 事件
除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
| 名称 | 功能描述 |
| -------- | -------- |
| onReachStart(event: () => void) | 瀑布流组件到达起始位置时触发。 |
| onReachEnd(event: () => void) | 瀑布流组件到底末尾位置时触发。 |
## auto-fill说明
WaterFlow的columnsTemplate、rowsTemplate属性的auto-fill仅支持以下格式：
```css
repeat(auto-fill, track-size)
```
其中repeat、auto-fill为关键字。track-size为行高或者列宽，支持的单位包括px、vp、%或有效数字，track-size至少包括一个有效行高或者列宽。
## 示例
```ts
// WaterFlowDataSource.ets
// 实现IDataSource接口的对象，用于瀑布流组件加载数据
export class WaterFlowDataSource implements IDataSource {
private dataArray: number[] = []
private listeners: DataChangeListener[] = []
constructor() {
for (let i = 0; i < 100; i++) {
this.dataArray.push(i)
}
}
// 获取索引对应的数据
public getData(index: number): any {
return this.dataArray[index]
}
// 通知控制器数据重新加载
notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded()
})
}
// 通知控制器数据增加
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdded(index)
})
}
// 通知控制器数据变化
notifyDataChange(index: number): void {
this.listeners.forEach(listener => {
listener.onDataChanged(index)
})
}
// 通知控制器数据删除
notifyDataDelete(index: number): void {
this.listeners.forEach(listener => {
listener.onDataDeleted(index)
})
}
// 通知控制器数据位置变化
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => {
listener.onDataMoved(from, to)
})
}
// 获取数据总数
public totalCount(): number {
return this.dataArray.length
}
// 注册改变数据的控制器
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}
// 注销改变数据的控制器
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener)
if (pos >= 0) {
this.listeners.splice(pos, 1)
}
}
// 增加数据
public Add1stItem(): void {
this.dataArray.splice(0, 0, this.dataArray.length)
this.notifyDataAdd(0)
}
// 在数据尾部增加一个元素
public AddLastItem(): void {
this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
this.notifyDataAdd(this.dataArray.length-1)
}
// 在指定索引位置增加一个元素
public AddItem(index: number): void {
this.dataArray.splice(index, 0, this.dataArray.length)
this.notifyDataAdd(index)
}
// 删除第一个元素
public Delete1stItem(): void {
this.dataArray.splice(0, 1)
this.notifyDataDelete(0)
}
// 删除第二个元素
public Delete2ndItem(): void {
this.dataArray.splice(1, 1)
this.notifyDataDelete(1)
}
// 删除最后一个元素
public DeleteLastItem(): void {
this.dataArray.splice(-1, 1)
this.notifyDataDelete(this.dataArray.length)
}
// 重新加载数据
public Reload(): void {
this.dataArray.splice(1, 1)
this.dataArray.splice(3, 2)
this.notifyDataReload()
}
}
```
```ts
// WaterflowDemo.ets
import { WaterFlowDataSource } from './WaterFlowDataSource'
@Entry
@Component
struct WaterflowDemo {
@State minSize: number = 50
@State maxSize: number = 100
@State fontSize: number = 24
@State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
scroller: Scroller = new Scroller()
datasource: WaterFlowDataSource = new WaterFlowDataSource()
private itemWidthArray: number[] = []
private itemHeightArray: number[] = []
// 计算flow item宽/高
getSize() {
let ret = Math.floor(Math.random() * this.maxSize)
return (ret > this.minSize ? ret : this.minSize)
}
// 保存flow item宽/高
getItemSizeArray() {
for (let i = 0; i < 100; i++) {
this.itemWidthArray.push(this.getSize())
this.itemHeightArray.push(this.getSize())
}
}
aboutToAppear() {
this.getItemSizeArray()
}
@Builder itemFoot() {
Column() {
Text(`Footer`)
.fontSize(10)
.backgroundColor(Color.Red)
.width(50)
.height(50)
.align(Alignment.Center)
.margin({ top: 2 })
}
}
build() {
Column({ space: 2 }) {
WaterFlow({ footer: this.itemFoot, scroller: this.scroller }) {
LazyForEach(this.datasource, (item: number) => {
FlowItem() {
Column() {
Text("N" + item).fontSize(12).height('16')
Image('res/waterFlowTest(' + item % 5 + ').jpg')
.objectFit(ImageFit.Fill)
}
}
.width(this.itemWidthArray[item])
.height(this.itemHeightArray[item])
.backgroundColor(this.colors[item % 5])
}, item => item)
}
.columnsTemplate("1fr 1fr 1fr 1fr")
.itemConstraintSize({
minWidth: 0,
maxWidth: '100%',
minHeight: 0,
maxHeight: '100%'
})
.columnsGap(10)
.rowsGap(5)
.onReachStart(() => {
console.info("onReachStart")
})
.onReachEnd(() => {
console.info("onReachEnd")
})
.backgroundColor(0xFAEEE0)
.width('100%')
.height('80%')
.layoutDirection(FlexDirection.Column)
}
}
}
```
![zh-cn_image_WaterFlow.gif](figures/waterflow.gif)
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 8f053bcd
......@@ -74,9 +74,8 @@ struct PathExample {
.width('90%')
// 绘制一条长900px，宽3vp的直线
Path()
.width(300)
.height(10)
.commands('M0 0 L900 0')
.commands('M0 0 L600 0')
.stroke(Color.Black)
.strokeWidth(3)
......@@ -85,55 +84,43 @@ struct PathExample {
.fontColor(0xCCCCCC)
.width('90%')
// 绘制直线图形
Row({ space: 20 }) {
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Path()
.width(100)
.height(100)
.commands('M150 0 L300 300 L0 300 Z')
.commands('M100 0 L200 240 L0 240 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 0 H300 V300 H0 Z')
.commands('M0 0 H200 V200 H0 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
.commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
}.width('100%')
}.width('95%')
Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
// 绘制弧线图形
Row({ space: 20 }) {
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Path()
.width(100)
.height(100)
.commands("M0 300 S150 0 300 300 Z")
.commands("M0 300 S100 0 240 300 Z")
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
.commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 200 A30 20 20 0 0 250 200 Z')
.commands('M0 100 A30 20 20 0 0 200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
}
}.width('95%')
}.width('100%')
.margin({ top: 5 })
}
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
浏览文件 @ 8f053bcd
......@@ -24,9 +24,9 @@ struct Index {
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Test ContextMenu1')
Divider().strokeWidth(2).margin(5)
Divider().strokeWidth(2).margin(5).color(Color.Black)
Button('Test ContextMenu2')
Divider().strokeWidth(2).margin(5)
Divider().strokeWidth(2).margin(5).color(Color.Black)
Button('Test ContextMenu3')
}
.width(200)
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ 8f053bcd
......@@ -36,46 +36,6 @@
## 示例
```ts
// xxx.ets
@Entry
@Component
struct Index {
@State outSetValue: number = 40
build() {
Row() {
Column() {
Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
.borderImage({
source: $r('app.media.heart'),
slice: `${this.outSetValue}%`,
width: `${this.outSetValue}px`,
outset: '5px',
repeat: RepeatMode.Repeat,
fill: false
})
Slider({
value: this.outSetValue,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.margin({ top: 30 })
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValue = value
console.info('value:' + value + 'mode:' + mode.toString())
})
}
.width('100%')
}
.height('100%')
}
}
```
![zh-cn_image_borderImage](figures/borderImage.gif)
```ts
// xxx.ets
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
浏览文件 @ 8f053bcd
......@@ -55,6 +55,7 @@ struct AspectRatioExample {
Text(item)
.backgroundColor(0xbbb2cb)
.fontSize(40)
.height(160)
.aspectRatio(1.5)
}
}, item => item)
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
浏览文件 @ 8f053bcd
......@@ -30,30 +30,24 @@ struct TextStyleExample {
build() {
Column({ space: 5 }) {
Text('default text')
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)
.fontSize(20)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Bold)
Divider()
Text('Orange 18 Normal text')
.fontColor(Color.Orange)
......@@ -64,4 +58,4 @@ struct TextStyleExample {
}
```
![textstyle](figures/textstyle.png)
![textstyle](figures/textstyle.PNG)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
浏览文件 @ 8f053bcd
......@@ -31,13 +31,13 @@ struct TransformExample {
Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
Row()
.rotate({
x: 1,
y: 1,
x: 0,
y: 0,
z: 1,
centerX: '50%',
centerY: '50%',
angle: 300
}) // 组件以矢量(1,1,1)为旋转轴，绕中心点顺时针旋转300度
}) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
.width(100).height(100).backgroundColor(0xAFEEEE)
Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)
......
zh-cn/application-dev/ui/ui-ts-animation-feature.md
浏览文件 @ 8f053bcd
......@@ -170,9 +170,11 @@
Path()
.commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
.fill(Color.White)
.stroke(Color.Transparent)
Path()
.commands(this.pathCommands1)
.fill('none')
.stroke(Color.Transparent)
.linearGradient(
{
angle: 30,
......@@ -183,6 +185,7 @@
Path()
.commands(this.pathCommands2)
.fill('none')
.stroke(Color.Transparent)
.linearGradient(
{
angle: 50,
......@@ -227,10 +230,10 @@
angle: 180,
colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
})
}
}
}
```
![animation-feature](figures/animation-feature.gif)
## 页面转场动画
......
zh-cn/application-dev/ui/ui-ts-drawing-feature.md
浏览文件 @ 8f053bcd
......@@ -217,10 +217,11 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
![drawing-feature4](figures/drawing-feature4.png)
填充颜色为白色。
填充颜色为白色，线条颜色为透明。
```ts
.fill(Color.White)
.stroke(Color.Transparent)
```
```ts
......@@ -233,6 +234,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
Path()
.commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
.fill(Color.White)
.stroke(Color.Transparent)
}
.height('630px')
.width('630px')
......@@ -256,6 +258,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
Path()
.commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z')
.fill('none')
.stroke(Corlor.Transparent)
.linearGradient(
{
angle: 30,
......@@ -276,6 +279,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
Path()
.commands(this.pathCommands1)
.fill('none')
.stroke(Color.Transparent)
.linearGradient(
{
angle: 30,
......@@ -303,10 +307,12 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
Path()
.commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
.fill(Color.White)
.stroke(Color.Transparent)
Path()
.commands(this.pathCommands1)
.fill('none')
.stroke(Color.Transparent)
.linearGradient(
{
angle: 30,
......@@ -317,6 +323,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
Path()
.commands(this.pathCommands2)
.fill('none')
.stroke(Color.Transparent)
.linearGradient(
{
angle: 50,
......@@ -348,33 +355,37 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
@Entry
@Component
struct Logo {
private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
private pathCommands1: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
private pathCommands2: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Shape() {
Path()
.commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
.fill(Color.White)
.stroke(Color.Transparent)
Path()
.commands(this.pathCommands1)
.fill('none')
.stroke(Color.Transparent)
.linearGradient(
{
angle: 30,
colors: [["#C4FFA0", 0], ["#ffffff", 1]]
})
{
angle: 30,
colors: [["#C4FFA0", 0], ["#ffffff", 1]]
})
.clip(new Path().commands(this.pathCommands1))
Path()
.commands(this.pathCommands2)
.fill('none')
.stroke(Color.Transparent)
.linearGradient(
{
angle: 50,
colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]]
})
{
angle: 50,
colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]]
})
.clip(new Path().commands(this.pathCommands2))
}
.height('630px')
......@@ -383,22 +394,22 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
Text('Healthy Diet')
.fontSize(26)
.fontColor(Color.White)
.margin({ top:300 })
.margin({ top: 300 })
Text('Healthy life comes from a balanced diet')
.fontSize(17)
.fontColor(Color.White)
.margin({ top:4 })
.margin({ top: 4 })
}
.width('100%')
.height('100%')
.linearGradient(
{
angle: 180,
colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
})
colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
})
}
}
```
![drawing-feature8](figures/drawing-feature8.png)
\ No newline at end of file
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 8f053bcd
......@@ -38,7 +38,7 @@
.padding(10)
.backgroundColor(0xAFEEEE)
```
![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png)
![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.PNG)
- FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。
......@@ -54,7 +54,7 @@
.backgroundColor(0xAFEEEE)
```
![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png)
![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.PNG)
- FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
......@@ -70,7 +70,7 @@
.backgroundColor(0xAFEEEE)
```
![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png)
![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.PNG)
- FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。
......@@ -86,7 +86,7 @@
.backgroundColor(0xAFEEEE)
```
![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.png)
![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.PNG)
### 弹性布局换行
......@@ -105,7 +105,7 @@
.backgroundColor(0xAFEEEE)
```
![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png)
![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.PNG)
- FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。
......@@ -120,7 +120,7 @@
.backgroundColor(0xAFEEEE)
```
![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png)
![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.PNG)
- FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。
......@@ -135,7 +135,7 @@
.backgroundColor(0xAFEEEE)
```
![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.png)
![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.PNG)
### 弹性布局对齐方式
......@@ -356,7 +356,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
}.width('90%').height(220).backgroundColor(0xAFEEEE)
```
![](figures/alignself.png)
![alignself](figures/alignself.png)
上例中，Flex容器中alignItems设置交叉轴子组件的对齐方式为居中，子组件自身设置了alignSelf属性的情况，覆盖父组件的alignItem值，表现为alignSelf的定义。
......@@ -496,7 +496,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
```
![](figures/flexbasis.png)
![flexbasis](figures/flexbasis.png)
- flexGrow: 设置父容器的剩余空间分配给此属性所在组件的比例。用于"瓜分"父组件的剩余空间。
......@@ -508,7 +508,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
.height(100)
.backgroundColor(0xF5DEB3)
Text('flexGrow(3)')
Text('flexGrow(2)')
.flexGrow(2)
.width(100)
.height(100)
......@@ -521,7 +521,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
```
![](figures/flexgrow.png)
![flexgrow](figures/flexgrow.png)
上图中，父容器宽度400vp, 三个子组件原始宽度为100vp，综合300vp，剩余空间100vp根据flexGrow值的占比分配给子组件，未设置flexGrow的子组件不参与“瓜分”。
第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp*2/5=140vp，第二个元素为100vp+100vp*3/5=160vp。
......@@ -549,7 +549,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
```
![](figures/flexshrink.png)
![flexshrink](figures/flexshrink.png)
## 场景示例
......@@ -584,4 +584,3 @@ struct FlexExample {
- [弹性布局（ArkTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts)
- [ArkUI常用布局容器对齐方式（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/LayoutAlignmentDemo)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或