本文章向大家介绍4️⃣通过编写计算器学习ArkUI组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
注:转自Tuer白晓明,原文地址:https://ost.51cto.com/posts/10723
本系列文章共有五篇,细致描述了如何学习ArkUI组件实现计算器的功能,以下为正文
3.8 Text
组件
在前面的小节中无论是自定义按钮还是组件示例中都用了Text
组件,用于呈现一段文本信息,描述各自的作用,Text
组件是应用程序中最常见的组件。
3.9 标准计算器显示区
在实战标准计算器设计中,显示区域是上下两个Text
组件,居上Text
显示点击功能按钮区的录入信息,居下Text
显示计算结果。
3.10 使用Column
、Row
容器组件、Button
组件实现功能按钮区
使用前面已经掌握的Column
容器组件、Row
容器组件以及Button
组件实现功能按钮区,代码如下:
// 功能按钮、符号按钮、数字按钮
Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
Column({space: 20}) {
Row({space: 20}) {
Button('MC', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('M+', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('M-', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('MR', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
}
Row({space: 20}) {
Button('C', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('÷', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('×', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('⇐', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
}
Row({space: 20}) {
Button('7', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('8', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('9', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('-', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
}
Row({space: 20}) {
Button('4', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('5', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('6', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('+', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(32).fontColor('#1296DB').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
}
Row({space: 20}) {
Column({space: 20}) {
Row({space: 20}) {
Button('1', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('2', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('3', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
}
Row({space: 20}) {
Button('%', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('0', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
Button('.', {type: ButtonType.Circle})
.width(64).height(64)
.fontSize(32).fontColor('#000').fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
}
}
Column({space: 20}) {
Button('=', {type: ButtonType.Capsule})
.width(64).height(148)
.fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
.backgroundColor('#FFFDFD')
.borderRadius(32)
.shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
}.margin({left: -20})
}
}
.padding({left: 20})
}
.width('100%')
.borderRadius(8)
.backgroundColor('#F2F2F2')
是不是看起来代码很多,每个Button
除了内容,及个别颜色和字体大小不一样之外,其他的都是一样的呢?可以思考以下,如何抽出公用的自定义Button
组件,根据传参不同显示不同的按钮,这部分会在后面的小节中分享。学习之初先是多用,用熟了,才是灵活使用。
思考
在实现功能按钮区的时候,我给Column
容器组件添加了padding({left: 20})
这个属性,其代表什么含义?解决了什么问题?你还有没有其他的方法?
小结
本节先对Text
文本组件的用法做了简单介绍,然后通过之前小节中学习的Column
、Row
、Button
组件实现了标准计算器的功能按钮区。下一小节将带你一起实现标准计算器的计算功能和计算历史留存。
原文地址:https://www.cnblogs.com/zhuwei0904/p/16315199.html