中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
有没有适老化的最佳实践或demo,在系统设置中调大字体后,应用内的布局将非常丑陋。希望有一个最大和最小的字号,无论用户怎么调整,字号只会在这两个值范围内变化。maxFontSize和minFontSize配合maxLine并不起作用。
微信扫码分享
// xxx.ets import measure from '@ohos.measure' @Entry @Component struct TextInputExample { @State text: string = '' @State truncatedHint: string = "文本未截断" controller: TextInputController = new TextInputController() build() { Column() { TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) .placeholderColor(Color.Grey) .placeholderFont({ size: 14, weight: 400 }) .caretColor(Color.Blue) .width(400) .height(40) .margin(20) .fontSize(14) .fontColor(Color.Black) .onChange((value: string) => { this.text = value let textSizeShow1 : SizeOptions = measure.measureTextSize({ textContent: this.text, constraintWidth: 100, fontSize: 14, overflow: TextOverflow.Ellipsis, maxLines: 2 }) let textSizeShow2 : SizeOptions = measure.measureTextSize({ textContent: this.text + " ", constraintWidth: 100, fontSize: 14, overflow: TextOverflow.Ellipsis, maxLines: 2000000 }) console.log("tag textSizeShow1.height="+ textSizeShow1.height); console.log("tagtextSizeShow2.height="+ textSizeShow2.height); if (textSizeShow2 && textSizeShow1 && textSizeShow2?.height && textSizeShow1?.height && (textSizeShow2?.height > textSizeShow1?.height)) { console.log("tag 文本截断") this.truncatedHint = "文本截断" } else { console.log("tag文本未截断") this.truncatedHint = "文本未截断" } }) Text(this.text) .maxLines(2) .width(100) .textOverflow({overflow: TextOverflow.Ellipsis}) .border({ width: 1 }) .minFontSize(14) .maxFontSize(24) Text(this.truncatedHint) }.width('100%') } }