用常用组件感恩父亲节
效果
本次我们主要通过Image组件,Text组件,Stack组件,实现上图的效果
Stack
Stack组件作为堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
Text
显示一段文本的组件。
Image
Image为图片组件,常用于在应用中显示图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源,支持png、jpg、jpeg、bmp、svg、webp和gif类型的图片格式。
完整代码
/**
*
* @author: 坚果派
* @date: 2024/6/16
* website:nutpi.com.cn
* @organization:坚果派
*/
@Entry
@Component
struct FatherPage {
build() {
Stack({ alignContent: Alignment.Bottom }) {
Image($r("app.media.father"))
.enableAnalyzer(true)
Text("坚果派")
.fontSize(50)
.fontColor(Color.White)
.width('50%')
.height('18%')
.align(Alignment.Center)
Text("电话:17752170152")
.fontSize(30)
.fontColor(Color.White)
.align(Alignment.Center).padding({
top: 10
})
}
.height('100%')
.width('100%')
}
}
完毕。