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

转载于 2025-07-01 12:42:59 发布 · 31 阅读

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

分类页面要在基本布局的基础上增加一些动态效果，比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。

分类列表

先来看左侧的分类列表，很明显是一个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 = true
httpRequest.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语言##仓颉##购物#

原创作者: youlanjihua 转载于: https://www.cnblogs.com/youlanjihua/p/18905310