【逐日学点HarmonyOS Next知识】tab对齐、相对结构、自定义弹窗全屏、动画
1、HarmonyOS Tabs 是否能支持 tabbar 居左对齐？当前方案为自定义tabbar实现，示例demo：
@Entry
@Component
struct TabsExample {
@State tabArray: Array<number> =
@State focusIndex: number = 0
@State pre: number = 0
@State index: number = 0
private controller: TabsController = new TabsController()
@State test: boolean = false
// 单独的页签
@Builder
Tab(tabName: string, tabItem: number, tabIndex: number) {
Row({ space: 20 }) {
Text(tabName).fontSize(18)
.fontColor(tabItem===this.focusIndex?Color.Red:Color.Black)
}
.justifyContent(FlexAlign.Center)
.constraintSize({ minWidth: 35 })
.width(80)
.height(60)
.borderRadius({ topLeft: 10, topRight: 10 })
.onClick(() => {
this.controller.changeIndex(tabIndex)
this.focusIndex = tabIndex
})
}
build() {
Column() {
Column() {
// 页签
Row({ space: 7 }) {
Scroll() {
Row() {
ForEach(this.tabArray, (item: number, index: number) => {
this.Tab("页签 " + item, item, index)
})
}
.justifyContent(FlexAlign.Start)
}
.align(Alignment.Start)
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.width('90%')
}
.alignItems(VerticalAlign.Bottom)
.width('100%')
}
.alignItems(HorizontalAlign.Start)
.width('100%')
//tabs
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.tabArray, (item: number, index: number) => {
TabContent() {
Text('我是页面 ' + item + " 的内容")
.height(300)
.width('100%')
.fontSize(30)
}
.backgroundColor(Color.Pink)
})
}
.width('100%')
.barHeight(0)
.animationDuration(100)
.onChange((index: number) => {
console.log('foo change')
this.focusIndex = index})
}
.height('100%')
}
}
2、HarmonyOS RelativeContainer中alignRules的bias属性设置无效？
参考demo：
@Entry
@Component
struct Index {
build() {
Row() {
RelativeContainer() {
Row().width(100).height(100)
.backgroundColor("#FF3333")
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
bottom : {anchor : "__container__", align : VerticalAlign.Bottom},
left: {anchor: "__container__", align: HorizontalAlign.Start},
right : {anchor : "__container__", align: HorizontalAlign.End},
bias : {vertical : 0.3}
})
.id("row1")
}
.width(300).height(300)
.margin({left: 50})
.border({width:2, color: "#6699FF"})
}
.height('100%')
}
}
3、HarmonyOS 自定义弹框不能全屏？
参考demo：
@CustomDialog
export struct MyDialog1 {
controller1: CustomDialogController
title: string = ''
build() {
Row() {
Column({ space: 10 }) {
Text(this.title).fontSize(25)
.fontColor(Color.Blue)
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('取消')
.onClick(() => {
this.controller1.close()
})
.backgroundColor(0xffffff)
.fontColor(Color.Black)
Button('确认')
.onClick(() => {
this.controller1.close()
})
.backgroundColor(0xffffff)
.fontColor(Color.Black)
}
.width('100%')
}
.width('100%')
.backgroundColor(Color.Gray).height('100%')
}
}
}
// main页面
@Entry
@Component
struct Index {
@State dialogData: string = ''
@State colorTest: Color = Color.Blue
dialogController1: CustomDialogController = new CustomDialogController({
builder: MyDialog1({
title: '弹窗1',
}),
// 弹窗容器样式是否自定义
customStyle: true,
offset: { dx: 0, dy: 0 },
alignment: DialogAlignment.Top
})
confirm(data: string) {
this.dialogData = data
console.info('ssss') // 获取弹窗输入的信息
}
build() {
Row() {
Column({ space: 10 }) {
Text('这是一个弹窗的测试')
.fontSize(25).margin(20).fontColor(0x3399FF)
Button('点击打开弹窗')
.onClick(() => {
this.dialogController1.open()
})
}.width('100%')
}.height('100%').backgroundColor(Color.White)
}
}
4、HarmonyOS 如何实现动画集合？
组件A缩放&旋转动画1S后，再次缩放&旋转，再过4s再次缩放&旋转，再过1s缩放&旋转这4个为一个集合，这个集合一直实行。这种怎么实现。
利用关键帧动画可以实现keyframeAnimateTo参考demo：
import { UIContext } from '@ohos.ArkUI.UIContext';
@Entry
@Component
struct Index {
@State myScale: number = 1.0;
uiContext: UIContext | undefined = undefined;
aboutToAppear() {
this.uiContext = this.getUIContext?.();
}
build() {
Column() {
Circle()
.width(100)
.height(100)
.fill("#46B1E3")
.margin(100)
.scale({ x: this.myScale, y: this.myScale })//设置x轴/y轴的缩放
.onClick(() => {
if (!this.uiContext) {
console.info("no uiContext, keyframe failed");
return;
}
this.myScale = 1;
// 设置关键帧动画整体播放3次
this.uiContext.keyframeAnimateTo({ iterations: 3 }, [
{
// 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画
duration: 800,
event: () => {
this.myScale = 1.5;
}
},
{
// 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画
duration: 500,
event: () => {
this.myScale = 1;
}
}
]);
})
}.width('100%').margin({ top: 5 })
}
}
5、HarmonyOS 回到桌面API咨询？
APP中有功能会引导用户回到桌面添加服务卡片，是否有API可以触发回到桌面。
窗口里有minimize方法，这个接口会通知ams窗口退后台，来实现app回到后台的结果 参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#minimize11
minimize(callback: AsyncCallback<void>): void
此接口根据调用对象不同，实现不同的功能：
[*] 当调用对象为主窗口时，实现最小化功能，可在Dock栏中还原。
[*] 当调用对象为子窗口时，实现隐蔽功能，不可在Dock栏中还原，可以利用showWindow()举行还原。悬浮窗类型的窗口对象，调用此接口会报1300002错误码。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]