We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
列表(List)是一种复杂容器,具备下列特点:
List({ space: 10 }) { ForEach([1, 2, 3, 4], item => { ListItem() { Text('ListItem') } }) } .width('100%') .listDirection(Axis.Vertical)
space:列表项间距。
ListItem:列表项。它本身不是一个容器,代表 List 内部的一个项,需要把各种布局组件(Text、Button 等)写在 ListItem 里。因为 ListItem 内部只能包含一个根组件,所以如果要写多个组件,需要将组件包到 Row 或 Colum 容器里。
ListItem() { Row() { ... } }
listDirection:列表方向,默认纵向。
Axis.Vertical // 纵向 Axis.Horizontal // 横向
class Item { name: string image: ResourceStr box_office: string constructor(name: string, image: ResourceStr, box_office: string) { this.name = name this.image = image this.box_office = box_office } }
@Entry @Component struct Index { private items: Array<Item> = [ { name: '热辣滚烫', image: $r('app.media.1'), box_office: '23.41亿' }, { name: '飞驰人生2', image: $r('app.media.2'), box_office: '20.46亿' }, { name: '熊出没·逆转时空', image: $r('app.media.3'), box_office: '11.82亿' }, { name: '第二十条', image: $r('app.media.4'), box_office: '10.41亿' }, { name: '我们一起摇太阳', image: $r('app.media.5'), box_office: '9618.7万' }, { name: '红毯先生', image: $r('app.media.6'), box_office: '7884.5万' } ] build() { Column({ space: 8 }) { Row() { Text('2024春节档新片票房榜') .fontSize(30) .fontWeight(FontWeight.Bold) } List({ space: 8 }) { ForEach( this.items, (item: Item) => { ListItem() { Row({ space: 8 }) { Image(item.image) .width(157) .height(220) Column() { Text(item.name) .fontSize(20) .fontWeight(FontWeight.Bold) Text(item.box_office) .fontSize(18) } .height('100%') .alignItems(HorizontalAlign.Start) } .width('100%') .height(220) } } ) } .width('100%') .height('100%') } .width('100%') .height('100%') .padding(8) } }
运行效果:
The text was updated successfully, but these errors were encountered:
No branches or pull requests
List
列表(List)是一种复杂容器,具备下列特点:
语法
space:列表项间距。
ListItem:列表项。它本身不是一个容器,代表 List 内部的一个项,需要把各种布局组件(Text、Button 等)写在 ListItem 里。因为 ListItem 内部只能包含一个根组件,所以如果要写多个组件,需要将组件包到 Row 或 Colum 容器里。
listDirection:列表方向,默认纵向。
示例代码
运行效果:
![列表布局](https://private-user-images.githubusercontent.com/13990136/305269661-5011da7b-4601-467c-b2a0-e6a1a72a76f1.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjU4NTcsIm5iZiI6MTcyNjE2NTU1NywicGF0aCI6Ii8xMzk5MDEzNi8zMDUyNjk2NjEtNTAxMWRhN2ItNDYwMS00NjdjLWIyYTAtZTZhMWE3MmE3NmYxLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE4MjU1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc1MWMzZmMwMzFkNzExNDZhMzc5OGIwMGJjY2EwNDc0ZjFkOGRlYWU2MTI3ODM4ZmNkNzA1ZDM4MDQ0ZTNkMjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0._FVyGJqWy0Wm1rKNqMdSbKeJx2Hi2XwWL3cr8R7wkDs)
The text was updated successfully, but these errors were encountered: