#跟着坚果学鸿蒙#支持适老化 <二>
·
示例
SideBarContainer组件通过长按控制按钮触发适老化弹窗。在系统字体为1倍的情况下,长按控制按钮不能弹窗。在系统字体大于1倍的情况下,长按控制按钮可以弹窗。
@Entry
@Component
struct SideBarContainerExample {
@State currentFontSizeScale: number = 1
normalIcon: Resource = $r("app.media.icon")
selectedIcon: Resource = $r("app.media.icon")
@State arr: number[] = [1, 2, 3]
@State current: number = 1
@State title: string = 'Index01';
build() {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach(this.arr, (item: number) => {
Column({ space: 5 }) {
Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
Text("0" + item)
.fontSize(25)
.fontColor(this.current === item ? '#0A59F7' : '#999')
.fontFamily('source-sans-pro,cursive,sans-serif')
}
.onClick(() => {
this.current = item;
this.title = "Index0" + item;
})
}, (item: string) => item)
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.backgroundColor($r('sys.color.mask_fifth'))
}
.controlButton({
icons: {
hidden: $r('sys.media.ohos_ic_public_drawer_open_filled'),
shown: $r('sys.media.ohos_ic_public_drawer_close')
}
})
.sideBarWidth(150)
.minSideBarWidth(50)
.maxSideBarWidth(300)
.minContentWidth(0)
.onChange((value: boolean) => {
console.info('status:' + value)
})
.divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' })
}
}
切换系统字体前后长按已经支持适老化能力的组件,有如下效果:
系统字体为一倍(适老化能力开启前) | 系统字体为1.75倍(适老化能力开启后) |
---|---|
|
|
TextPickerDialog组件通过设置系统字体大小触发适老化弹窗。在系统字体为1倍的情况下,适老化不触发;在系统字体大于1倍的情况下,适老化触发。
@Entry
@Component
struct TextPickerExample {
private select: number | number[] = 0;
private cascade: TextCascadePickerRangeContent[] = [
{
text: '辽宁省',
children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
{ text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
},
{
text: '吉林省',
children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
{ text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
},
{
text: '黑龙江省',
children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
{ text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
}
]
@State v: string = '';
@State showTriggered: string = '';
private triggered: string = '';
private maxLines: number = 3;
linesNum(max: number): void {
let items: string[] = this.triggered.split('').filter(item => item != '');
if (items.length > max) {
this.showTriggered = items.slice(-this.maxLines).join('');
} else {
this.showTriggered = this.triggered;
}
}
build() {
Column() {
Button("TextPickerDialog.show:" + this.v)
.onClick(() => {
TextPickerDialog.show({
range: this.cascade,
selected: this.select,
onAccept: (value: TextPickerResult) => {
this.select = value.index
console.log(this.select + '')
this.v = value.value as string
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
if (this.triggered != '') {
this.triggered += `onAccept(${JSON.stringify(value)})`;
} else {
this.triggered = `onAccept(${JSON.stringify(value)})`;
}
this.linesNum(this.maxLines);
},
onCancel: () => {
console.info("TextPickerDialog:onCancel()")
if (this.triggered != '') {
this.triggered += `onCancel()`;
} else {
this.triggered = `onCancel()`;
}
this.linesNum(this.maxLines);
},
onChange: (value: TextPickerResult) => {
console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
if (this.triggered != '') {
this.triggered += `onChange(${JSON.stringify(value)})`;
} else {
this.triggered = `onChange(${JSON.stringify(value)})`;
}
this.linesNum(this.maxLines);
},
})
})
.margin({ top: 60 })
}
}
}
系统字体为一倍(适老化能力开启前) | 系统字体为1.75倍(适老化能力开启后) |
---|---|
|
|
更多推荐
所有评论(0)