HarmonyOS 新闻类app demo

开发上手较慢,需要提供"List-卡片新闻"、"页面路由的使用"对应 DEMO,帮助我们理解 arkts 相关写法。

HarmonyOS

Heiang

2024-12-23 15:02:11

浏览

回答 1

按赞同

按时间

fox280

请参考：

List卡片新闻

interface DList {
  id:number
  title:string
  textContent:string
  time:string
  icon:Resource
}

@Entry
@Component
struct DemoList {
  @State list:DList[] = [
    {
      id: 1,
      title:'ArkUI 组件',
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
      time:'15:01',
      icon:$r('app.media.icon')
    },
    {
      id: 2,
      title:'ArkUI 列表',
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
      time:'15:02',
      icon:$r('app.media.icon')
    },
    {
      id: 3,
      title:'ArkUI 组件',
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
      time:'15:03',
      icon:$r('app.media.icon')
    },
    {
      id: 4,
      title:'ArkUI 列表',
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
      time:'15:04',
      icon:$r('app.media.icon')
    },
  ]
  build() {
    Column(){
      List(){
        ForEach(this.list,(item:DList)=>{
          ListItem(){
            Column(){
              Column(){
                Row(){
                  Row() {
                    Text('公文')
                      .fontWeight('500')
                      .fontSize(20)
                      .padding({ bottom: 5 })
                      .textAlign(TextAlign.Center)
                      .fontColor('white')
                    Text(item.time)
                      .fontColor('white')
                  }
                  .width('80%')
                  .justifyContent(FlexAlign.SpaceBetween)
                }
                .width('100%')
                .height(46)
                .backgroundColor('#FD4845')
                .borderRadius({topLeft:8,topRight:8})
                .justifyContent(FlexAlign.Center)
              }


              Column(){
                Row(){
                  Text(item.title)
                    .fontWeight('500')
                    .fontSize(20)
                  Text('')
                    .width('10%')
                }
                .width('80%')
                .padding({top:10,bottom:10})
                .justifyContent(FlexAlign.SpaceBetween)


                Text(item.textContent)
                  .fontColor('#999999')
                  .width('80%')
                  .padding({bottom:10})
                  .border({width:{bottom:1},color:'#999999'})
              }
              .width('100%')



              Column(){
                Row(){
                  Row() {
                    Text('name')
                      .fontColor('#999999')
                    Text('details')
                      .fontColor('#999999')
                  }
                  .width('80%')
                  .justifyContent(FlexAlign.SpaceBetween)
                }
                .width('100%')
                .justifyContent(FlexAlign.Center)
              }
              .padding({top:10,bottom:10})
              .width('100%')

            }
            .backgroundColor('white')
            .borderRadius({topLeft:8,topRight:8})
            .alignItems(HorizontalAlign.Center)
            .width('80%')
            .margin({bottom:10})
          }
        })
      }.alignListItem(ListItemAlign.Center)
    }
    .backgroundColor('#dddddd')
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.

路由使用：

1、index.ets

// 1、引入路由模块
// 2、main_pages.json中配置路由
import router from '@ohos.router';
import { BusinessError } from '@ohos.base'
// 命名路由
import('@ohos/library/src/main/ets/pages/Index');
// 定义传递参数的类
class innerParams {
  array:number[]

  constructor(tuple:number[]) {
    this.array = tuple
  }
}

class routerParams {
  text:string
  data:innerParams

  constructor(str:string, tuple:number[]) {
    this.text = str
    this.data = new innerParams(tuple)
  }
}
@Entry
@Component
struct Index {

  aboutToAppear() {
    const params = router.getParams() as Record<string, string>; // 获取传递过来的参数对象
    if (params) {
      const info: string = params.info as string; // 获取info属性的值
      console.log(info,'details info---------------aboutToAppear')
    }
  }

  onPageShow() {
    const params = router.getParams() as Record<string, string>; // 获取传递过来的参数对象
    if (params) {
      const info: string = params.info as string; // 获取info属性的值
      console.log(info,'details info---------------onPageShow')
    }
  }

  build() {
    Column(){
      Text('我是首页')
        .fontSize(36)
        .fontWeight(500)

      Button('返回无效')
        // 4、页面返回
        .onClick(()=>{
          // 4.1 返回到上一个页面:
          // 这种方式会返回到上一个页面，即上一个页面在页面栈中的位置。但是，上一个页面必须存在于页面栈中才能够返回，否则该方法将无效。
          router.back()
        })

      Button('去详情页')
        .onClick(()=>{
          // 3、页面跳转
          //3.1 pushUrl 目标页面不会替换当前页，而是压入页面栈.保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页
          router.pushUrl({
            url:'pages/router/details'
          })

          //3.2 pushUrl 带参数传递
          router.pushUrl({
            url:'pages/router/details',
            params:new routerParams('这是第一页的值' ,[12, 45, 78])
          })

          //3.3 replaceUrl 目标页面会替换当前页，并销毁当前页，释放当前页的资源，并且无法返回到当前页
          router.replaceUrl({
            url:'pages/router/details'
          })

          //3.4 replaceUrl 带参数传递
          router.replaceUrl({
            url:'pages/router/details',
            params:new routerParams('这是第一页的值' ,[12, 45, 7])
          })

          // 5、命名路由
          // 5.1创建library模块，动态、静态都可以；
          // 5.2使用的模块中的oh-package.json5中配置；
          // 5.3library模块中被引入的页面进行命名；
          // 5.4直接用命名路由跳转
          router.pushNamedRoute({
            name: 'nameRouter',
          })

          // 性能优化
          // 有一个搜索结果列表页和一个搜索结果详情页，希望从搜索结果列表页点击某一项结果，跳转到搜索结果详情页。
          // 同时，如果该结果已经被查看过，则不需要再新建一个详情页，而是直接跳转到已经存在的详情页。
          // 这种场景下，可以使用replaceUrl()方法，并且使用Single实例模式
          // Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。
          // Single：单实例模式。如果目标页面的url已经存在于页面栈中，则会将离栈顶最近的同url页面移动到栈顶，该页面成为新建页。
          // 如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。
        })
        .margin({top:20})
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.

2、details.ets

// 1、引入路由模块
import router from '@ohos.router';
class innerParams {
  array:number[]

  constructor(tuple:number[]) {
    this.array = tuple
  }
}

class routerParams {
  text:string
  data:innerParams

  constructor(str:string, tuple:number[]) {
    this.text = str
    this.data = new innerParams(tuple)
  }
}
@Entry
@Component
struct Details {
  @State text: string = (router.getParams() as routerParams).text
  @State data: object = (router.getParams() as routerParams).data

  build() {
    Column(){
      // Text(this.text)
      // Text((this.data['array'][1]).toString())
      Text('我是详情页')
        .fontSize(36)
        .fontWeight(500)
      Button('返回首页')
        // 4、页面返回
        .onClick(()=>{
          // 4.1 返回到上一个页面:
          // 这种方式会返回到上一个页面，即上一个页面在页面栈中的位置。但是，上一个页面必须存在于页面栈中才能够返回，否则该方法将无效。
          router.back()

          // 4.2 返回到指定页
          // 这种方式可以返回到指定页面，需要指定目标页面的路径。目标页面必须存在于页面栈中才能够返回
          // 正例
          router.back({
            url:'pages/router/index'
          })
          // 反例
          // router.back({
          //   url:'pages/router/cart'
          // })

          // 4.3方式三：返回到指定页面，并传递自定义参数信息
          // 使用router.back()方法返回到原来的页面，原页面不会被重复创建，因此使用@State声明的变量不会重复声明，也不会触发页面的aboutToAppear()生命周期回调。
          // 如果需要在原页面中使用返回页面传递的自定义参数，可以在需要的位置进行参数解析。例如，在onPageShow()生命周期回调中进行参数解析。
          router.back({
            url:'pages/Index',
            params:{
              info:'来自详情页'
            }
          })

        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

3、cart.ets

@Entry
@Component
struct cart {
  build() {
    Column(){
      Text('我是购物车页面')
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

2024-12-23 18:59:16

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 新闻类app demo

订阅鸿蒙技术特刊，精选内容抢先看