当前位置：首页 > news >正文

鸿蒙ArkUI 基础篇-12-List/ListItem-界面布局案例歌曲列表

news 2025/9/2 17:20:13

使用组件及属性方法布局歌曲列表

DevEco Studio代码实战

预览效果

总结

使用组件及属性方法布局歌曲列表

先整体，再局部

先布局，再内容，后美化

DevEco Studio代码实战

@Entry
@Component
struct Index {build() {Column() {Text('猜你喜欢').fontColor('#fff')// .width("100%") //双引号和单引号 都可以.width('100%').margin({bottom: 10})List() {ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}ListItem(){Row() {// 图Image($r('app.media.3')).width(80).border({radius: 8}).margin({right: 10})// 字Column() {Text('奢香夫人').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom: 15})Row() {Text('VIP').fontColor('#9A8E28').border({ width: 1, color: '#9A8E28', radius: 12}).padding({left: 5, right: 5, top: 3, bottom: 3}).margin({right: 10})Text('凤凰传奇').fontColor('#696969')}.width('100%')}.layoutWeight(1)// 更多Image($r('app.media.ic_more')).width(24).fillColor('#FEFEFE')}.width('100%').height(80)// .backgroundColor(Color.Pink).margin({bottom: 10})}}.scrollBar(BarState.Off)}.width('100%').height('100%').backgroundColor('#131313').padding({left: 10, right: 10})// 扩充组件安全区域.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])}
}