鸿蒙仓颉语言开发实战教程：实现商品分类页

今天继续为大家带来仓颉语言开发商城应用的实战教程，今天的内容是实现商品分类页。

分类页面要在基本布局的基础上增加一些动态效果，比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。
分类列表
先来看左侧的分类列表，很明显是一个List容器，样式上比较简单，只有一个文本，不过它有个点击状态的切换效果。
在添加组件之前，我们需要先请求到分类的数据，关于仓颉语言的网络请求上一篇文章已经分享过，下面再贴一下分类列表的网络请求具体代码，要注意的是，嵌套数据的修改需要使用ObservedArrayList修饰才能在页面上实时变化：

1. @State var classList:ObservedArrayList<ClassItem> = ObservedArrayList<ClassItem>()
2. let url = CJTools.url + "/api/class.php"
3. let httpRequest = createHttp()
4. let option = HttpRequestOptions(
5.     method: RequestMethod.GET,
6.     expectDataType: HttpDataType.STRING,
7.     header: HashMap<String, String>([("content-type", "application/json")])
8. )
9. this.loading = true
10. httpRequest.request(url, {err, resp =>
11.     if (let Some(e) <- err) {
12.          CJTools.log('error:' + e.message)
13.     }
14.     if (let Some(r) <- resp) {
15.             let str = r.result.toString()
16.             let jValue = JsonValue.fromStr(str)
17.             let jArray = jValue.asArray()
18.             for (i in 0..jArray.size()) {
19.                 var model = DataModel.fromJson(jArray.get(i).getOrThrow().asObject())
20.                 var modelData = match (model) {
21.                 case data: DataModelStruct => data
22.                     case _ => throw Exception("this data is not DataModelStruct")
23.                  }
24.                 let item = ClassItem(String.deserialize(modelData.get('id')), String.deserialize(modelData.get('classname')), String.deserialize(modelData.get('cover')))
25.                 this.classList.append(item)
26.             }
27.         }
28.         this.loading = false
29.         httpRequest.destroy()
30.     },options:option)

复制代码

请求之后最终classList是我们需要的数据，然后在List组件中遍历classList添加组件，仓颉中的循环遍历和ArkTs大不相同：

1. List{
2.     ForEach(
3.     this.classList,
4.     itemGeneratorFunc: {
5.         item: ClassItem, index: Int64 => ListItem {
6.                 if(this.classIndex == index){
7.                     Row(){
8.                     Text(item.getClassname())
9.                     .fontSize(15)
10.                     .fontColor(0x4a4a4a)
11.             }
12.                 .width(100.percent)
13.                 .height(60)
14.                 .backgroundColor(Color.WHITE)
15.                 .alignItems(VerticalAlign.Center)
16.                 .justifyContent(FlexAlign.Center)
17.                 }else {
18.                     Row(){
19.                     Text(item.getClassname())
20.                     .fontSize(15)
21.                     .fontColor(Color.WHITE)
22.             }
23.                 .width(100.percent)
24.                 .height(60)
25.                 .backgroundColor(Color.GRAY)
26.                 .alignItems(VerticalAlign.Center)
27.                 .justifyContent(FlexAlign.Center)
28.                 }
29.         }
30.       }
31.     )
32. }
33. .width(30.percent).height(100.percent)

复制代码

商品列表
商品列表需要通过选择分类来获取数据，请求方式和上面的网络请求类似，这里只说一下页面布局，使用Grid容器就能轻松实现商品列表，注意如何设置网格的列数和间距：

1. Grid{
2.      ForEach(
3.     goodsList,
4.     itemGeneratorFunc: {
5.         item: GoodsItem, index: Int64 => GridItem {
6.             Column() {
7.                         Image( item.getCover()).width(100.percent).height(120).margin(bottom: 4)
8.                         Text(item.getName())
9.                             .fontSize(14)
10.                             .textAlign(TextAlign.Start)
11.                             .fontWeight(FontWeight.W400)
12.                     }.alignItems(HorizontalAlign.Start).onClick({evet => })
13.         }
14.       }
15.     )
16. }
17. .width(70.percent).columnsTemplate('1fr 1fr')
18.         .columnsGap(5)
19.         .rowsGap(5)
20.         .backgroundColor(0xFFFFFF)
21.         .padding(right: 5, left: 5)

复制代码

以上就是商品分类页面的内容介绍。#HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！