import promptAction from '@ohos.promptAction'; import {MyBean} from './MyBean' import {Utils} from './Utils' @Entry @Component struct Index { //声明数据集合 datas:MyBean[]=Utils.getData() build() { List({space:10,initialIndex:0}){ ForEach(this.datas,(item:MyBean,index:number)=>{ //设置列表每一行内容 ListItem(){ Row(){ Image(item.pic) .size({width:64,height:64}) Text(item.text) .fontSize(30) .margin({left:20}) } } .size({width:'90%',height:100}) .backgroundColor(Color.White) .borderRadius(10) .margin(10) .onClick(()=>{ promptAction.showToast({message:'index='+index}) }) }) } .backgroundColor('#eeeeee') .alignListItem(ListItemAlign.Center) .width('100%') .padding(10) .divider({strokeWidth:2,color:Color.Green,startMargin:15,endMargin:15}) } }将此代码显示效果改为三个一排,依次往下显示
时间: 2024-02-14 09:07:22 浏览: 28
您可以将原来的 `List` 组件替换为 `GridList` 组件,并设置 `columnCount` 属性为 3,以实现三个一排的布局效果。具体代码如下:
```js
import promptAction from '@ohos.promptAction';
import {MyBean} from './MyBean'
import {Utils} from './Utils'
@Entry
@Component
struct Index {
//声明数据集合
datas:MyBean[]=Utils.getData()
build() {
GridList({
columnCount: 3, // 设置三个一排
space:10,
initialIndex:0
}){
ForEach(this.datas,(item:MyBean,index:number)=>{
//设置列表每一个格子的内容
GridItem(){
Column(){
Image(item.pic)
.size({width:64,height:64})
Text(item.text)
.fontSize(30)
.margin({top:10})
}
.alignItems(Align.Center)
.justifyContent(Justify.Center)
.size({width:'100%',height:'100%'})
.backgroundColor(Color.White)
.borderRadius(10)
.onClick(()=>{
promptAction.showToast({message:'index='+index})
})
}
.size({width:'30%', aspectRatio: 1}) // 设置每一个格子的宽度为 30%,高度自适应
.margin(10)
})
}
.backgroundColor('#eeeeee')
.alignGridItem(GridItemAlign.Center)
.width('100%')
.padding(10)
.divider({strokeWidth:2,color:Color.Green,startMargin:15,endMargin:15})
}
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)