目录
使用组件及属性方法布局歌曲列表
先整体，再局部先布局，再内容，后美化
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])
}
}预览效果
总结
