Component

除Swiper轮播组件外,其他滚动组件均只能包含一个组件List - 使用ListItem()Grid - 使用GridItem()Scroll - 加Column()WaterFlow - 使用FlowItem()EntryComponent// Swiper轮播组件struct Index {build() {Column(){Swiper(){ForEach(Array.from({length:10}),(item:string,index:number){Text(${index1}).textAlign(TextAlign.Center)})}.width(100%).height(100%)}}}// List列表组件struct Index {// arr:number[] [1,2,3,4,5,6,7,8,9,10]arr:Arraynumber [1,2,3,4,5,6,7,8,9,10]build() {Column(){List(){ForEach(this.arr,(item:number,index:number){ListItem(){Text(${item}).fontSize(14).width(50%).fontColor(Color.Black).textAlign(TextAlign.Center).height(180).borderRadius(3)}})}.alignListItem(ListItemAlign.Center)}.width(100%).height(100%)}}// Scroll滚动组件struct Index {// arr:number[] [1,2,3,4,5,6,7,8,9,10]arr: Arraynumber [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]build() {Column() {Scroll() {Column() {ForEach(this.arr, (item: number, index: number) {Text(${item}).fontSize(14).width(50%).fontColor(Color.Black).textAlign(TextAlign.Center).height(180).borderRadius(3)})}}}.width(100%).height(100%)}}// WaterFlow瀑布流struct Index {build() {Column() {Text(瀑布流演示).fontSize(20).margin(10)WaterFlow() {ForEach(Array.from({ length: 15 }),(item: undefined, index: number) {FlowItem() {Text(卡片\n (index 1)).width(100%).height(120 index % 3 * 50).backgroundColor(#E8F5E8).textAlign(TextAlign.Center).borderRadius(12).margin(5)}})}.width(100%).height(80%)}.width(100%).height(100%).padding(10).backgroundColor(#f5f5f5)}}// Gridstruct Index {build() {Column() {Grid() {ForEach(Array.from({ length: 30 }), (item: undefined, index: number) {GridItem() {Text(${index 1}).width(100%).height(100).backgroundColor(#87CEEB).textAlign(TextAlign.Center).borderRadius(8).margin(4)}})}.columnsTemplate(1fr).rowsGap(8).columnsGap(8).width(100%).height(80%)}.width(100%).height(100%).padding(10)}}