效果展示
知识点
层叠布局
介绍：层叠布局具有较强的 组件层叠 能力。
使用场景：卡片层叠效果
特点：层叠操作 更简洁，编码效率更高。【绝对定位的优势是更灵活】
Stack容器内的子元素顺序是先写的在最下面，即从下到上依次是item1 --> item2 --> item3
语法：
Stack({alignContent: Alignment.Center }) {Item1()Item2()Item3() }布局方位有9个
文字溢出省略号
作用：设置文本超长时的显示方式
语法：
.textOverflow({overflow: TextOverflow.xxx })注意：需要配合
.maxLines(行数)使用
代码展示
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Column() {Stack({ alignContent: Alignment.BottomStart }) {Image($r("app.media.bz_img")).width("100%").borderRadius({topLeft: 20,topRight: 20})Row() {Image($r("app.media.bz_play")).width(20).fillColor("#fff")Text("288万").fontColor("#fff").margin({left: 5,right: 15})Image($r("app.media.bz_msg")).width(20).fillColor("#fff")Text("8655").fontColor("#fff").margin({left: 5})Text("4:33").layoutWeight(1).textAlign(TextAlign.End).fontColor("#fff")}.padding(5)}Column({ space: 10 }) {Text("【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣之歌》").textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2)Row() {Text("19万点赞").padding(4).fontSize(14).fontColor("#DF7D58").backgroundColor("#FDEBE6")Image($r("app.media.bz_more")).width(15).fillColor("#999")}.width("100%").justifyContent(FlexAlign.SpaceBetween)}.padding(10)}.width("80%").borderRadius(20).backgroundColor("#fff")}.padding(20).width("100%").height("100%").linearGradient({angle: 135, // 设置颜色渐变起始角度为顺时针方向45°colors: [[0xceeff2, 0.0],[0xf2e0de, 0.4],[0xFFFFFF, 0.8],]})}
}
