今天继续为大家带来仓颉语言开发商城应用的实战教程，今天的内容是实现商品分类页。
分类页面要在基本布局的基础上增加一些动态效果，比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。
分类列表
先来看左侧的分类列表，很明显是一个 List 容器，样式上比较简单，只有一个文本，不过它有个点击状态的切换效果。
在添加组件之前，我们需要先请求到分类的数据，关于仓颉语言的网络请求上一篇文章已经分享过，下面再贴一下分类列表的网络请求具体代码，要注意的是，嵌套数据的修改需要使用 ObservedArrayList 修饰才能在页面上实时变化：
@State var classList:ObservedArrayList<ClassItem> = ObservedArrayList<ClassItem>()let url = CJTools.url + "/api/class.php"let httpRequest = createHttp() let option = HttpRequestOptions( method: RequestMethod.GET, expectDataType: HttpDataType.STRING, header: HashMap<String, String>([("content-type", "application/json")]))this.loading = truehttpRequest.request(url, {err, resp => if (let Some(e) <- err) { CJTools.log('error:' + e.message) } if (let Some(r) <- resp) { let str = r.result.toString() let jValue = JsonValue.fromStr(str) let jArray = jValue.asArray() for (i in 0..jArray.size()) { var model = DataModel.fromJson(jArray.get(i).getOrThrow().asObject()) var modelData = match (model) { case data: DataModelStruct => data case _ => throw Exception("this data is not DataModelStruct") } let item = ClassItem(String.deserialize(modelData.get('id')), String.deserialize(modelData.get('classname')), String.deserialize(modelData.get('cover'))) this.classList.append(item) } } this.loading = false httpRequest.destroy() },options:option)
复制代码
请求之后最终 classList 是我们需要的数据，然后在 List 组件中遍历 classList 添加组件，仓颉中的循环遍历和 ArkTs 大不相同：
List{ ForEach( this.classList, itemGeneratorFunc: { item: ClassItem, index: Int64 => ListItem { if(this.classIndex == index){ Row(){ Text(item.getClassname()) .fontSize(15) .fontColor(0x4a4a4a) } .width(100.percent) .height(60) .backgroundColor(Color.WHITE) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) }else { Row(){ Text(item.getClassname()) .fontSize(15) .fontColor(Color.WHITE) } .width(100.percent) .height(60) .backgroundColor(Color.GRAY) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) } } } )}.width(30.percent).height(100.percent)
复制代码
商品列表
商品列表需要通过选择分类来获取数据，请求方式和上面的网络请求类似，这里只说一下页面布局，使用 Grid 容器就能轻松实现商品列表，注意如何设置网格的列数和间距：
Grid{ ForEach( goodsList, itemGeneratorFunc: { item: GoodsItem, index: Int64 => GridItem { Column() { Image( item.getCover()).width(100.percent).height(120).margin(bottom: 4) Text(item.getName()) .fontSize(14) .textAlign(TextAlign.Start) .fontWeight(FontWeight.W400) }.alignItems(HorizontalAlign.Start).onClick({evet => }) } } )}.width(70.percent).columnsTemplate('1fr 1fr') .columnsGap(5) .rowsGap(5) .backgroundColor(0xFFFFFF) .padding(right: 5, left: 5)
复制代码
以上就是商品分类页面的内容介绍。#HarmonyOS 语言 ##仓颉 ##购物 #
评论