使用List组件构建列表

使用List构建的一个页面效果如下：

Xnip2024-02-22_17-25-57.jpg

页面构建分为4个部分实现：

model

//定义列表数据对象
export default class ItemData {
  title: Resource;
  img?: Resource;
  others?: Resource;

  constructor(title: Resource, img?: Resource, others?: Resource) {
    this.title = title;
    this.img = img;
    this.others = others;
  }
}

viewModel

使用viewModel中编写数据源相关的代码：

import ItemData from './ListModel';

//创建列表数据数组
export class MainViewModel {
  getSettingListData(): Array<ItemData> {
    let settingListData: ItemData[] = [
      new ItemData($r('app.string.listName_news'), $r('app.media.ic_ok'), $r('app.media.ic_ok')),
      new ItemData($r('app.string.listName_menu'), $r('app.media.ic_default'), null),
      new ItemData($r('app.string.listName_data'), $r('app.media.app_icon'), null),
    ];
    return settingListData;
  }
}

// export default new MainViewModel();

view

需要用到的组件封装成类，添加@Component装饰器修饰，因为不是Page，所以不需要@Entry

page

import { ToolType } from '@ohos.multimodalInput.touchEvent';
import ItemData from './ListModel';
import { MainViewModel } from './ListViewModel';

@Entry
@Component
struct ListPage {
  mainViewModel: MainViewModel = new MainViewModel();

  @Builder settingCell(item: ItemData) {
    Row() {
      Row({ space: 12 }) {
        Image(item.img)
          .size({ width: 30, height: 30 })
        Text(item.title)
      }

      if (item.others == null) {
        Image($r('app.media.ic_default'))
          .size({ width: 30, height: 30 })
      } else {
        Toggle({ type: ToggleType.Switch, isOn: false })
      }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
  }

  build() {
    List() {
      ForEach( //使用ForEach迭代
        this.mainViewModel.getSettingListData(),
        (item: ItemData) => {
          ListItem() {
            this.settingCell(item)
          }
        },
        item => JSON.stringify(item)
      )
    }
    .divider({ strokeWidth: 1 })
    .padding(20)
  }
}

ForEach迭代

使用循环渲染（ForEach）遍历数组的方式构建列表。这样可以避免一个一个全部罗列出来，简化代码。

直接采用循环渲染方式，会一次性加载所有的列表元素，从而导致页面启动时间过长，影响用户体验，需要使用更高级的做法使性能优化：使用数据懒加载

使用Grid组件构建网格布局

import router from '@ohos.router';

@Entry
@Component
struct GridPage {
  private arr: string[] = new Array(30).fill('').map((_, index) => `item ${index}`);

  build() {
    Column() {
      Grid() {
        ForEach(this.arr,
          (item: string) => {
            GridItem() {
              Text(item)
                .fontSize(16)
                .fontColor(Color.White)
                .backgroundColor(0x007def)
                .width('100%')
                .textAlign(TextAlign.Center)
                .height(100)
                .onClick(() => {
                  router.back();
                })
            }
          }, item => item
        )
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height(300)
      .backgroundColor(Color.Green)
    }
    .width('100%')
    .padding(12)
    .backgroundColor('0xf1f3f5')
  }
}

效果如下：

Xnip2024-02-22_17-27-54.jpg

使用Tabs构建页签

Xnip2024-02-22_17-30-13.jpg

import router from '@ohos.router';

@Entry
@Component
struct TabPage {
  private controller: TabsController = new TabsController();
  @State currentIndex: number = 0;

  @Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex == index ? selectedImg : normalImg)
        .size({ width: 30, height: 30 })
      Text(title)
        .fontColor(this.currentIndex == index ? '#1698ce' : '#6b6b6b')
    }.onClick(() => {
      this.currentIndex = index;
      this.controller.changeIndex(index);
    })
  }

  build() {
    Column() {
      //底部
      //顶部
      //左侧

      // 页签容器组件Tabs
      Tabs({ barPosition: BarPosition.End,
        controller: this.controller }) {

        TabContent() {
          Home() //页面内容
          //The component 'TabContent' can only have a single child component.
          //Column().width('100%').height('100%').backgroundColor(Color.Green)
        }
        .tabBar(this.TabBuilder('首页', 0, $r('app.media.ic_ok'), $r('app.media.ic_default')))

        TabContent() {
          Mine()
        }
        .tabBar(this.TabBuilder('我的', 1, $r('app.media.ic_ok'), $r('app.media.ic_default')))

      }
      //vertical属性用于设置页签的排列方向
      .vertical(false) //当vertical的属性值为false（默认值）时页签横向排列，为true时页签纵向排列。
      .barWidth('100%') //设置TabBar宽度
      .barHeight(60) //设置tabbar高度
      // 当页签比较多的时候，可以滑动页签，下面的示例代码将barMode设置为BarMode.Scrollable
      .barMode(BarMode.Fixed) //布局模式有Fixed（默认）,
      .width('100%') //tabs组件的宽度
      //.height('100%') //tabs组件的高度
      .backgroundColor(Color.White) //tabs组件的背景颜色
      .onChange((index: number) => {
        this.currentIndex = index;
      })
    }
    .width('100%')
    .height('100%')
  }
}


@Component
struct Home {
  build() {
    Column() {
      Text('首页').onClick(() => {
        router.back();
      })
        .align(Alignment.Center)

    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}

@Component
struct Mine {
  build() {
    Text('我的')
  }
}