Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
1 年多 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts
提交 24502167 编写于 作者: W wangchao582
浏览文件
操作

!9232 Add ace_ets_component_common_attrs test part2 

Signed-off-by: Nwangchao582 <wangchao582@huawei.com>
上级 fa37cb60
展开全部 隐藏空白更改
内联 并排
Showing with 19710 addition and 20 deletion
arkui/ace_ets_component_common_attrs/Test.json
浏览文件 @ 24502167
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
"description": "Configuration for aceEtsComponentCommonAttrs Tests", "description": "Configuration for aceEtsComponentCommonAttrs Tests",
"driver": { "driver": {
"type": "OHJSUnitTest", "type": "OHJSUnitTest",
"test-timeout": "180000", "test-timeout": "18000000",
"bundle-name": "com.acts.arkui.component.common.attrs.test", "bundle-name": "com.acts.arkui.component.common.attrs.test",
"module-name": "phone", "module-name": "phone",
"shell-timeout": "600000", "shell-timeout": "60000000",
"testcase-timeout": 60000 "testcase-timeout": 6000000
}, },
"kits": [{ "kits": [{
"test-file-name": [ "test-file-name": [
......
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/Utils.ets
浏览文件 @ 24502167
...@@ -87,6 +87,11 @@ export default class Utils { ...@@ -87,6 +87,11 @@ export default class Utils {
router.clear(); router.clear();
} }
static async backOnly() {
router.back()
await Utils.sleep(1000);
}
static getComponentRect(key) { static getComponentRect(key) {
let strJson = getInspectorByKey(key); let strJson = getInspectorByKey(key);
let obj = JSON.parse(strJson); let obj = JSON.parse(strJson);
...@@ -121,8 +126,164 @@ export default class Utils { ...@@ -121,8 +126,164 @@ export default class Utils {
static getRectVerticalCenterY(rect) { static getRectVerticalCenterY(rect) {
(rect.bottom - rect.top) / 2 + rect.top; (rect.bottom - rect.top) / 2 + rect.top;
} }
}
static requestFocus(id): boolean {
console.info('requestFocus id : ' + id);
let result = focusControl.requestFocus(id);
console.info('requestFocus result : ' + result);
return result;
}
static performClick(id: string): boolean {
console.info('performClick id : ' + id);
let result = sendEventByKey(id, 10, '');
console.info('performClick result : ' + result);
return result
}
static async performClickPoint(x: number, y: number) {
Utils.performTouch(x, y, x, y, TouchType.Down);
await Utils.sleep(100);
Utils.performTouch(x, y, x, y, TouchType.Up);
}
static performTouchDownUp(id): boolean {
let down = Utils.performTouchComponentCenter(id, TouchType.Down)
if (down) {
let up = Utils.performTouchComponentCenter(id, TouchType.Up)
return up
}
return false;
}
static performTouchComponentCenter(id, type: TouchType): boolean {
console.info('performTouchComponent id : ' + id);
return Utils.performTouchRectCenter(0, 0, Utils.getComponentRect(id), type);
}
static performTouchRectCenter(rootX, rootY, rect, type: TouchType): boolean {
console.info('performTouchRectCenter parentX : ' + rootX);
console.info('performTouchRectCenter parentY : ' + rootY);
console.info('performTouchRectCenter rect.left : ' + rect.left);
console.info('performTouchRectCenter rect.top : ' + rect.top);
console.info('performTouchRectCenter rect.right : ' + rect.right);
console.info('performTouchRectCenter rect.bottom : ' + rect.bottom);
let screenX = (rect.right + rect.left) * 0.5;
let screenY = (rect.bottom + rect.top) * 0.5;
let x = (rect.right + rect.left) * 0.5 - rootX;
let y = (rect.bottom + rect.top) * 0.5 - rootY;
return Utils.performTouch(screenX, screenY, x, y, type);
}
static performTouch(screenX, screenY, x, y, type: TouchType): boolean {
console.info('performTouch type : ' + type);
console.info('performTouch screenX : ' + screenX);
console.info('performTouch screenY : ' + screenY);
console.info('performTouch x : ' + x);
console.info('performTouch y : ' + y);
let result = sendTouchEvent({
windowX: screenX,
windowY: screenX,
displayX: screenX,
displayY: screenX,
type: type,
id: 0,
screenX: screenX,
screenY: screenX,
x: x,
y: y
})
console.info('performTouch result : ' + result);
return result;
}
static performKeyEventDownUp(keyCode: number, keyText: string): boolean {
let down = Utils.performKeyEvent(KeyType.Down, keyCode, keyText)
if (down) {
let up = Utils.performKeyEvent(KeyType.Up, keyCode, keyText)
return up
}
return false;
}
static performKeyEvent(type: KeyType, keyCode: number, keyText: string): boolean {
console.info('performKeyEvent type : ' + type);
console.info('performKeyEvent keyCode : ' + keyCode);
console.info('performKeyEvent keyText : ' + keyText);
let result = sendKeyEvent({
type: type,
keyCode: keyCode,
keyText: keyText,
intentionCode: -1,
keySource: 1,
deviceId: 0,
metaKey: 0,
timestamp: new Date().getTime()
})
console.info('performKeyEvent result : ' + result);
return result
}
static performMouseEvent(id, button: MouseButton, action: MouseAction): boolean {
console.info('performMouseEvent id : ' + id);
console.info('performMouseEvent button : ' + button);
console.info('performMouseEvent action : ' + action);
let targetComponentRect = Utils.getComponentRect(id);
let screenX = (targetComponentRect.right + targetComponentRect.left) * 0.5;
let screenY = (targetComponentRect.bottom + targetComponentRect.top) * 0.5;
let x = (targetComponentRect.right + targetComponentRect.left) * 0.5;
let y = (targetComponentRect.bottom + targetComponentRect.top) * 0.5;
let width = targetComponentRect.right - targetComponentRect.left;
let height = targetComponentRect.bottom - targetComponentRect.top;
console.info('performMouseEvent screenX : ' + screenX);
console.info('performMouseEvent screenY : ' + screenY);
console.info('performMouseEvent x : ' + x);
console.info('performMouseEvent y : ' + y);
console.info('performMouseEvent width : ' + y);
console.info('performMouseEvent height : ' + y);
let result = sendMouseEvent({
windowX: screenX,
windowY: screenX,
displayX: screenX,
displayY: screenX,
screenX: screenX,
screenY: screenX,
x: x,
y: y,
button: button,
action: action,
timestamp: new Date().getTime(),
target: {
area: {
width: width,
height: height,
position: {
x: 0, y: 0
},
globalPosition: {
x: 0, y: 0
},
}
},
source: SourceType.Mouse,
tiltX: 0,
tiltY: 0,
sourceTool: 1,
pressure: 0
})
console.info('performMouseEvent result : ' + result);
return result;
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/alignRules/AlignRulesPage.ets
浏览文件 @ 24502167
...@@ -38,7 +38,7 @@ struct AlignRules { ...@@ -38,7 +38,7 @@ struct AlignRules {
router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
onPageShow() { onPageShow() {
console.info('[ButtonDimensionsOne] page show called ') console.info('[AlignRules] page show called ')
//Register data change call back. //Register data change call back.
attrsManager.registerDataChange(value => this._alignRules = value) attrsManager.registerDataChange(value => this._alignRules = value)
......
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioHeightPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import AttrsManager from '../../common/AttrsManager';
import router from '@ohos.router';
@Entry
@Component
struct AspectRatioHeightPage {
@State _aspectRatio: number = 1.0
@State _height: number = 50
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer
private scroller: Scroller = new Scroller()
private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker
private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode
onPageShow() {
console.info('AspectRatioHeightPage page show called ')
AttrsManager.registerDataChange(value => {
this._aspectRatio = value.aspectRatio
this._height = value.height
})
}
/*
* Set common style.
*/
@Styles commonStyle(){
.aspectRatio(this._aspectRatio)
.height(this._height)
.key(this.componentKey)
}
//Draw screen
build() {
Row() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Blank') {
Blank()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Button') {
Button('button').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25] })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Divider') {
Divider()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 })
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon'))
.commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator()
.images([{ src: $r('app.media.icon') }])
.commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress()
.color(Color.Blue)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({
start: true,
src: this.src
})
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'MenuItem') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'MenuItemGroup') {
Menu() {
MenuItemGroup({ header: 'MenuItemGroup' }) {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
}.commonStyle()
}
} else if (this.targetView == 'Navigation') {
Navigation()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter().backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 20 })
.border({ width: 2 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode(this.src)
.border({ width: 2 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Rating') {
Rating()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: this.scroller, state: BarState.On }) {
Text('text')
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Search') {
Search()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }])
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Slider') {
Slider()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem()
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'StepperItem') {
Stepper() {
StepperItem().backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'Text') {
Text('text')
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock()
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: this.value })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ controller: this.textTimerController })
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
count: 50,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
Button('message').backgroundColor(0x317aff)
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Column') {
Column()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Counter') {
Counter()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Flex') {
Flex()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'FlowItem') {
WaterFlow() {
FlowItem().backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'GridRow') {
GridRow()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'GridCol') {
GridRow() {
GridCol() {
Text('GridCol')
}.backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'Grid') {
Grid() {
GridItem() {
Text('Grid').backgroundColor(Color.White)
}
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'GridItem') {
Grid() {
GridItem().backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'List') {
List()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ListItem') {
List() {
ListItem()
.backgroundColor(Color.Pink)
.commonStyle()
}
} else if (this.targetView == 'Navigator') {
Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true)
.backgroundMask(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: false })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(50)
.backgroundColor('#FF3333')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id('AspectRatioHeight')
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Row') {
Row()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('Text')
}.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
Text('Scroll' + item.toString())
.width('90%')
.height(150)
.backgroundColor(Color.White)
.textAlign(TextAlign.Center)
}, item => item)
}.width('100%')
}.scrollBar(BarState.On).commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach([1, 2, 3], (item) => {
Column({ space: 5 }) {
Image($r('app.media.icon')).width(50).height(50)
Text('Index0' + item).fontSize(25)
}
})
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.backgroundColor(Color.Green)
Column() {
Text('SideBarContainer content').fontSize(25)
}.backgroundColor(Color.Orange)
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item)
}, item => item)
}
.indicator(true)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Circle') {
Circle()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Line') {
Line()
.backgroundColor(Color.Pink)
.startPoint([0, 0])
.endPoint([50, 100])
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline()
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M100 0 L200 240 L0 240 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect()
.fillOpacity(0)
.stroke(Color.Red)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape()
.backgroundColor(Color.Pink)
.commonStyle()
}
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioWidthPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import AttrsManager from '../../common/AttrsManager';
import router from '@ohos.router';
@Entry
@Component
struct AspectRatioWidthPage {
@State _aspectRatio: number = 1.0
@State _width: number = 50
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer
private scroller: Scroller = new Scroller()
private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker
private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode
onPageShow() {
console.info('AspectRatioWidthPage page show called ')
AttrsManager.registerDataChange(value => {
this._aspectRatio = value.aspectRatio
this._width = value.width
})
}
/*
* Set common style.
*/
@Styles commonStyle(){
.aspectRatio(this._aspectRatio)
.width(this._width)
.key(this.componentKey)
}
//Draw screen
build() {
Row() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Blank') {
Blank()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Button') {
Button('button').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25] })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Divider') {
Divider()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 })
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon'))
.commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator()
.images([{ src: $r('app.media.icon') }])
.commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress()
.color(Color.Blue)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({
start: true,
src: this.src
})
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'MenuItem') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'MenuItemGroup') {
Menu() {
MenuItemGroup({ header: 'MenuItemGroup' }) {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
}.commonStyle()
}
} else if (this.targetView == 'Navigation') {
Navigation()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter().backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 20 })
.border({ width: 2 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode(this.src)
.border({ width: 2 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Rating') {
Rating()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: this.scroller, state: BarState.On }) {
Text('text')
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Search') {
Search()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }])
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Slider') {
Slider()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem()
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'StepperItem') {
Stepper() {
StepperItem().backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'Text') {
Text('text')
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock()
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: this.value })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ controller: this.textTimerController })
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
count: 50,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
Button('message').backgroundColor(0x317aff)
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Column') {
Column()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Counter') {
Counter()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Flex') {
Flex()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'FlowItem') {
WaterFlow() {
FlowItem().backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'GridRow') {
GridRow()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'GridCol') {
GridRow() {
GridCol() {
Text('GridCol')
}.backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'Grid') {
Grid() {
GridItem() {
Text('Grid').backgroundColor(Color.White)
}
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'GridItem') {
Grid() {
GridItem().backgroundColor(Color.Pink).commonStyle()
}
} else if (this.targetView == 'List') {
List()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ListItem') {
List() {
ListItem()
.backgroundColor(Color.Pink)
.commonStyle()
}
} else if (this.targetView == 'Navigator') {
Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true)
.backgroundMask(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: false })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(50)
.backgroundColor('#FF3333')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id('AspectRatioWidth')
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Row') {
Row()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('Text')
}.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
Text('Scroll' + item.toString())
.width('90%')
.height(150)
.backgroundColor(Color.White)
.textAlign(TextAlign.Center)
}, item => item)
}.width('100%')
}.scrollBar(BarState.On).commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach([1, 2, 3], (item) => {
Column({ space: 5 }) {
Image($r('app.media.icon')).width(50).height(50)
Text('Index0' + item).fontSize(25)
}
})
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.backgroundColor(Color.Green)
Column() {
Text('SideBarContainer content').fontSize(25)
}.backgroundColor(Color.Orange)
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item)
}, item => item)
}
.indicator(true)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Circle') {
Circle()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Line') {
Line()
.backgroundColor(Color.Pink)
.startPoint([0, 0])
.endPoint([50, 100])
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline()
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M100 0 L200 240 L0 240 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect()
.fillOpacity(0)
.stroke(Color.Red)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape()
.backgroundColor(Color.Pink)
.commonStyle()
}
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexByGridRowPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
@Entry
@Component
struct DefaultByGridRowPage {
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
onPageShow() {
console.info('DefaultByGridRowPage show called ')
}
/*
* Set common style.
*/
@Styles commonStyle(){
.key(this.componentKey)
}
//Draw screen
build() {
GridRow() {
if (this.targetView == 'GridCol') {
GridCol().commonStyle()
}
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
@Entry
@Component
struct DefaultFlexPage {
@State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker
private Marquee_src: string = 'Running Marquee starts rolling A B C D E F G H I J K L'; //Use by Marquee QRCode
textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer
private scroller: Scroller = new Scroller() //Use by ScrollBar Scroll
onPageShow() {
console.info('DefaultFlexPage show called ')
}
/*
* Set common style.
*/
@Styles commonStyle(){
.key(this.componentKey)
}
@Builder buildTargetView() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle()
} else if (this.targetView == 'Blank') {
Blank().commonStyle()
} else if (this.targetView == 'Button') {
Button('button').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox().commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup().commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25] }).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker().commonStyle()
} else if (this.targetView == 'Divider') {
Divider().commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 }).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator()
.images([{ src: $r('app.media.icon') }])
.commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress().commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({
start: true,
src: this.Marquee_src
}).commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation().commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter().commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 20 }).commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode(this.Marquee_src).commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating().commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: this.scroller }).commonStyle()
} else if (this.targetView == 'Search') {
Search().commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]).commonStyle()
} else if (this.targetView == 'Slider') {
Slider().commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem()
}.commonStyle()
} else if (this.targetView == 'Text') {
Text('text').commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea().commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock().commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput().commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: this.value }).commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ controller: this.textTimerController }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: '#FA2A2D' }
}).commonStyle()
} else if (this.targetView == 'Column') {
Column().commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'Counter') {
Counter().commonStyle()
} else if (this.targetView == 'Flex') {
Flex().commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow().commonStyle()
} else if (this.targetView == 'Grid') {
Grid().commonStyle()
} else if (this.targetView == 'List') {
List().commonStyle().width(100).height(100)
} else if (this.targetView == 'Navigator') {
Navigator({ target: '' }).commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true).commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: false }).commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer().commonStyle()
} else if (this.targetView == 'Row') {
Row().commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1')
Text('2')
}.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll(this.scroller).commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed).commonStyle()
} else if (this.targetView == 'Stack') {
Stack().commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper().commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs().commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow().commonStyle()
} else if (this.targetView == 'Circle') {
Circle().commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse().commonStyle()
} else if (this.targetView == 'Line') {
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline().commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon().commonStyle()
} else if (this.targetView == 'Path') {
Path().commonStyle()
} else if (this.targetView == 'Rect') {
Rect().commonStyle()
} else if (this.targetView == 'Shape') {
Shape().commonStyle()
}
}
//Draw screen
build() {
if (this.containerView == 'Row') {
Row() {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
} else if (this.containerView == 'Column') {
Column() {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRow') {
Flex({ direction: FlexDirection.Row }) {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRowReverse') {
Flex({ direction: FlexDirection.RowReverse }) {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumn') {
Flex({ direction: FlexDirection.Column }) {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumnReverse') {
Flex({ direction: FlexDirection.ColumnReverse }) {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
}
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFocusValuePage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
@Entry
@Component
struct DefaultFocusValuePage {
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker
controller: WebController = new WebController() //Use by Web
textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer
private scroller: Scroller = new Scroller() //Use by Scroll
onPageShow() {
console.info('DefaultFocusValuePage show called ')
}
/*
* Set common style.
*/
@Styles commonStyle(){
.key(this.componentKey)
}
//Draw screen
build() {
Row() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle()
} else if (this.targetView == 'Button') {
Button('button').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox().commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup().commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker().commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator()
.images([{ src: $r('app.media.icon') }])
.commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.commonStyle()
} else if (this.targetView == 'MenuItem') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle()
}
} else if (this.targetView == 'MenuItemGroup') {
Menu() {
MenuItemGroup({ header: 'MenuItemGroup' }) {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
}.commonStyle()
}
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating().commonStyle()
} else if (this.targetView == 'Search') {
Search().commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]).commonStyle()
} else if (this.targetView == 'Slider') {
Slider().commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem()
}.commonStyle()
} else if (this.targetView == 'StepperItem') {
Stepper() {
StepperItem().commonStyle()
}
} else if (this.targetView == 'Text') {
Text('text').commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea().commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput().commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: this.value }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Web') {
Web({ src: 'www.example.com', controller: this.controller }).commonStyle()
} else if (this.targetView == 'Column') {
Column().commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'Counter') {
Counter().commonStyle()
} else if (this.targetView == 'Flex') {
Flex().commonStyle()
} else if (this.targetView == 'GridCol') {
GridRow() {
GridCol().commonStyle()
}
} else if (this.targetView == 'GridRow') {
GridRow().commonStyle()
} else if (this.targetView == 'Grid') {
Grid().commonStyle()
} else if (this.targetView == 'GridItem') {
Grid() {
GridItem().commonStyle()
}
} else if (this.targetView == 'List') {
List().commonStyle().width(100).height(100)
} else if (this.targetView == 'ListItem') {
List() {
ListItem() {
Text('ListItem')
}
.commonStyle()
}.width(100).height(100)
} else if (this.targetView == 'ListItemGroup') {
List() {
ListItemGroup()
.commonStyle()
}.width(100).height(100)
} else if (this.targetView == 'Row') {
Row().commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1')
Text('2')
}.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll(this.scroller).commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed).commonStyle()
} else if (this.targetView == 'Stack') {
Stack().commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item)
}, item => item)
}
.indicator(true)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs().commonStyle()
} else if (this.targetView == 'TabContent') {
Tabs() {
TabContent().commonStyle()
}
}
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultPage.ets
浏览文件 @ 24502167
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
* limitations under the License. * limitations under the License.
*/ */
import router from '@ohos.router' import router from '@ohos.router';
@Entry @Entry
@Component @Component
...@@ -182,7 +182,7 @@ struct DefaultPage { ...@@ -182,7 +182,7 @@ struct DefaultPage {
.commonStyle() .commonStyle()
}.width(100).height(100) }.width(100).height(100)
} else if (this.targetView == 'Navigator') { } else if (this.targetView == 'Navigator') {
Navigator().commonStyle() Navigator({ target: '' }).commonStyle()
} else if (this.targetView == 'Panel') { } else if (this.targetView == 'Panel') {
Panel(true).commonStyle() Panel(true).commonStyle()
} else if (this.targetView == 'Refresh') { } else if (this.targetView == 'Refresh') {
......
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/defaultFocus/DefaultFocusPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import attrsManager from '../../common/AttrsManager';
import router from '@ohos.router'
/**
* Test page of common attribute: defaultFocus
*/
@Entry
@Component
struct DefaultFocusPage {
private scroller: Scroller = new Scroller() //For Scroll and Scroll
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll
@State _defaultFocus: boolean = true;
@State callback: string = '';
@State referenceCallback: string = '';
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State textComponentKey: string =
router.getParams() ? router.getParams()['view']['textComponentKey'] : ''
@State referenceComponentKey: string =
router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
onPageShow() {
console.info('[DefaultFocusPage] page show called ');
//Register data change call back.
attrsManager.registerDataChange(value => {
this._defaultFocus = value;
})
}
/**
* Set common style.
*/
@Styles commonStyle(){
.defaultFocus(this._defaultFocus)
.key(this.componentKey)
.onFocus(() => {
this.callback = 'onFocus'
console.info('[DefaultFocusPage] targetComponent onFocus called');
})
.onBlur(() => {
this.callback = 'onBlur'
console.info('[DefaultFocusPage] targetComponent onBlur called');
})
.focusable(true)
}
build() {
Column() {
Text(this.callback)
.width('100%')
.height(50)
.fontSize(30)
.fontColor(Color.Blue)
.focusable(false)
.key(this.textComponentKey)
Button(this.referenceCallback)
.key(this.referenceComponentKey)
.width('100%')
.height(50)
.onFocus(() => {
this.referenceCallback = 'onFocus'
console.info('[DefaultFocusPage] referenceComponent onFocus called');
})
.onBlur(() => {
this.referenceCallback = 'onBlur'
console.info('[DefaultFocusPage] targetComponent onBlur called');
})
if (this.targetView == 'Button') {
Button('Button').width(200).height(100).commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput().width(200).height(100).commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea().width(200).height(100).commonStyle()
} else if (this.targetView == 'Search') {
Search().width(200).height(100).commonStyle()
} else if (this.targetView == 'Text') {
Text('Text').width(200).height(100).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).width(200).height(100).commonStyle()
} else if (this.targetView == 'List') {
List() {
ListItem() {
Text('item1')
.focusable(true)
.width('100%')
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}
}.width(200).height(100).backgroundColor(Color.Blue).commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
GridItem() {
Text('day')
.backgroundColor(Color.White)
.focusable(true)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}
}
.width(200).height(100).commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup().width(200).height(100).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker({}).width(200).height(100).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator()
.backgroundColor(Color.Blue).width(200).height(300)
.commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.backgroundColor(Color.Yellow).width(200)
.height(300).commonStyle()
} else if (this.targetView == 'MenuItem') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
.width(200).height(300).commonStyle()
}.backgroundColor(Color.Yellow).width(200).height(300)
} else if (this.targetView == 'MenuItemGroup') {
Menu() {
MenuItemGroup({ header: 'MenuItemGroup' }) {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
}.width(200).height(300).commonStyle()
}.backgroundColor(Color.Yellow).width(200).height(300)
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' })
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'Rating') {
Rating({ rating: 3.5 })
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
{ value: 'bbb', icon: '/common/public_icon.svg' }])
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'Slider') {
Slider()
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem() {
Column() {
Text('Page One').focusable(true)
}
}
}.commonStyle()
} else if (this.targetView == 'StepperItem') {
Stepper() {
StepperItem() {
Column() {
Text('Page One')
.focusable(true)
}
}
.commonStyle()
.backgroundColor(Color.Red)
.width('100%')
.height('100%')
}.backgroundColor(Color.Yellow).width(200).height(100)
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] })
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().width(200).height(300).commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).width(200).height(300)
.commonStyle()
} else if (this.targetView == 'Web') {
Web({ src: '', controller: new WebController() }).commonStyle()
} else if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 })
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'Column') {
Column() {
Button('Button')
}
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1')
.width('10%')
.height(100)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
.focusable(true)
Text('2')
.width('10%')
.height(100)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
.focusable(true)
}.width(200).height(300).commonStyle()
} else if (this.targetView == 'Counter') {
Counter() {
Button('Button')
}
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'Flex') {
Flex() {
Button('Button')
}
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'GridCol') {
GridRow({
columns: 1,
direction: GridRowDirection.Row
}) {
GridCol() {
Row() {
Button('Button')
}.width('100%').height('20vp')
}
.commonStyle()
.backgroundColor(Color.Yellow)
.width('100%')
.height('100%')
}.width(200).height(200).backgroundColor(Color.Pink)
} else if (this.targetView == 'GridRow') {
GridRow({
columns: 5,
gutter: { x: 5, y: 10 },
breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row
}) {
ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,],
(color) => {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row() {
Button('Button')
}.width('100%').height('20vp')
}.borderColor(color).borderWidth(2)
})
}.commonStyle()
} else if (this.targetView == 'GridItem') {
Grid() {
GridItem() {
Text('GridItem1')
.backgroundColor(Color.White)
.focusable(true)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.width(200).height(300).commonStyle()
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.backgroundColor(Color.Black)
.width(200)
.height(300)
} else if (this.targetView == 'ListItem') {
List({ space: 0, initialIndex: 0 }) {
ListItem() {
Text('item1')
.focusable(true)
.width('100%')
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}.commonStyle()
}.width(200).height(300).listDirection(Axis.Vertical)
} else if (this.targetView == 'ListItemGroup') {
List({ space: 0, initialIndex: 0 }) {
ListItemGroup() {
ListItem() {
Text('item1')
.focusable(true)
.width('100%')
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}
}.backgroundColor(Color.Yellow).commonStyle()
}
.backgroundColor(Color.Pink)
.width(300)
.height(400)
.listDirection(Axis.Vertical)
} else if (this.targetView == 'Row') {
Row() {
Button('Button')
}
.backgroundColor(Color.Blue).width(200).height(300).commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1')
.width('10%')
.height(100)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
.focusable(true)
Text('2')
.width('10%')
.height(100)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
.focusable(true)
}.width(200).height(300).commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll(this.scroller) {
Flex({ direction: FlexDirection.Column }) {
ForEach(this.arr, (item) => {
Row() {
Text(item.toString())
.width(80)
.height(20)
.backgroundColor('#3366CC')
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 5 })
.focusable(true)
}
}, item => item)
}.margin({ right: 15 })
}.width(200).height(300).commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach([1, 2, 3], (item) => {
Column({ space: 5 }) {
Image($r('app.media.icon')).width(64).height(64).focusable(true)
Text('Index0' + item).fontSize(25).focusable(true)
}
})
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.backgroundColor(Color.Green)
Column() {
Text('SideBarContainer content').fontSize(25)
}.backgroundColor(Color.Orange)
}.width(200).height(300).commonStyle()
} else if (this.targetView == 'Stack') {
Stack() {
Button('Button')
}
.backgroundColor(Color.Blue).width(200).height(300).commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item).width('90%').height(160).focusable(true)
}, item => item)
}
.indicator(true)
.backgroundColor(Color.White)
.width(200)
.height(300)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs() {
TabContent() {
Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true)
}.tabBar('Tabs1')
}.backgroundColor(Color.Blue).width(200).height(300).commonStyle()
} else if (this.targetView == 'TabContent') {
Tabs() {
TabContent() {
Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true)
}.tabBar('Tabs1').commonStyle()
}.width(200).height(300)
}
}.width('100%').height('100%')
}
}
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/displayPriority/DisplayPriorityPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import AttrsManager from '../../common/AttrsManager';
import router from '@ohos.router';
@Entry
@Component
struct DisplayPriorityPage {
@State _displayPriority: number = 1.0;
@State _compareOneButtonDisplayPriority: number = 2.0;
@State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : ''
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0
@State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0
@State compareOneButtonWidth: number = router.getParams() ? router.getParams()['view']['compareOneButtonWidth'] : 0
@State compareOneButtonHeight: number = router.getParams() ? router.getParams()['view']['compareOneButtonHeight'] : 0
@State compareOneButtonDisplayPriority: number =
router.getParams() ? router.getParams()['view']['compareOneButtonDisplayPriority'] : 0
@State compareOneButtonKey: string = router.getParams() ? router.getParams()['view']['compareOneButtonKey'] : ''
@State compareTwoButtonWidth: number = router.getParams() ? router.getParams()['view']['compareTwoButtonWidth'] : 0
@State compareTwoButtonHeight: number = router.getParams() ? router.getParams()['view']['compareTwoButtonHeight'] : 0
@State compareTwoButtonDisplayPriority: number =
router.getParams() ? router.getParams()['view']['compareTwoButtonDisplayPriority'] : 0
@State compareTwoButtonKey: string = router.getParams() ? router.getParams()['view']['compareTwoButtonKey'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State parentKey: string = router.getParams() ? router.getParams()['view']['parentKey'] : ''
textTimerController: TextTimerController = new TextTimerController()
private scroller: Scroller = new Scroller()
private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
private src: string = 'Running Marquee starts rolling A B C D E F G H I J K L M N O P Q R S T U V W X Y Z';
onPageShow() {
console.info('DisplayPriorityPage page show called')
AttrsManager.registerDataChange(value => {
if (value.displayPriority != undefined) {
this._displayPriority = value.displayPriority
}
if (value.compareOneButtonDisplayPriority != undefined) {
this._compareOneButtonDisplayPriority = value.compareOneButtonDisplayPriority
}
})
}
/*
* Set common style.
*/
@Styles commonStyle(){
.width(this.targetWidth)
.height(this.targetHeight)
.displayPriority(this._displayPriority)
.key(this.componentKey)
}
@Builder buildTargetView() {
Button('compareOneButton')
.displayPriority(this._compareOneButtonDisplayPriority)
.width(this.compareOneButtonWidth)
.height(this.compareOneButtonHeight)
.backgroundColor(Color.Yellow)
.key(this.compareOneButtonKey)
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Blank') {
Blank()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Button') {
Button('button').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.backgroundColor(Color.Pink)
.margin(0)
.commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' })
.margin(0)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25] })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Divider') {
Divider()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 })
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon'))
.commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator()
.images([{ src: $r('app.media.icon') }])
.commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress()
.color(Color.Blue)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({
start: true,
src: this.src
})
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter().backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 20 })
.border({ width: 2 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode(this.src)
.border({ width: 2 })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' })
.backgroundColor(Color.Pink)
.margin(0)
.commonStyle()
} else if (this.targetView == 'Rating') {
Rating()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: this.scroller }) {
Text('1')
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Search') {
Search()
.backgroundColor(Color.Pink)
.margin(0)
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }])
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Slider') {
Slider()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem()
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Text') {
Text('text')
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock()
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: this.value })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ controller: this.textTimerController })
.fontSize(15)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch })
.backgroundColor(Color.Pink)
.margin(0)
.commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: '#FA2A2D' }
}) {
Text('1')
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Column') {
Column()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Counter') {
Counter()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Flex') {
Flex()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow() {
GridCol() {
Text('GridCol')
}.backgroundColor(Color.Pink)
}.commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
GridItem() {
Text('Grid').backgroundColor(Color.White)
}
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'List') {
List()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Navigator') {
Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true)
.backgroundMask(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: false })
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Text('1')
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'Row') {
Row()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('Text')
}.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll(this.scroller) {
Text('1')
}.backgroundColor(Color.Pink).commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
Text('SideBarContainer content')
}.backgroundColor(Color.Orange)
}
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Stack') {
Stack()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item)
}, item => item)
}
.indicator(true)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Circle') {
Circle()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse()
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Line') {
Line()
.backgroundColor(Color.Pink)
.startPoint([0, 0])
.endPoint([50, 100])
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline()
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M100 0 L200 240 L0 240 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect()
.fillOpacity(0)
.stroke(Color.Red)
.strokeWidth(3)
.backgroundColor(Color.Pink)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape()
.backgroundColor(Color.Pink)
.commonStyle()
}
Button('compareTwoButton')
.displayPriority(this.compareTwoButtonDisplayPriority)
.width(this.compareTwoButtonWidth)
.height(this.compareTwoButtonHeight)
.backgroundColor(Color.Red)
.key(this.compareTwoButtonKey)
}
//Draw screen
build() {
if (this.containerView == 'Row') {
Row() {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green).key(this.parentKey)
} else if (this.containerView == 'Column') {
Column() {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green).key(this.parentKey)
} else if (this.containerView == 'Flex') {
Flex() {
this.buildTargetView();
}.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green).key(this.parentKey)
}
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/enabled/EnabledPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import attrsManager from '../../common/AttrsManager';
import router from '@ohos.router'
/**
* Test page of common attribute: enabled
*/
@Entry
@Component
struct EnabledPage {
@State _enabled: boolean = true;
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State eventCallBackStr: string = ''
@State referenceComponentKey: string = router.getParams() ?
router.getParams()['view']['referenceComponentKey'] : ''
onPageShow() {
console.info('[EnabledPage] page show called ')
//Register data change call back.
attrsManager.registerDataChange(value => {
this._enabled = value
this.eventCallBackStr = ''
})
}
/**
* Set common style.
*/
@Styles commonStyle(){
.enabled(this._enabled)
.key(this.componentKey)
.width(200)
.height(200)
.focusable(true)
.focusOnTouch(true)
.onClick((event: ClickEvent) => {
console.info('[EnabledPage] ' + this.targetView + ' onClick called at' + event.timestamp);
this.eventCallBackStr += 'onClick, '
})
.onFocus(() => {
console.info('[EnabledPage] ' + this.targetView + ' onFocus called');
this.eventCallBackStr += 'onFocus, '
})
.onBlur(() => {
console.info('[EnabledPage] ' + this.targetView + ' onBlur called');
this.eventCallBackStr += 'onBlur, '
})
.onHover((isHover?: boolean) => {
console.info('[EnabledPage] ' + this.targetView + ' onHover called isHover: ' + isHover);
this.eventCallBackStr += 'onHover, '
})
.onMouse((event: MouseEvent) => {
console.info('[EnabledPage] ' + this.targetView + ' onMouse called at' + event.timestamp);
this.eventCallBackStr += 'onMouse, '
})
}
@Builder itemHead(text: string) {
Button('Header' + text)
}
build() {
Column() {
//Create view by config.
if (this.targetView == 'MenuItem') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle()
}.width('100%').height('70%').backgroundColor(Color.Yellow)
} else if (this.targetView == 'MenuItemGroup') {
Menu() {
MenuItemGroup({ header: 'MenuItemGroup' }).commonStyle()
}.width('100%').height('70%').backgroundColor(Color.Yellow)
} else if (this.targetView == 'ListItem') {
List({ space: 20, initialIndex: 0 }) {
ListItem() {
Button('List')
}.commonStyle()
}.width('100%')
.height('70%')
.listDirection(Axis.Vertical)
} else if (this.targetView == 'ListItemGroup') {
List({ space: 0, initialIndex: 0 }) {
ListItemGroup({ header: this.itemHead('Group1') }) {
ListItem()
}
.backgroundColor(Color.Yellow)
.commonStyle()
}
.width('100%')
.height('70%')
} else if (this.targetView == 'TabContent') {
Tabs() {
TabContent() {
Button('TabContent Test')
}.tabBar('Tabs1').commonStyle()
}.width('100%')
.height('70%')
} else if (this.targetView == 'GridCol') {
GridRow({ columns: 1, }) {
GridCol({ span: 1 }) {
Button('GridCol')
}.backgroundColor(Color.Green).commonStyle()
}.width('100%')
.height('70%')
} else if (this.targetView == 'GridItem') {
Grid() {
GridItem() {
Text('GridItem1').focusable(true)
}.commonStyle()
}
.width('100%')
.height('70%')
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.backgroundColor(Color.Black)
} else if (this.targetView == 'StepperItem') {
Stepper() {
StepperItem() {
Button('StepperItem')
}.backgroundColor(Color.Green).commonStyle()
}
.width('100%')
.height('70%')
} else if (this.targetView == 'FlowItem') {
WaterFlow() {
FlowItem() {
Button('FlowItem')
}.backgroundColor(Color.Green).commonStyle()
}
.width('100%')
.height('70%')
} else {
Row() {
//Set view by page config.
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D'], selected: 0 }).commonStyle()
} else if (this.targetView == 'Blank') {
Blank().backgroundColor(Color.Orange).commonStyle()
} else if (this.targetView == 'Button') {
Button('button1').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: new Date()
}).commonStyle()
} else if (this.targetView == 'Divider') {
Divider().strokeWidth(8).vertical(true).commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress().color(Color.Blue).commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' })
.fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ content: 'Menu' })
}.backgroundColor(Color.Yellow).padding(100).commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation().backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter() {
Row() {
Image($r('app.media.icon'))
}
NavDestination() {
Text('NavDestination').fontSize(10)
}
}.commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 50, type: ProgressType.Linear }).commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode('QRCode').color(0xF7CE00).commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating({ rating: 4 }).stars(5).commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
Text().width(20).height(100).borderRadius(10)
.backgroundColor('#C0C0C0')
}.width(20).backgroundColor('#ededed').commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem() {
Column() {
Text('Page One')
}
}
}.commonStyle()
} else if (this.targetView == 'Search') {
Search({ placeholder: 'Type to search...' })
.backgroundColor(Color.White)
.searchButton('SEARCH')
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa' }]).backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'Slider') {
Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical })
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.commonStyle()
} else if (this.targetView == 'Text') {
Text('text').fontColor(Color.White).fontSize(30).commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea({ placeholder: 'TextArea', }).backgroundColor(Color.White).commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput({ placeholder: 'TextInput' }).backgroundColor(Color.White).commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ count: 30000 }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Button('BadgeContent')
}.commonStyle()
} else if (this.targetView == 'Column') {
Column() {
Button('ColumnButton')
}.backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'Counter') {
Counter() {
Text('1')
}.commonStyle()
} else if (this.targetView == 'Flex') {
Flex() {
Button('Flex')
}.backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow({ columns: 1, }) {
GridCol({ span: 1 }) {
Button('GridRow Test')
}.backgroundColor(Color.Green)
}.commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
ForEach(['0', '1', '2', '3', '4'], () => {
ForEach(['0', '1', '2', '3', '4'], (day: string) => {
GridItem() {
Button('GridItem' + day)
}
})
})
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.commonStyle()
} else if (this.targetView == 'List') {
List({ space: 20, initialIndex: 0 }) {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
ListItem() {
Button('ListItem' + item)
}
}, item => item)
}
.listDirection(Axis.Vertical)
.commonStyle()
} else if (this.targetView == 'Navigator') {
Navigator({ target: '' }) {
Text('Navigator Go to index page')
.width('100%').textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(100)
.backgroundColor('#FF3333')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id('EnabledPageRelativeContainerRow')
}.backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'Row') {
Row() {
Button('RowButton')
}.backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Button('ColumnSplit')
}.backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Button('RowSplit')
}.backgroundColor(Color.Green).commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true) {
Button('Panel')
}
.backgroundColor(Color.Green)
.mode(PanelMode.Full)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: true }) {
Text('Refresh').fontSize(30)
}
.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
Button('Scroll item' + item)
}, item => item)
}.width('100%')
}
.scrollBar(BarState.On)
.commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
Button('SideBarContainer')
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.backgroundColor(Color.Green)
Column() {
Button('SideBarContainer content')
}.backgroundColor(Color.Orange)
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack() {
Button('Stack')
}.backgroundColor(Color.Orange).commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item).width('90%').height(160)
}, item => item)
}
.indicator(true)
.backgroundColor(Color.White)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs() {
TabContent() {
Button('TabContent')
}.tabBar('Tabs1')
}.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow() {
FlowItem() {
Button('FlowItem')
}
}.commonStyle()
} else if (this.targetView == 'Circle') {
Circle().commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse().commonStyle()
} else if (this.targetView == 'Line') {
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.stroke(Color.Black)
.backgroundColor('#F5F5F5')
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline()
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.width('210px')
.height('310px')
.commands('M0 100 A30 20 20 0 0 200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect()
.radius(20)
.fill(Color.Pink)
.stroke(Color.Transparent)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape() {
Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
}
.viewPort({ x: -20, y: -5, width: 310, height: 90 })
.fill(0x317AF7)
.stroke(0xEE8443)
.strokeWidth(10)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeMiterLimit(5)
.commonStyle()
}
}
.width('100%')
.height('70%')
.backgroundColor(Color.Gray)
.focusable(true)
}
Text(this.eventCallBackStr).key(this.referenceComponentKey).focusable(true).fontSize(30)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import AttrsManager from '../../common/AttrsManager';
import router from '@ohos.router'
@Entry
@Component
struct AlignSelfPage {
@State _alignSelf: ItemAlign = ItemAlign.Auto;
@State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : ''
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State _alignItemsForFlex: ItemAlign = ItemAlign.Start;
@State _alignItemsForRow: VerticalAlign = VerticalAlign.Top;
@State _alignItemsForColumn: HorizontalAlign = HorizontalAlign.Start;
@State _alignItemsForGridRow: ItemAlign = ItemAlign.Start;
onPageShow() {
console.info('AlignSelf page show called ')
AttrsManager.registerDataChange(value => {
if (value.alignSelf) {
this._alignSelf = value.alignSelf
}
if (value.defaultAlignItems.Row) {
this._alignItemsForRow = value.defaultAlignItems.Row
}
if (value.defaultAlignItems.Column) {
this._alignItemsForColumn = value.defaultAlignItems.Column
}
if (value.defaultAlignItems.Flex) {
this._alignItemsForFlex = value.defaultAlignItems.Flex
}
if (value.defaultAlignItems.GridRow) {
this._alignItemsForGridRow = value.defaultAlignItems.GridRow
}
})
}
@Styles commonStyle(){
.margin(0)
.alignSelf(this._alignSelf)
.width(200)
.height(200)
.key(this.componentKey)
.backgroundColor(Color.Pink)
}
@Builder buildTargetView() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
} else if (this.targetView == 'Button') {
Button('button1').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: new Date()
}).commonStyle()
} else if (this.targetView == 'Divider') {
Divider().strokeWidth(8).vertical(true).commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress().color(Color.Blue).commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' })
.fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation().commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter() {
Row() {
Image($r('app.media.icon'))
}
NavDestination() {
Text('NavDestination').fontSize(10)
}
}.commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 50, type: ProgressType.Linear }).commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode('QRCode').color(0xF7CE00).commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating({ rating: 4 }).stars(5).commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
Text().width(20).height(20).borderRadius(10)
}.width(20).commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem() {
Column() {
Text('Page One')
}
}
}.commonStyle()
} else if (this.targetView == 'Search') {
Search({ placeholder: 'Type to search...' })
.searchButton('SEARCH')
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
{ value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
} else if (this.targetView == 'Slider') {
Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical })
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.commonStyle()
} else if (this.targetView == 'Text') {
Text('text').fontColor(Color.White).fontSize(30).commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea({ placeholder: 'TextArea', }).commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput({ placeholder: 'TextInput' }).commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ count: 30000 }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Button('BadgeContent')
}.commonStyle()
} else if (this.targetView == 'Column') {
Column().commonStyle()
} else if (this.targetView == 'Counter') {
Counter() {
Text('1')
}.commonStyle()
} else if (this.targetView == 'Flex') {
Flex().commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow({
columns: 1,
direction: GridRowDirection.Row
}) {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row().width('100%').height('20vp')
}
}.commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
GridItem() {
Text()
.width('100%').height('100%').textAlign(TextAlign.Center)
}
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.commonStyle()
} else if (this.targetView == 'List') {
List({ space: 20, initialIndex: 0 }) {
ListItem() {
Text('')
.width('100%')
.textAlign(TextAlign.Center)
}
}
.listDirection(Axis.Vertical)
.commonStyle()
} else if (this.targetView == 'Navigator') {
Navigator({ target: 'MainAbility/pages/index/Index' }) {
Text('Navigator Go to index page')
.width('100%').textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(100)
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
}.commonStyle()
} else if (this.targetView == 'Row') {
Row().commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true) {
Column() {
Text('Panel')
}
}
.mode(PanelMode.Half)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: true }) {
Text('Refresh').fontSize(30)
}
.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
Text('Scroll')
.width('90%')
.height(10)
.textAlign(TextAlign.Center)
}.width('100%')
}
.scrollBar(BarState.On)
.commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
Column({ space: 5 }) {
Text('Index0').fontSize(25)
}
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
Column() {
Text('SideBarContainer content').fontSize(25)
}
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack() {
Text('Stack').fontColor(Color.White)
}.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
Text('Swiper').width('90%').height(160)
}
.indicator(true)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs() {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}
}.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow() {
FlowItem() {
Column() {
Text('WaterFlow').fontSize(12).height('16')
}
}
}.commonStyle()
} else if (this.targetView == 'Circle') {
Circle({ width: 150, height: 150 }).commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse({ width: 150, height: 80 }).commonStyle()
} else if (this.targetView == 'Line') {
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.stroke(Color.Black)
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline({ width: 100, height: 100 })
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M0 100 A30 20 20 0 0 200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
.stroke(Color.Transparent)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape() {
Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z')
}
.viewPort({ x: -20, y: -5, width: 310, height: 90 })
.fill(0x317AF7)
.stroke(0xEE8443)
.strokeWidth(10)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeMiterLimit(5)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'Blank') {
Blank().commonStyle()
}
}
build() {
Column() {
if (this.targetView == 'GridCol') {
//for GridRow
GridRow({ columns: 3 }) {
GridCol({ span: 1 }) {
Row().width('20vp').height('20vp')
}.commonStyle()
GridCol({ span: 1 }) {
Row().width('20vp').height('20vp')
}
}
.alignItems(this._alignItemsForGridRow)
.key(this.parentComponentKey)
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else {
if (this.containerView == 'Row') {
Row() {
this.buildTargetView();
}
.key(this.parentComponentKey)
.alignItems(this._alignItemsForRow)
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'Column') {
Column() {
this.buildTargetView();
}
.key(this.parentComponentKey)
.alignItems(this._alignItemsForColumn)
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRow') {
Flex({ direction: FlexDirection.Row, alignItems: this._alignItemsForFlex }) {
this.buildTargetView();
}
.key(this.parentComponentKey)
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRowReverse') {
Flex({ direction: FlexDirection.RowReverse, alignItems: this._alignItemsForFlex }) {
this.buildTargetView();
}
.key(this.parentComponentKey)
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumn') {
Flex({ direction: FlexDirection.Column, alignItems: this._alignItemsForFlex }) {
this.buildTargetView();
}
.key(this.parentComponentKey)
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumnReverse') {
Flex({ direction: FlexDirection.ColumnReverse, alignItems: this._alignItemsForFlex }) {
this.buildTargetView();
}
.key(this.parentComponentKey)
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
}
}
}.backgroundColor(Color.Yellow).width('100%').height('100%')
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchNoSizePage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import AttrsManager from '../../common/AttrsManager';
import router from '@ohos.router'
@Entry
@Component
struct AlignSelfStretchNoSizePage {
@State _alignSelf: ItemAlign = ItemAlign.Auto;
@State _wrap: FlexWrap = FlexWrap.NoWrap;
@State _direction: FlexDirection = FlexDirection.Row;
@State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : ''
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
@State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State compareWidth: number = router.getParams() ? router.getParams()['view']['compareWidth'] : 0
@State compareHeight: number = router.getParams() ? router.getParams()['view']['compareHeight'] : 0
onPageShow() {
console.info('AlignSelfStretchNoSizePage page show called ')
AttrsManager.registerDataChange(value => {
this._alignSelf = value.alignSelf
this._wrap = value.wrap
this._direction = value.direction
})
}
@Styles commonStyle(){
.margin(0)
.alignSelf(this._alignSelf)
.key(this.componentKey)
}
@Builder buildTargetView() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
} else if (this.targetView == 'Button') {
Button('button1').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: new Date()
}).commonStyle()
} else if (this.targetView == 'Divider') {
Divider().strokeWidth(8).vertical(true).commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress().color(Color.Blue).commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' })
.fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation().commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter() {
Row() {
Image($r('app.media.icon'))
}
NavDestination() {
Text('NavDestination').fontSize(10)
}
}.commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 50, type: ProgressType.Linear }).commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode('QRCode').color(0xF7CE00).commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating({ rating: 4 }).stars(5).commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
Text().width(20).height(20).borderRadius(10)
}.width(20).commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem() {
Column() {
Text('Page One')
}
}
}.commonStyle()
} else if (this.targetView == 'Search') {
Search({ placeholder: 'Type to search...' })
.searchButton('SEARCH')
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
{ value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
} else if (this.targetView == 'Slider') {
Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical })
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.commonStyle()
} else if (this.targetView == 'Text') {
Text('text').fontColor(Color.White).fontSize(30).commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea({ placeholder: 'TextArea', }).commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput({ placeholder: 'TextInput' }).commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ count: 30000 }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Button('BadgeContent')
}.commonStyle()
} else if (this.targetView == 'Column') {
Column() {
Text('Column')
}.commonStyle()
} else if (this.targetView == 'Counter') {
Counter() {
Text('1')
}.commonStyle()
} else if (this.targetView == 'Flex') {
Flex() {
Text('Flex')
}.commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow({
columns: 5,
gutter: { x: 5, y: 10 },
breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row
}) {
ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green,
Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row().width('100%').height('20vp')
}.borderColor(color).borderWidth(2)
})
}.commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
ForEach(['0', '1', '2', '3', '4'], () => {
ForEach(['0', '1', '2', '3', '4'], (day: string) => {
GridItem() {
Text(day)
.width('100%').height('100%').textAlign(TextAlign.Center)
}
})
})
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.commonStyle()
} else if (this.targetView == 'List') {
List({ space: 20, initialIndex: 0 }) {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
ListItem() {
Text('' + item)
.width('100%')
.textAlign(TextAlign.Center)
}
}, item => item)
}
.listDirection(Axis.Vertical)
.commonStyle()
} else if (this.targetView == 'Navigator') {
Navigator({ target: 'MainAbility/pages/index/Index' }) {
Text('Navigator Go to index page')
.width('100%').textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(100)
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
}.commonStyle()
} else if (this.targetView == 'Row') {
Row() {
Text('Row')
}.commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true) {
Column() {
Text('Panel')
}
}
.mode(PanelMode.Half)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: true }) {
Text('Refresh').fontSize(30)
}
.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
Text('Scroll' + item.toString())
.width('90%')
.height(10)
.textAlign(TextAlign.Center)
}, item => item)
}.width('100%')
}
.scrollBar(BarState.On)
.commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach([1, 2, 3], (item) => {
Column({ space: 5 }) {
Image($r('app.media.icon')).width(64).height(64)
Text('Index0' + item).fontSize(25)
}
})
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
Column() {
Text('SideBarContainer content').fontSize(25)
}
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack() {
Text('Stack').fontColor(Color.White)
}.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item).width('90%').height(160)
}, item => item)
}
.indicator(true)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs() {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}
}.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow() {
ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
FlowItem() {
Column() {
Text('WaterFlow' + item).fontSize(12).height('16')
Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
}
}
}, item => item)
}.commonStyle()
} else if (this.targetView == 'Circle') {
Circle({ width: 150, height: 150 }).commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse({ width: 150, height: 80 }).commonStyle()
} else if (this.targetView == 'Line') {
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.stroke(Color.Black)
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline({ width: 100, height: 100 })
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M0 100 A30 20 20 0 0 200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
.stroke(Color.Transparent)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape() {
Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z')
}
.viewPort({ x: -20, y: -5, width: 310, height: 90 })
.fill(0x317AF7)
.stroke(0xEE8443)
.strokeWidth(10)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeMiterLimit(5)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'Blank') {
Blank().commonStyle()
}
}
build() {
Column() {
if (this.containerView == 'FlexNoReference') {
Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
.key(this.parentComponentKey)
} else if (this.containerView == 'Flex') {
Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) {
this.buildTargetView();
Button('referenceComponent')
.width(this.compareWidth)
.height(this.compareHeight)
.key(this.referenceComponentKey)
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
.key(this.parentComponentKey)
}
}.backgroundColor(Color.Yellow)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import AttrsManager from '../../common/AttrsManager';
import router from '@ohos.router'
@Entry
@Component
struct AlignSelfStretchPage {
@State _alignSelf: ItemAlign = ItemAlign.Auto;
@State _wrap: FlexWrap = FlexWrap.NoWrap;
@State _direction: FlexDirection = FlexDirection.Row;
@State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : ''
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
@State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0
@State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0
@State compareWidth: number = router.getParams() ? router.getParams()['view']['compareWidth'] : 0
@State compareHeight: number = router.getParams() ? router.getParams()['view']['compareHeight'] : 0
onPageShow() {
console.info('AlignSelfStretchPage page show called ')
AttrsManager.registerDataChange(value => {
this._alignSelf = value.alignSelf
this._wrap = value.wrap
this._direction = value.direction
})
}
@Styles commonStyle(){
.margin(0)
.alignSelf(this._alignSelf)
.width(this.targetWidth)
.height(this.targetHeight)
.key(this.componentKey)
}
@Builder buildTargetView() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
} else if (this.targetView == 'Button') {
Button('button1').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: new Date()
}).commonStyle()
} else if (this.targetView == 'Divider') {
Divider().strokeWidth(8).vertical(true).commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress().color(Color.Blue).commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' })
.fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation().commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter() {
Row() {
Image($r('app.media.icon'))
}
NavDestination() {
Text('NavDestination').fontSize(10)
}
}.commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 50, type: ProgressType.Linear }).commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode('QRCode').color(0xF7CE00).commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating({ rating: 4 }).stars(5).commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
Text().width(20).height(20).borderRadius(10)
}.width(20).commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem() {
Column() {
Text('Page One')
}
}
}.commonStyle()
} else if (this.targetView == 'Search') {
Search({ placeholder: 'Type to search...' })
.searchButton('SEARCH')
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
{ value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
} else if (this.targetView == 'Slider') {
Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical })
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.commonStyle()
} else if (this.targetView == 'Text') {
Text('text').fontColor(Color.White).fontSize(30).commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea({ placeholder: 'TextArea', }).commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput({ placeholder: 'TextInput' }).commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ count: 30000 }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Button('BadgeContent')
}.commonStyle()
} else if (this.targetView == 'Column') {
Column().commonStyle()
} else if (this.targetView == 'Counter') {
Counter() {
Text('1')
}.commonStyle()
} else if (this.targetView == 'Flex') {
Flex().commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow({
columns: 5,
gutter: { x: 5, y: 10 },
breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row
}) {
ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green,
Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row().width('100%').height('20vp')
}.borderColor(color).borderWidth(2)
})
}.commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
ForEach(['0', '1', '2', '3', '4'], () => {
ForEach(['0', '1', '2', '3', '4'], (day: string) => {
GridItem() {
Text(day)
.width('100%').height('100%').textAlign(TextAlign.Center)
}
})
})
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.commonStyle()
} else if (this.targetView == 'List') {
List({ space: 20, initialIndex: 0 }) {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
ListItem() {
Text('' + item)
.width('100%')
.textAlign(TextAlign.Center)
}
}, item => item)
}
.listDirection(Axis.Vertical)
.commonStyle()
} else if (this.targetView == 'Navigator') {
Navigator({ target: 'MainAbility/pages/index/Index' }) {
Text('Navigator Go to index page')
.width('100%').textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(100)
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
}.commonStyle()
} else if (this.targetView == 'Row') {
Row().commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true) {
Column() {
Text('Panel')
}
}
.mode(PanelMode.Half)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: true }) {
Text('Refresh').fontSize(30)
}
.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
Text('Scroll' + item.toString())
.width('90%')
.height(10)
.textAlign(TextAlign.Center)
}, item => item)
}.width('100%')
}
.scrollBar(BarState.On)
.commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach([1, 2, 3], (item) => {
Column({ space: 5 }) {
Image($r('app.media.icon')).width(64).height(64)
Text('Index0' + item).fontSize(25)
}
})
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
Column() {
Text('SideBarContainer content').fontSize(25)
}
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack() {
Text('Stack').fontColor(Color.White)
}.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
ForEach([1, 2, 3], (item: string) => {
Text('Swiper' + item).width('90%').height(160)
}, item => item)
}
.indicator(true)
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs() {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}
}.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow() {
ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
FlowItem() {
Column() {
Text('WaterFlow' + item).fontSize(12).height('16')
Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
}
}
}, item => item)
}.commonStyle()
} else if (this.targetView == 'Circle') {
Circle({ width: 150, height: 150 }).commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse({ width: 150, height: 80 }).commonStyle()
} else if (this.targetView == 'Line') {
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.stroke(Color.Black)
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline({ width: 100, height: 100 })
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M0 100 A30 20 20 0 0 200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
.stroke(Color.Transparent)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape() {
Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z')
}
.viewPort({ x: -20, y: -5, width: 310, height: 90 })
.fill(0x317AF7)
.stroke(0xEE8443)
.strokeWidth(10)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeMiterLimit(5)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'Blank') {
Blank().commonStyle()
}
}
build() {
Column() {
if (this.containerView == 'FlexNoReference') {
Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
.key(this.parentComponentKey)
} else if (this.containerView == 'Flex') {
Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) {
this.buildTargetView();
Button('referenceComponent')
.width(this.compareWidth)
.height(this.compareHeight)
.key(this.referenceComponentKey)
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
.key(this.parentComponentKey)
}
}.backgroundColor(Color.Yellow)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexBasisPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router'
import AttrsManager from '../../common/AttrsManager';
@Entry
@Component
struct FlexBasisPage {
@State _flexBasis: number | string = 0
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
@State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
@State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0
@State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0
onPageShow() {
console.info('[FlexBasis] page show called ')
AttrsManager.registerDataChange(value => this._flexBasis = value.flexBasis)
}
@Styles commonStyle(){
.margin(0)
.flexBasis(this._flexBasis)
.width(this.targetWidth)
.height(this.targetHeight)
.backgroundColor(Color.White)
.key(this.componentKey)
}
@Builder buildTargetView() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
} else if (this.targetView == 'Button') {
Button('button1').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: new Date()
}).commonStyle()
} else if (this.targetView == 'Divider') {
Divider().strokeWidth(8).vertical(true).commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress().color(Color.Blue).commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' })
.fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation().commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter() {
Row() {
Image($r('app.media.icon'))
}
NavDestination() {
Text('NavDestination').fontSize(10)
}
}.commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 50, type: ProgressType.Linear }).commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode('QRCode').color(0xF7CE00).commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating({ rating: 4 }).stars(5).commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
Text().width(20).height(20).borderRadius(10)
}.width(20).commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem() {
Column() {
Text('Page One')
}
}
}.commonStyle()
} else if (this.targetView == 'Search') {
Search({ placeholder: 'Type to search...' })
.searchButton('SEARCH')
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
{ value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
} else if (this.targetView == 'Slider') {
Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical })
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.commonStyle()
} else if (this.targetView == 'Text') {
Text('text').fontColor(Color.White).fontSize(30).commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea({ placeholder: 'TextArea', }).commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput({ placeholder: 'TextInput' }).commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ count: 30000 }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Button('BadgeContent')
}.commonStyle()
} else if (this.targetView == 'Column') {
Column().commonStyle()
} else if (this.targetView == 'Counter') {
Counter() {
Text('1')
}.commonStyle()
} else if (this.targetView == 'Flex') {
Flex().commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow({
columns: 5,
direction: GridRowDirection.Row
}) {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row().width('100%').height('20vp')
}
}.commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
GridItem() {
Text()
.width('100%').height('100%').textAlign(TextAlign.Center)
}
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.commonStyle()
} else if (this.targetView == 'List') {
List({ space: 20, initialIndex: 0 }) {
ListItem() {
Text('')
.width('100%')
.textAlign(TextAlign.Center)
}
}
.listDirection(Axis.Vertical)
.commonStyle()
} else if (this.targetView == 'Navigator') {
Navigator({ target: 'MainAbility/pages/index/Index' }) {
Text('Navigator Go to index page')
.width('100%').textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(100)
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
}.commonStyle()
} else if (this.targetView == 'Row') {
Row().commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true) {
Column() {
Text('Panel')
}
}
.mode(PanelMode.Half)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: true }) {
Text('Refresh').fontSize(30)
}
.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
Text('Scroll')
.width('90%')
.height(10)
.textAlign(TextAlign.Center)
}.width('100%')
}
.scrollBar(BarState.On)
.commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
Column({ space: 5 }) {
Image($r('app.media.icon')).width(64).height(64)
Text('Index0').fontSize(25)
}
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
Column() {
Text('SideBarContainer content').fontSize(25)
}
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack() {
Text('Stack').fontColor(Color.White)
}.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
Text('Swiper').width('90%').height(160)
}
.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs() {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}
}.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow() {
FlowItem() {
Column() {
Text('WaterFlow').fontSize(12).height('16')
Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
}
}
}.commonStyle()
} else if (this.targetView == 'Circle') {
Circle({ width: 150, height: 150 }).commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse({ width: 150, height: 80 }).commonStyle()
} else if (this.targetView == 'Line') {
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.stroke(Color.Black)
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline({ width: 100, height: 100 })
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M0 100 A30 20 20 0 0 200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
.stroke(Color.Transparent)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape() {
Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z')
}
.viewPort({ x: -20, y: -5, width: 310, height: 90 })
.fill(0x317AF7)
.stroke(0xEE8443)
.strokeWidth(10)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeMiterLimit(5)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.commonStyle()
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'Blank') {
Blank().commonStyle()
}
}
build() {
Column() {
if (this.targetView == 'GridCol') {
//for GridCol
GridRow() {
GridCol() {
Row().width('100%').height('20vp')
}.commonStyle()
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else {
//for different containerView
if (this.containerView == 'Row') {
Row() {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'Column') {
Column() {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRow') {
Flex({ direction: FlexDirection.Row }) {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRowReverse') {
Flex({ direction: FlexDirection.RowReverse }) {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumn') {
Flex({ direction: FlexDirection.Column }) {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumnReverse') {
Flex({ direction: FlexDirection.ColumnReverse }) {
this.buildTargetView();
}
.width(this.parentWidth)
.height(this.parentHeight)
.backgroundColor(Color.Green)
}
}
}.backgroundColor(Color.Yellow).width('100%').height('100%')
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexGrowPage.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router'
import AttrsManager from '../../common/AttrsManager';
@Entry
@Component
struct FlexGrowPage {
@State _flexGrow: number = 2
@State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
@State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
@State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : ''
@State _parentWidth: number = 500
@State _parentHeight: number = 500
@State compareWidth: number = router.getParams() ? router.getParams()['view']['compareWidth'] : 0
@State compareHeight: number = router.getParams() ? router.getParams()['view']['compareHeight'] : 0
@State standardWidth: number = router.getParams() ? router.getParams()['view']['standardWidth'] : 0
@State standardHeight: number = router.getParams() ? router.getParams()['view']['standardHeight'] : 0
@State compareComponentKey: string = router.getParams() ? router.getParams()['view']['compareComponentKey'] : ''
@State standardComponentKey: string = router.getParams() ? router.getParams()['view']['standardComponentKey'] : ''
@State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0
@State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0
@State _compareFlexGrow: number = 1
onPageShow() {
console.info('[FlexGrow] page show called')
AttrsManager.registerDataChange(value => {
if (value.flexGrow) {
this._flexGrow = value.flexGrow
}
if (value.parentWidth) {
this._parentWidth = value.parentWidth
}
if (value.parentHeight) {
this._parentHeight = value.parentHeight
}
if (value.compareFlexGrow) {
this._compareFlexGrow = value.compareFlexGrow
}
})
}
@Styles commonStyle(){
.margin(0)
.flexGrow(this._flexGrow)
.width(this.targetWidth)
.height(this.targetHeight)
.backgroundColor(Color.White)
.key(this.componentKey)
}
@Builder buildTargetView() {
if (this.targetView == 'AlphabetIndexer') {
AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
} else if (this.targetView == 'Button') {
Button('button1').commonStyle()
} else if (this.targetView == 'Checkbox') {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'CheckboxGroup') {
CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
} else if (this.targetView == 'DataPanel') {
DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle()
} else if (this.targetView == 'DatePicker') {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: new Date()
}).commonStyle()
} else if (this.targetView == 'Divider') {
Divider().strokeWidth(8).vertical(true).commonStyle()
} else if (this.targetView == 'Gauge') {
Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle()
} else if (this.targetView == 'Image') {
Image($r('app.media.icon')).commonStyle()
} else if (this.targetView == 'ImageAnimator') {
ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
} else if (this.targetView == 'LoadingProgress') {
LoadingProgress().color(Color.Blue).commonStyle()
} else if (this.targetView == 'Marquee') {
Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' })
.fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle()
} else if (this.targetView == 'Menu') {
Menu() {
MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
}.commonStyle()
} else if (this.targetView == 'Navigation') {
Navigation().commonStyle()
} else if (this.targetView == 'NavRouter') {
NavRouter() {
Row() {
Image($r('app.media.icon'))
}
NavDestination() {
Text('NavDestination').fontSize(10)
}
}.commonStyle()
} else if (this.targetView == 'Progress') {
Progress({ value: 50, type: ProgressType.Linear }).commonStyle()
} else if (this.targetView == 'QRCode') {
QRCode('QRCode').color(0xF7CE00).commonStyle()
} else if (this.targetView == 'Radio') {
Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
} else if (this.targetView == 'Rating') {
Rating({ rating: 4 }).stars(5).commonStyle()
} else if (this.targetView == 'ScrollBar') {
ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
Text().width(20).height(20).borderRadius(10)
}.width(20).commonStyle()
} else if (this.targetView == 'Stepper') {
Stepper() {
StepperItem() {
Column() {
Text('Page One')
}
}
}.commonStyle()
} else if (this.targetView == 'Search') {
Search({ placeholder: 'Type to search...' })
.searchButton('SEARCH')
.commonStyle()
} else if (this.targetView == 'Select') {
Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
{ value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
} else if (this.targetView == 'Slider') {
Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical })
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.commonStyle()
} else if (this.targetView == 'Text') {
Text('text').fontColor(Color.White).fontSize(30).commonStyle()
} else if (this.targetView == 'TextArea') {
TextArea({ placeholder: 'TextArea', }).commonStyle()
} else if (this.targetView == 'TextClock') {
TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
} else if (this.targetView == 'TextInput') {
TextInput({ placeholder: 'TextInput' }).commonStyle()
} else if (this.targetView == 'TextPicker') {
TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle()
} else if (this.targetView == 'TextTimer') {
TextTimer({ count: 30000 }).commonStyle()
} else if (this.targetView == 'TimePicker') {
TimePicker().commonStyle()
} else if (this.targetView == 'Toggle') {
Toggle({ type: ToggleType.Switch }).commonStyle()
} else if (this.targetView == 'Badge') {
Badge({
value: '',
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Button('BadgeContent')
}.commonStyle()
} else if (this.targetView == 'Column') {
Column().commonStyle()
} else if (this.targetView == 'Counter') {
Counter() {
Text('1')
}.commonStyle()
} else if (this.targetView == 'Flex') {
Flex().commonStyle()
} else if (this.targetView == 'GridRow') {
GridRow({
columns: 5,
direction: GridRowDirection.Row
}) {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row().width('100%').height('20vp')
}
}.commonStyle()
} else if (this.targetView == 'Grid') {
Grid() {
GridItem() {
Text()
.width('100%').height('100%').textAlign(TextAlign.Center)
}
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.commonStyle()
} else if (this.targetView == 'List') {
List({ space: 20, initialIndex: 0 }) {
ListItem() {
Text('')
.width('100%')
.textAlign(TextAlign.Center)
}
}
.listDirection(Axis.Vertical)
.commonStyle()
} else if (this.targetView == 'Navigator') {
Navigator({ target: 'MainAbility/pages/index/Index' }) {
Text('Navigator Go to index page')
.width('100%').textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'RelativeContainer') {
RelativeContainer() {
Row()
.width(100)
.height(100)
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
}.commonStyle()
} else if (this.targetView == 'Row') {
Row().commonStyle()
} else if (this.targetView == 'Panel') {
Panel(true) {
Column() {
Text('Panel')
}
}
.mode(PanelMode.Half)
.commonStyle()
} else if (this.targetView == 'Refresh') {
Refresh({ refreshing: true }) {
Text('Refresh').fontSize(30)
}
.commonStyle()
} else if (this.targetView == 'Scroll') {
Scroll() {
Column() {
Text('Scroll')
.width('90%')
.height(10)
.textAlign(TextAlign.Center)
}.width('100%')
}
.scrollBar(BarState.On)
.commonStyle()
} else if (this.targetView == 'SideBarContainer') {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
Column({ space: 5 }) {
Image($r('app.media.icon')).width(64).height(64)
Text('Index0').fontSize(25)
}
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
Column() {
Text('SideBarContainer content').fontSize(25)
}
}.commonStyle()
} else if (this.targetView == 'Stack') {
Stack() {
Text('Stack').fontColor(Color.White)
}.commonStyle()
} else if (this.targetView == 'Swiper') {
Swiper() {
Text('Swiper').width('90%').height(160)
}.commonStyle()
} else if (this.targetView == 'Tabs') {
Tabs() {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}
}.commonStyle()
} else if (this.targetView == 'WaterFlow') {
WaterFlow() {
FlowItem() {
Column() {
Text('WaterFlow').fontSize(12).height('16')
Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
}
}
}.commonStyle()
} else if (this.targetView == 'Circle') {
Circle({ width: 150, height: 150 }).commonStyle()
} else if (this.targetView == 'Ellipse') {
Ellipse({ width: 150, height: 80 }).commonStyle()
} else if (this.targetView == 'Line') {
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.stroke(Color.Black)
.commonStyle()
} else if (this.targetView == 'Polyline') {
Polyline({ width: 100, height: 100 })
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Polygon') {
Polygon()
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
.commonStyle()
} else if (this.targetView == 'Path') {
Path()
.commands('M0 100 A30 20 20 0 0 200 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
.commonStyle()
} else if (this.targetView == 'Rect') {
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
.stroke(Color.Transparent)
.commonStyle()
} else if (this.targetView == 'Shape') {
Shape() {
Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z')
}
.viewPort({ x: -20, y: -5, width: 310, height: 90 })
.fill(0x317AF7)
.stroke(0xEE8443)
.strokeWidth(10)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeMiterLimit(5)
.commonStyle()
} else if (this.targetView == 'ColumnSplit') {
ColumnSplit() {
Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.commonStyle()
.borderWidth(1)
} else if (this.targetView == 'RowSplit') {
RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
}.commonStyle()
} else if (this.targetView == 'Blank') {
Blank().commonStyle()
}
}
build() {
Column() {
if (this.targetView == 'GridCol') {
GridRow({ columns: 3 }) {
GridCol({ span: 1 }) {
Row().width('100%').height('20vp')
}.width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey)
GridCol({ span: 1 }) {
Row().width('100%').height('20vp')
}.width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey)
.flexGrow(this._compareFlexGrow)
GridCol({ span: 1 }) {
Row().width('100%').height('20vp')
}.commonStyle()
}
.width(this._parentWidth)
.height(this._parentHeight)
.backgroundColor(Color.Green)
} else {
//For different parent Component
if (this.containerView == 'Row') {
Row() {
Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey)
Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey)
.flexGrow(this._compareFlexGrow)
this.buildTargetView();
}
.width(this._parentWidth)
.height(this._parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'Column') {
Column() {
Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey)
Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey)
.flexGrow(this._compareFlexGrow)
this.buildTargetView();
}
.width(this._parentWidth)
.height(this._parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRow') {
Flex({ direction: FlexDirection.Row }) {
Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey)
Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey)
.flexGrow(this._compareFlexGrow)
this.buildTargetView();
}
.width(this._parentWidth)
.height(this._parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexRowReverse') {
Flex({ direction: FlexDirection.RowReverse }) {
Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey)
Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey)
.flexGrow(this._compareFlexGrow)
this.buildTargetView();
}
.width(this._parentWidth)
.height(this._parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumn') {
Flex({ direction: FlexDirection.Column }) {
Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey)
Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey)
.flexGrow(this._compareFlexGrow)
this.buildTargetView();
}
.width(this._parentWidth)
.height(this._parentHeight)
.backgroundColor(Color.Green)
} else if (this.containerView == 'FlexColumnReverse') {
Flex({ direction: FlexDirection.ColumnReverse }) {
Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey)
Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey)
.flexGrow(this._compareFlexGrow)
this.buildTargetView();
}
.width(this._parentWidth)
.height(this._parentHeight)
.backgroundColor(Color.Green)
}
}
}.backgroundColor(Color.Yellow).width('100%').height('100%').alignItems(HorizontalAlign.Start)
}
}
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/markAnchor/MarkAnchorPage.ets
浏览文件 @ 24502167
...@@ -38,7 +38,7 @@ struct MarkAnchor { ...@@ -38,7 +38,7 @@ struct MarkAnchor {
@State subassemblyHeight: number = router.getParams() ? router.getParams()['view']['subassemblyHeight'] : 0 @State subassemblyHeight: number = router.getParams() ? router.getParams()['view']['subassemblyHeight'] : 0
onPageShow() { onPageShow() {
console.info('[ButtonDimensionsOne] page show called ') console.info('[MarkAnchor] page show called ')
//Register data change call back. //Register data change call back.
attrsManager.registerDataChange(value => this._markAnchor = value) attrsManager.registerDataChange(value => this._markAnchor = value)
......
arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/offset/OffsetPage.ets
浏览文件 @ 24502167
...@@ -42,7 +42,7 @@ struct Offset { ...@@ -42,7 +42,7 @@ struct Offset {
router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
onPageShow() { onPageShow() {
console.info('[ButtonDimensionsOne] page show called ') console.info('[Offset] page show called ')
//Register data change call back. //Register data change call back.
attrsManager.registerDataChange(value => this._offset = value) attrsManager.registerDataChange(value => this._offset = value)
......
arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/List.test.ets
浏览文件 @ 24502167
...@@ -15,6 +15,9 @@ ...@@ -15,6 +15,9 @@
import defaultTest from './default/DefaultTest.test'; import defaultTest from './default/DefaultTest.test';
import defaultFocusValueTest from './default/DefaultFocusValueTest.test';
import defaultFlexTest from './default/DefaultFlexTest.test';
import defaultFlexByGridRowTest from './default/DefaultFlexByGridRowTest.test';
import marginStringTest from './margin/MarginStringTest.test'; import marginStringTest from './margin/MarginStringTest.test';
import alignRulesTest from './alignRules/AlignRulesTest.test'; import alignRulesTest from './alignRules/AlignRulesTest.test';
import positionTest from './position/PositionTest.test'; import positionTest from './position/PositionTest.test';
...@@ -33,9 +36,50 @@ import marginTest from './margin/MarginTest.test'; ...@@ -33,9 +36,50 @@ import marginTest from './margin/MarginTest.test';
import widthTest from './width/WidthTest.test'; import widthTest from './width/WidthTest.test';
import heightTest from './height/HeightTest.test'; import heightTest from './height/HeightTest.test';
import sizeTest from './size/SizeTest.test'; import sizeTest from './size/SizeTest.test';
import responseRegionTest from './responseRegion/ResponseRegionTest.test';
import visibilityTest from './visibility/VisibilityTest.test';
import aspectRatioWidthTest from './aspectRatio/AspectRatioWidthTest.test';
import aspectRatioHeightTest from './aspectRatio/AspectRatioHeightTest.test';
import displayPriorityTest from './displayPriority/DisplayPriorityTest.test';
import onAppearTest from './onAppear/OnAppearTest.test';
import onDisAppearTest from './onDisAppear/OnDisAppearTest.test';
import onAreaChangeTest from './onAreaChange/OnAreaChangeTest.test';
import onVisibleAreaChangeTest from './onVisibleAreaChange/OnVisibleAreaChangeTest.test';
import focusableTest from './focusable/FocusableTest.test';
import tabIndexTest from './tabIndex/TabIndexTest.test';
import defaultFocusTest from './defaultFocus/DefaultFocusTest.test';
import groupDefaultFocusTest from './groupDefaultFocus/GroupDefaultFocusTest.test';
import focusOnTouchTest from './focusOnTouch/FocusOnTouchTest.test';
import focusControlTest from './focusControl/FocusControlTest.test';
import focusableDefaultTest from './focusableDefault/FocusableDefaultTest.test';
import enabledTest from './enabled/EnabledTest.test';
import alignSelfTest from './flex/AlignSelfTest.test';
import flexShrinkTest from './flex/FlexShrinkTest.test';
import flexGrowTest from './flex/FlexGrowTest.test';
import flexBasisTest from './flex/FlexBasisTest.test';
import hitTestBehaviorTest from './hitTestBehaviorTest/HitTestBehaviorTest.test';
import alignSelfStretchNoSizeTest from './flex/AlignSelfStretchNoSizeTest.test';
import alignSelfStretchTest from './flex/AlignSelfStretchTest.test';
import alignSelfGridRowTest from './flex/AlignSelfGridRowTest.test';
import gridOffsetTest from './gridOffset/GridOffsetTest.test';
import gridSpanTest from './gridSpan/GridSpanTest.test';
import zIndexTest from './zIndex/ZIndexTest.test';
import useSizeTypeTest from './useSizeType/UseSizeTypeTest.test';
import touchableTest from './touchable/TouchableTest.test';
import stateStylesTest from './stateStyles/StateStylesTest.test';
export default function testsuite() { export default function testsuite() {
defaultTest(); defaultTest();
defaultFocusValueTest();
defaultFlexTest();
defaultFlexByGridRowTest();
aspectRatioWidthTest();
aspectRatioHeightTest();
displayPriorityTest();
onAppearTest();
onDisAppearTest();
onAreaChangeTest();
onVisibleAreaChangeTest();
positionTest(); positionTest();
markAnchorTest(); markAnchorTest();
offsetTest(); offsetTest();
...@@ -54,4 +98,28 @@ export default function testsuite() { ...@@ -54,4 +98,28 @@ export default function testsuite() {
paddingBaseTest(); paddingBaseTest();
paddingContainerLengthTest(); paddingContainerLengthTest();
paddingBaseLengthTest(); paddingBaseLengthTest();
visibilityTest();
responseRegionTest();
focusableTest();
tabIndexTest();
defaultFocusTest();
groupDefaultFocusTest();
focusOnTouchTest();
focusControlTest();
focusableDefaultTest();
enabledTest();
flexBasisTest();
flexGrowTest();
flexShrinkTest();
alignSelfTest();
// alignSelfGridRowTest();
// alignSelfStretchTest();
// alignSelfStretchNoSizeTest();
hitTestBehaviorTest();
zIndexTest();
gridSpanTest();
gridOffsetTest();
useSizeTypeTest();
touchableTest();
stateStylesTest();
} }
\ No newline at end of file
arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioHeightTest.test.ets 0 → 100644
浏览文件 @ 24502167
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Utils from '../../MainAbility/common/Utils';
import CommonTest from '../common/CommonTest';
import { describe, expect } from '@ohos/hypium';
export default function aspectRatioHeightTest() {
//Component to be tested
let supportView = [
'AlphabetIndexer',
//'Blank',
'Button',
'Checkbox',
'CheckboxGroup',
'DataPanel',
'DatePicker',
'Divider',
'Gauge',
'Image',
'ImageAnimator',
'LoadingProgress',
'Marquee',
'Menu',
'MenuItem',
//'MenuItemGroup',
'Navigation',
'NavRouter',
'Progress',
'QRCode',
'Radio',
'Rating',
'ScrollBar',
'Search',
'Select',
'Slider',
//'Stepper',
//'StepperItem',
'Text',
'TextArea',
'TextClock',
'TextInput',
'TextPicker',
'TextTimer',
'TimePicker',
'Toggle',
'Badge',
'Column',
'ColumnSplit',
//'Counter',
'Flex',
'FlowItem',
'GridRow',
//'GridCol',
'Grid',
'GridItem',
'List',
'ListItem',
'Navigator',
'Panel',
'Refresh',
'RelativeContainer',
'Row',
'RowSplit',
'Scroll',
'SideBarContainer',
'Stack',
'Swiper',
'Tabs',
'WaterFlow',
'Circle',
'Ellipse',
'Line',
'Polyline',
'Polygon',
'Path',
'Rect',
'Shape'
]
//Custom params.
let parentWidth = 300;
let parentHeight = 600;
let pageConfig = {
testName: 'testAspectRatioHeight',
pageName: 'AspectRatioHeightPage',
pageUrl: 'MainAbility/pages/aspectRatio/AspectRatioHeightPage',
targetGroupView: 'targetGroupView',
parentWidth: parentWidth,
parentHeight: parentHeight
}
//Test content and expected results
let testValues = [{
describe: 'SetNumber',
setValue: {
height: 100,
aspectRatio: 2.0
},
expectValue: {
height: '100.00vp',
heightValue: vp2px(100),
aspectRatio: 2.0
}
}, {
describe: 'SetDecimal',
setValue: {
height: 100,
aspectRatio: 0.5
},
expectValue: {
height: '100.00vp',
heightValue: vp2px(100),
aspectRatio: 0.5
}
}]
describe('AspectRatioHeightTest', () => {
CommonTest.initTest(pageConfig, supportView, testValues, async data => {
//Gets Rect information for the target component
let targetRect = Utils.getComponentRect(data.pageConfig.componentKey);
let targetRectWidth = targetRect.right - targetRect.left;
let targetRectHeight = targetRect.bottom - targetRect.top;
let targetRectAspectRatio = targetRectWidth / targetRectHeight;
console.info('[' + data.caseTag + '] data.viewObj.$attrs.height is:' + data.viewObj.$attrs.height);
console.info('[' + data.caseTag + '] data.viewObj.$attrs.aspectRatio is:' + data.viewObj.$attrs.aspectRatio);
//Check height and aspectRatio are set successfully
expect(data.viewObj.$attrs.height).assertEqual(data.testValue.expectValue.height);
expect(data.viewObj.$attrs.aspectRatio).assertEqual(data.testValue.expectValue.aspectRatio);
console.info('[' + data.caseTag + '] targetRectWidth is:' + targetRectWidth);
console.info('[' + data.caseTag + '] targetRectHeight is:' + targetRectHeight);
console.info('[' + data.caseTag + '] targetRectAspectRatio:' + targetRectAspectRatio);
//Check the width, height, and aspectRatio are correct
expect(targetRectHeight).assertEqual(data.testValue.expectValue.heightValue);
expect(Number(targetRectAspectRatio).toFixed(2))
.assertEqual(Number(data.testValue.expectValue.aspectRatio).toFixed(2));
expect(targetRectWidth)
.assertEqual(data.testValue.expectValue.heightValue * data.testValue.expectValue.aspectRatio);
});
})
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或