回复
鸿蒙开发(八)：公司详情页面的实现 原创
小_铁
发布于 2025-2-23 11:25
浏览
0收藏
🚀使用ArkTS开发鸿蒙应用：公司详情页面的实现
公司详情页面是用户查看公司详细信息的重要功能模块。以下是一个完整的公司详情页面实现，包括公司信息的展示、轮播图、标签切换和点击跳转等功能。
代码解析
1. 导入模块
import { httpRequestGet } from '../Utils/HttpUtils';
import prompt from '@ohos.promptAction';
import { router } from '@kit.ArkUI';
import { CopanyDetailModel, CopanyDetailModelData } from '../model/CopanyDetailModel';- 导入了多个模块，用于实现HTTP请求、提示框、路由跳转和公司详情模型等功能。
2. 定义公司详情组件
@Entry
@Component
struct Companydetails {
@State images: ImageCount[] = [
{ url: "https://www.itying.com/images/flutter/1.png", count: 1 },
{ url: "https://www.itying.com/images/flutter/2.png", count: 2 },
{ url: "https://www.itying.com/images/flutter/3.png", count: 3 },
];
@State tabs: Tabtext[] = [
{ text: "公司概况" },
{ text: "热招职位" }
];
private controller: TabsController = new TabsController();
private swipercontroller: SwiperController = new SwiperController();
private detailsurl: string = "****";
@State companyDetailModelData: CopanyDetailModelData | null | undefined = new CopanyDetailModelData();
async aboutToAppear() {
const params = router.getParams() as ParamsObj;
console.log("params id " + params.id);
let networlurl = this.detailsurl + "id=" + params.id;
httpRequestGet(networlurl).then((data) => {
let companydetailsmodel: CopanyDetailModel = JSON.parse(data.toString());
this.companyDetailModelData = companydetailsmodel.data;
});
}
- 定义了一个名为
Companydetails 的公司详情组件。 - 使用
@State 装饰器定义了images 和tabs，用于存储轮播图的图片信息和标签信息。 - 定义了
controller 和swipercontroller，用于控制标签切换和轮播图。 - 定义了
detailsurl，用于存储获取公司详情的接口URL。 - 在
aboutToAppear 生命周期函数中，获取路由传过来的公司ID，拼接接口URL，调用httpRequestGet 方法获取公司详情数据，并更新companyDetailModelData。
3. 页面布局
build() {
Column() {
RelativeContainer() {
Image($r('app.media.bossback'))
.width(20).height(20)
.alignRules({
center: { 'anchor': '__container__', 'align': VerticalAlign.Center },
left: { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}).margin({ left: 5 })
.onClick(() => {
router.back();
});
Text("公司详情")
.fontSize(25)
.fontColor(Color.White)
.fontWeight(800)
.alignRules({
center: { 'anchor': '__container__', 'align': VerticalAlign.Center },
middle: { 'anchor': '__container__', 'align': HorizontalAlign.Center }
});
}.height(50)
.width("100%")
.backgroundColor(Color.Green);
Swiper(this.swipercontroller) {
ForEach(this.images, (item: ImageCount) => {
Column() {
Image(item?.url)
.objectFit(ImageFit.Fill)
.height("100%")
.width("100%")
.borderRadius(5);
}.height("100%")
.width("100%");
});
}.height("25%")
.width("100%")
.autoPlay(true)
.interval(1000)
.loop(true)
.duration(1)
.indicator(true);
Column() {
Row() {
Image(this.companyDetailModelData?.logo).width(70).height(70)
.objectFit(ImageFit.Contain).borderRadius(10).margin({ left: 10 });
Column() {
Text(this.companyDetailModelData?.name).fontSize(18).fontColor(Color.Black)
.margin({ top: 5 })
.fontWeight(FontWeight.Medium);
Text(this.companyDetailModelData?.location)
.fontSize(15).fontColor(Color.Black)
.margin({ top: 10 });
Text(`${this.companyDetailModelData?.type}·${this.companyDetailModelData?.size}·${this.companyDetailModelData?.employee}`)
.fontSize(15).fontColor(Color.Black)
.fontWeight(FontWeight.Medium)
.margin({ top: 10 });
}.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
.margin({ left: 10 });
}.justifyContent(FlexAlign.Start)
.height("90%")
.width("100%");
Line().width("100%").height(1).backgroundColor(Color.Black);
}.height(120)
.width("100%");
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.tabs, (item: Tabtext, index: number) => {
if (index == 0) {
TabContent() {
this.companyOverview();
}.tabBar(item.text).align(Alignment.Top);
} else if (index == 1) {
TabContent() {
this.hotjobvacanies();
}.tabBar(item.text).align(Alignment.Top);
}
});
};
}.width("100%")
.height("100%");
}.width("100%")
.height("100%");
}
- 使用
Column 和RelativeContainer 布局组件，构建公司详情页面的UI。 - 包含一个标题栏，显示“公司详情”字样，并包含一个返回按钮。
- 使用
Swiper 组件实现轮播图，展示公司图片。 - 使用
Column 和Row 布局组件，展示公司基本信息，包括公司logo、名称、位置、类型、规模和员工数量。 - 使用
Tabs 和ForEach 组件，实现标签切换功能，展示公司概况和热招职位。
4. 公司概况构建方法
@Builder
private companyOverview() {
RelativeContainer() {
Row() {
Text("公司介绍:").fontSize(20).fontWeight(800).fontColor(Color.Black);
Text(this.companyDetailModelData?.inc).fontSize(15)
.margin({ left: 10, right: 10 })
.maxLines(2);
}.height("100%")
.width("100%")
.justifyContent(FlexAlign.Start);
}.margin({ left: 10, top: 7, right: 19 })
.height(60)
.width("100%")
.margin({ left: 5, right: 5 });
}
- 定义了一个
companyOverview 方法，用于构建公司概况的UI。 - 包含公司介绍的标题和内容。
5. 热招职位构建方法
@Builder
private hotjobvacanies() {
RelativeContainer() {
Text("敬请期待")
.fontSize(25)
.fontWeight(FontWeight.Medium)
.fontColor(Color.Black)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
});
}.width("100%")
.height(60);
}
- 定义了一个
hotjobvacanies 方法，用于构建热招职位的UI。 - 当前显示“敬请期待”字样。
6. CopanyDetailModel：提供类型安全和结构化的数据处理方式
export class CopanyDetailModel {
msg?: string = "";
code?: number = 0;
data?: CopanyDetailModelData = new CopanyDetailModelData();
}
export class CopanyDetailModelData {
id?: number = 0;
logo?: string = "";
name?: string = "";
location?: string = "";
type?: string = "";
size?: string = "";
employee?: string = "";
hot?: string = "";
count?: string = "";
inc?: string = "";
}7.图片展示
总结
通过上述代码，我们实现了一个完整的公司详情页面，包括公司信息的展示、轮播图、标签切换和点击跳转等功能。用户可以通过公司详情页面查看公司的详细信息，并通过标签切换查看公司概况和热招职位。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
赞
收藏
回复
相关推荐
