用常用组件感恩父亲节

效果

鸿蒙应用开发用常用组件感恩父亲节_Stack

本次我们主要通过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%')
  }
}

完毕。