From 407e941a2d72ecf3471b32e3bfb77d912e21f8c1 Mon Sep 17 00:00:00 2001 From: GuangweiLi <213203228@seu.edu.cn> Date: Tue, 5 Mar 2024 18:03:49 +0800 Subject: [PATCH 1/2] =?UTF-8?q?1.=E8=B0=83=E6=95=B4=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E9=83=A8=E5=88=86=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=9B?= =?UTF-8?q?2.=E6=90=9C=E7=B4=A2=E9=A1=B5=E6=B7=BB=E5=8A=A0=E7=83=AD?= =?UTF-8?q?=E6=A6=9C=E7=AD=89=EF=BC=9B3.=E4=B8=BA=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: GuangweiLi <213203228@seu.edu.cn> --- .../MyNews/entry/src/main/ets/pages/Index.ets | 2 +- .../entry/src/main/ets/view/HomePage.ets | 51 +++-- .../ets/view/HomePageRecommendationTab.ets | 40 ++-- .../entry/src/main/ets/view/SearchPage.ets | 197 ++++++++++++++---- .../entry/src/main/ets/viewmodel/HotBoard.ts | 50 +++++ .../entry/src/main/mock/HotBoardData.ets | 112 ++++++++++ .../media/ic_gallery_privacy_statement.svg | 13 ++ 7 files changed, 374 insertions(+), 91 deletions(-) create mode 100644 scenario/arkui/MyNews/entry/src/main/ets/viewmodel/HotBoard.ts create mode 100644 scenario/arkui/MyNews/entry/src/main/mock/HotBoardData.ets create mode 100644 scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_gallery_privacy_statement.svg diff --git a/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets b/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets index 100123b5..96b63acd 100644 --- a/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets +++ b/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets @@ -20,7 +20,7 @@ import { ProfilePageBuilder } from '../view/ProfilePage'; import { TaskPageBuilder } from '../view/TaskPage'; import { VideoPageBuilder } from '../view/VideoPage'; import { IndexBottomNavItem } from '../viewmodel/IndexBottomNavItem'; -import { SearchPage } from '../view/SearchPage' +// import { SearchPage } from '../view/SearchPage' /** diff --git a/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets b/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets index e394d0be..65921b7e 100644 --- a/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets +++ b/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets @@ -17,7 +17,6 @@ import router from '@ohos.router'; import { FollowingTabContent } from './HomePageFollowingTab'; import { RecommendationTabContent } from './HomePageRecommendationTab'; -import { trendingSearchList } from '../../mock/SearchContent' /** @@ -54,13 +53,14 @@ export struct HomePage { /* 顶栏：搜索框+按钮 */ TopBar() - /* Scrollable tabs + filter button */ + /* 可左右滑动的选项卡+按钮 */ TabSelector({ curIdx: this.currentTabIndex }) - Divider().color($r('app.color.light_border')) - /* Provide different content according to the tab index. */ + Divider().strokeWidth(1).color($r('app.color.light_border')) + + /* 下方页面内容 */ Column() { - // TODO: add other tab contents. + // TODO: 添加其他选项卡对应的页面 if (this.currentTabIndex === 0) { FollowingTabContent() } @@ -68,7 +68,7 @@ export struct HomePage { RecommendationTabContent() } else { - Text(this.currentTabIndex.toString()) + Text(this.currentTabIndex.toString()) // 默认显示推荐页 } } .width('100%') @@ -90,7 +90,7 @@ struct TopBar { @State curSearchTermIdx: number = 0 build() { - Row({ space: 8 }) { + Row({ space: 4 }) { /* 左侧按钮 */ Stack() { Image($r('app.media.ic_public_appstore_filled')) @@ -122,7 +122,7 @@ struct TopBar { .margin({ left: 10 }) .size({ width: 16, height: 16 }) .fillColor($r('app.color.light_fg_shallow')) - Text() + Text() // TODO: 添加滚动热搜词条 } .width(0) .height('100%') @@ -142,6 +142,7 @@ struct TopBar { Text('发布').fontSize(9).fontColor($r("app.color.primary_fg")) } .height('90%') + .margin({ left: 4, right: 4 }) .justifyContent(FlexAlign.SpaceBetween) .onClick(() => { // 将发布页压入页面栈 @@ -149,8 +150,8 @@ struct TopBar { }) } .width('100%') - .height(60) - .padding({ top: 18, bottom: 6, left: 17, right: 17 }) + .height(57) + .padding({ top: 18, bottom: 6, left: 10, right: 10 }) .alignItems(VerticalAlign.Bottom) .justifyContent(FlexAlign.SpaceBetween) .backgroundColor($r("app.color.primary")) @@ -170,26 +171,25 @@ struct TabSelector { Row() { Stack() { Scroll(this.scroller) { - /* Scrollable tab selector. */ - Row() { + /* 可左右滑动的选项卡栏 */ + Row({ space: 3 }) { ForEach(tabItemList, (item: string, itemIdx: number) => { - Column({ space: 6 }) { + Column({ space: 4 }) { Text(item) - .fontSize(19) + .fontSize(14) .fontWeight(this.curIdx === itemIdx ? FontWeight.Bold : FontWeight.Normal) .fontColor(this.curIdx === itemIdx ? $r('app.color.primary') : $r('app.color.light_fg')) - /* The line under the selected tab. */ + /* 文字下方线条 */ Line() .startPoint([0, 0]) - .endPoint([20, 0]) + .endPoint([16, 0]) .stroke(this.curIdx === itemIdx ? $r('app.color.primary') : Color.Transparent) .strokeLineCap(LineCapStyle.Round) - .strokeWidth(3) + .strokeWidth(2) } - .width(58) .height('100%') - .padding({ bottom: 1 }) + .padding({ left: 14, bottom: 1 }) .justifyContent(FlexAlign.End) .onClick(() => { this.curIdx = itemIdx @@ -200,11 +200,10 @@ struct TabSelector { } .width('100%') .height('100%') - .padding(10) .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) - /* Text fade-out effect. */ + /* 文字的渐隐效果 */ Row() .width(30) .height('100%') @@ -219,10 +218,10 @@ struct TabSelector { .alignContent(Alignment.End) - /* Buttons on the right side. */ + /* 右侧的按钮 */ Row({ space: 8 }) { Image($r("app.media.ic_public_view_list")) - .size({ width: 22, height: 22 }) + .size({ width: 14, height: 14 }) .fillColor($r('app.color.light_fg')) Divider() @@ -232,13 +231,13 @@ struct TabSelector { .color($r('app.color.light_border')) Image($r("app.media.ic_device_earphone")) - .size({ width: 22, height: 22 }) + .size({ width: 14, height: 14 }) .fillColor($r('app.color.light_fg')) } .height('100%') - .padding({ left: 4, right: 18 }) + .padding({ left: 4, right: 14 }) } .width('100%') - .height(42) + .height(30) } } diff --git a/scenario/arkui/MyNews/entry/src/main/ets/view/HomePageRecommendationTab.ets b/scenario/arkui/MyNews/entry/src/main/ets/view/HomePageRecommendationTab.ets index 3afdb44a..725396c4 100644 --- a/scenario/arkui/MyNews/entry/src/main/ets/view/HomePageRecommendationTab.ets +++ b/scenario/arkui/MyNews/entry/src/main/ets/view/HomePageRecommendationTab.ets @@ -20,8 +20,7 @@ import { RecommendedArticle, RecommendedArticleOverview } from '../viewmodel/Rec import { RecommendedVideo, RecommendedVideoOverview } from '../viewmodel/RecommendedVideo' /** - * Content in `HomePage - RecommendationTab`. - * `首页-推荐` 中的所有内容。 + * `首页-推荐` 页面内容 */ @Component export struct RecommendationTabContent { @@ -73,34 +72,33 @@ export struct RecommendationTabContent { /** - * Article overview in `HomePage - RecommendationTab`. - * `首页-推荐` 中的文章概览。 + * 文章概览（无图、仅标题） */ @Builder function ArticleOverview($$: RecommendedArticleOverview) { Column() { - /* Article title. */ + /* 文章标题 */ Text($$.title) - .fontSize(18) + .fontSize(14) .fontColor($r('app.color.light_fg')) Row({ space: 5 }) { - /* Display '置顶' if the article is pinned. */ + /* 按需显示置顶字样 */ if ($$.isPinned) { Text('置顶') - .fontSize(12) + .fontSize(10) .fontColor($r('app.color.primary')) } - /* Article author. */ + /* 文章作者 */ Text($$.author) - .fontSize(12) + .fontSize(10) .fontColor($r('app.color.light_fg_shallow')) - /* Article comment count. */ + /* 按需显示文章评论数 */ if ($$.cmtCnt > 0) { Text(`${$$.cmtCnt}评论`) - .fontSize(12) + .fontSize(10) .fontColor($r('app.color.light_fg_shallow')) } }.width('100%') @@ -111,36 +109,36 @@ function ArticleOverview($$: RecommendedArticleOverview) { /** - * Video overview in `HomePage - RecommendationTab`. - * `首页-推荐` 中的视频概览。 + * 视频概览（标题+视频封面） */ @Builder function VideoOverview($$: RecommendedVideoOverview) { - Column() { Column({ space: 5 }) { - /* Video title. */ - Text($$.title).fontSize(18) + /* 视频标题 */ + Text($$.title) + .fontSize(14) + .fontColor($r('app.color.light_fg')) - /* Video cover. */ + /* 视频封面 */ Stack() { Image($$.cover) .width('100%') .objectFit(ImageFit.Contain) .borderRadius(5) Image($r("app.media.ic_public_play")) - .size({ width: 45, height: 45 }) + .size({ width: 35, height: 35 }) .fillColor($r('app.color.primary_fg')) .opacity(0.7) }.alignContent(Alignment.Center) Row({ space: 5 }) { - /* Video author. */ + /* 视频作者 */ Text($$.author) .fontSize(12) .fontColor($r('app.color.light_fg_shallow')) - /* Video comment count. */ + /* 按需显示视频评论 */ if ($$.cmtCnt > 0) { Text(`${$$.cmtCnt}评论`) .fontSize(12) diff --git a/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets b/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets index 28408555..fb132eb1 100644 --- a/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets +++ b/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets @@ -15,6 +15,8 @@ import router from '@ohos.router'; +import { HotBoardClass, HotBoardItem } from '../viewmodel/HotBoard'; +import { HotBoardItemList } from '../../mock/HotBoardData'; /** @@ -33,33 +35,35 @@ const tabItemList: string[] = [ @Entry @Component export struct SearchPage { + @State isPrivacyModeOn: boolean = false + private scroller: Scroller = new Scroller() + build() { Column() { - Column() { + Column({ space: 12 }) { /* 顶栏：搜索框+按钮 */ TopBar() + /* 顶栏下方的推荐词条 */ + Recommendation() + Divider().strokeWidth(1).color($r('app.color.light_border')) - /* 搜索榜、搜索历史等 */ - HistoryAndTrending() // TODO: 拆分 + if (this.isPrivacyModeOn) { + /* 无痕模式提示信息 */ + PrivacyModeHint().padding({ top: 12, bottom: 12 }) + Divider().strokeWidth(1).color($r('app.color.light_border')) + /* 热榜 */ + HotBoard() + } + else { + /* 搜索榜、搜索历史等 */ + HistoryAndTrending() + } } .width('100%') .padding({ left: 14, right: 14 }) - Column() { - Divider().strokeWidth(1) - Row() { - Text('无痕搜索模式').fontSize(12) - // FIXME: 切换按钮的阴影范围超出边框 - Toggle({ type: ToggleType.Switch, isOn: false }) - .selectedColor($r('app.color.primary')) - } - .width('100%') - .height('100%') - .justifyContent(FlexAlign.SpaceBetween) - .padding({ left: 14, right: 14 }) - } - .width('100%') - .height(40) + /* 无痕搜索模式开关栏 */ + PrivacyModeToggleBar({ isPrivacyModeOn: this.isPrivacyModeOn }) } .width('100%') .height('100%') @@ -79,20 +83,23 @@ export struct SearchPage { @Component struct TopBar { build() { - Row({ space: 10 }) { + Row({ space: 4 }) { Image($r('app.media.ic_public_cancel')) .size({ width: 20, height: 20 }) .fillColor($r('app.color.light_fg')) .onClick(() => { router.back() }) + Search({ placeholder: '示例热搜词条' }) .width(0) .height('100%') .flexGrow(1) .borderRadius(22) .backgroundColor($r('app.color.index_tab_bg')) + Text('搜索') + .margin({ left: 10 }) .fontSize(14) .fontColor($r('app.color.primary')) .onClick(() => { @@ -100,44 +107,116 @@ struct TopBar { }) } .width('100%') - .height(72) - .padding({ top: 18, bottom: 18 }) + .height(60) + .padding({ top: 18, bottom: 10 }) } } /** - * 搜索历史、热搜榜等 + * 顶栏下方的推荐词条 */ @Component -struct HistoryAndTrending { - @State curIdx: number = 0 +struct Recommendation { + build() { + // TODO: 改为从列表中随机读取 + Row() { + Text('示例热搜词条1，示例热搜词条1') + .width('45%') + .fontSize(14) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(1) + Divider() + .width('10%') + .height(14) + .vertical(true) + .color($r('app.color.light_border')) + .strokeWidth(1) + Text('示例热搜词条2') + .width('45%') + .fontSize(14) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(1) + } + .width('100%') + } +} + +/* 无痕模式提示信息 */ +@Component +struct PrivacyModeHint { build() { - Column({ space: 12 }) { - /* 热搜（仅展示两条） */ - // TODO: 改为从列表中随机读取 + Column({ space: 8 }) { + Row({ space: 3 }) { + Image($r('app.media.ic_gallery_privacy_statement')) + .size({ width: 16, height: 16 }) + Text('你已进入无痕浏览模式') + .fontSize(15) + } + .width('100%') + .justifyContent(FlexAlign.Center) + + Text('在无痕模式下，搜索及浏览历史不会被记录，推荐词不涉及信息收集') + .width('84%') + .textAlign(TextAlign.Center) + .fontSize(10) + .fontColor($r('app.color.light_fg_shallow')) + } + .width('100%') + } +} + + +/* 热榜 */ +@Component +struct HotBoard { + hotBoard: HotBoardClass = new HotBoardClass(HotBoardItemList) + + build() { + Column({ space: 18 }) { + /* 标题 */ Row() { - Text('示例热搜词条1，示例热搜词条1') - .width('45%') - .fontSize(14) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .maxLines(1) - Divider() - .width('10%') - .height(14) - .vertical(true) - .strokeWidth(1) - Text('示例热搜词条2') - .width('45%') + Text('头条热榜') .fontSize(14) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .maxLines(1) + .fontWeight(FontWeight.Medium) + Image($r('app.media.ic_controlcenter_eyeconfort_filled')) + .size({ width: 14, height: 14 }) + .fillColor($r('app.color.light_fg_shallow')) + .onClick(() => { + // TODO: 点击隐藏该列表 + }) } .width('100%') + .justifyContent(FlexAlign.SpaceBetween) - Divider() + /* 内容 */ + ForEach(this.hotBoard.sortItemList(), (item: HotBoardItem, index: number) => { + Row() { + Text(String(index + 1)) + .width(20) + .fontSize(14) + .fontColor(index < 3 ? $r('app.color.primary') : $r('app.color.light_fg_shallow')) + Text(item.title) + .fontSize(14) + } + .width('100%') + }) + } + .width('100%') + } +} + + +/** + * 搜索历史、热搜榜等 + */ +@Component +struct HistoryAndTrending { + @State curIdx: number = 0 + build() { + Column({ space: 12 }) { /* 搜索历史 */ Row() { Text('搜索历史') @@ -163,6 +242,7 @@ struct HistoryAndTrending { .width('10%') .height(14) .vertical(true) + .color($r('app.color.light_border')) .strokeWidth(1) Text('示例搜索历史2，示例搜索历史2') .width('45%') @@ -182,11 +262,12 @@ struct HistoryAndTrending { .width('10%') .height(14) .vertical(true) + .color($r('app.color.light_border')) .strokeWidth(1) } .width('100%') - Divider() + Divider().strokeWidth(1).color($r('app.color.light_border')) /* 其他 */ Row() { @@ -239,6 +320,7 @@ struct HistoryAndTrending { .width('10%') .height(14) .vertical(true) + .color($r('app.color.light_border')) .strokeWidth(1) Text('示例词条2，示例词条2，示例词条2') .width('45%') @@ -258,6 +340,7 @@ struct HistoryAndTrending { .width('10%') .height(14) .vertical(true) + .color($r('app.color.light_border')) .strokeWidth(1) Text('示例词条4') .width('45%') @@ -278,6 +361,7 @@ struct HistoryAndTrending { .width('10%') .height(14) .vertical(true) + .color($r('app.color.light_border')) .strokeWidth(1) Text('示例词条6，示例词条6，示例词条6') .width('45%') @@ -289,3 +373,30 @@ struct HistoryAndTrending { } } } + + +/** + * 无痕搜索模式开关栏 + */ +@Component +struct PrivacyModeToggleBar { + @Link isPrivacyModeOn: boolean + + build() { + Column() { + Divider().strokeWidth(1).color($r('app.color.light_border')) + Row() { + Text('无痕搜索模式').fontSize(12) + // FIXME: 切换按钮的阴影范围超出边框 + Toggle({ type: ToggleType.Switch, isOn: $$this.isPrivacyModeOn }) + .selectedColor($r('app.color.primary')) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.SpaceBetween) + .padding({ left: 14, right: 14 }) + } + .width('100%') + .height(40) + } +} diff --git a/scenario/arkui/MyNews/entry/src/main/ets/viewmodel/HotBoard.ts b/scenario/arkui/MyNews/entry/src/main/ets/viewmodel/HotBoard.ts new file mode 100644 index 00000000..03c67a15 --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/ets/viewmodel/HotBoard.ts @@ -0,0 +1,50 @@ +/* + * Copyright (c) 2023 Southeast University. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +/** + * 热榜话题的类型定义 + */ +export class HotBoardItem { + title: string + hotValue: number + label?: '热门事件' | '新事件上榜' | '解读' | '辟谣' + + constructor(title: string, hotValue: number, label?: '热门事件' | '新事件上榜' | '解读' | '辟谣') { + this.title = title + this.hotValue = hotValue + this.label = label + } +} + +export class HotBoardClass { + itemList: HotBoardItem[] + + constructor(itemList: HotBoardItem[]) { + this.setItemList(itemList) + } + + setItemList(itemList: HotBoardItem[]) { + this.itemList = itemList + } + + /* 将话题列表按热度排序 */ + sortItemList() { + let sortedItemList: HotBoardItem[] = this.itemList.sort((a, b) => { + return a.hotValue - b.hotValue + }) + return sortedItemList + } +} diff --git a/scenario/arkui/MyNews/entry/src/main/mock/HotBoardData.ets b/scenario/arkui/MyNews/entry/src/main/mock/HotBoardData.ets new file mode 100644 index 00000000..11f6c1c8 --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/mock/HotBoardData.ets @@ -0,0 +1,112 @@ +/* + * Copyright (c) 2023 Southeast University. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +import { HotBoardItem } from '../ets/viewmodel/HotBoard' + +export const trendingSearchList: string[] = [ + '树莓派4B开发板通过OpenHarmony兼容性测评', + 'OpenHarmony正式落地水利行业：多款产品通过兼容性测评', + '持续使能智慧医疗，新增三款搭载润开鸿HiHopeOS智能药品柜通过OpenHarmony兼容性测评', + '润开鸿龙芯交通控制器设备通过OpenHarmony兼容性测评', + '2024年首期OpenHarmony繁星计划师资培训在东莞圆满举办', + '开源大师兄开发板通过OpenHarmony 3.2 Release版本兼容性测评' +] + +export const HotBoardItemList: HotBoardItem[] = [ + { + title: '快速入门', + hotValue: 19465 + }, + { + title: '开发准备', + hotValue: 26725 + }, + { + title: '构建第一个ArkTS应用（Stage模型）', + hotValue: 45612, + label: '新事件上榜' + }, + { + title: '开发基础知识', + hotValue: 87453, + }, + { + title: '应用程序包基础知识', + hotValue: 23489 + }, + { + title: '应用配置文件（Stage模型）', + hotValue: 65987, + label: '解读' + }, + { + title: '应用配置文件（FA模型）', + hotValue: 32147, + label: '热门事件' + }, + { + title: '资源分类与访问', + hotValue: 54876 + }, + { + title: '学习ArkTS语言', + hotValue: 78534, + label: '热门事件' + }, + { + title: '初识ArkTS语言', + hotValue: 29384 + }, + { + title: 'ArkTS语言介绍', + hotValue: 67459, + label: '辟谣' + }, + { + title: '从TypeScript到ArkTS的适配指导', + hotValue: 98321 + }, + { + title: 'UI范式', + hotValue: 56438 + }, + { + title: '应用模型', + hotValue: 34218 + }, + { + title: '应用模型概述', + hotValue: 12987, + label: '新事件上榜' + }, + { + title: 'Stage模型开发指导', + hotValue: 43876 + }, + { + title: 'FA模型开发指导', + hotValue: 65784 + }, + { + title: 'FA模型与Stage模型应用组件互通指导', + hotValue: 92837 + }, + { + title: 'FA模型切换Stage模型指导', + hotValue: 54679, + label: '解读' + } +] diff --git a/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_gallery_privacy_statement.svg b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_gallery_privacy_statement.svg new file mode 100644 index 00000000..836b8c9a --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_gallery_privacy_statement.svg @@ -0,0 +1,13 @@ + + + ic_privacy_statement + + + + + + + + + + \ No newline at end of file -- Gitee From 08cf306d6e7149506bc05d3a983d45fa1b3936a0 Mon Sep 17 00:00:00 2001 From: GuangweiLi <213203228@seu.edu.cn> Date: Wed, 6 Mar 2024 10:48:58 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=90=9C=E7=B4=A2?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD=E5=8F=8A?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: GuangweiLi <213203228@seu.edu.cn> --- scenario/arkui/MyNews/.gitignore | 1 + .../MyNews/entry/src/main/ets/pages/Index.ets | 5 +- .../entry/src/main/ets/view/HomePage.ets | 12 +- .../entry/src/main/ets/view/SearchPage.ets | 133 +++++++++++++----- .../base/media/ic_public_arrow_left.svg | 13 ++ .../media/ic_public_arrow_left_filled.svg | 13 ++ .../base/media/ic_public_arrow_right.svg | 15 ++ .../media/ic_public_arrow_right_filled.svg | 13 ++ .../resources/base/media/ic_public_fail.svg | 13 ++ 9 files changed, 176 insertions(+), 42 deletions(-) create mode 100644 scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left.svg create mode 100644 scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left_filled.svg create mode 100644 scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right.svg create mode 100644 scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right_filled.svg create mode 100644 scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_fail.svg diff --git a/scenario/arkui/MyNews/.gitignore b/scenario/arkui/MyNews/.gitignore index fbabf771..130efdf8 100644 --- a/scenario/arkui/MyNews/.gitignore +++ b/scenario/arkui/MyNews/.gitignore @@ -1,5 +1,6 @@ /node_modules /oh_modules +/oh-package-lock.json5 /local.properties /.idea **/build diff --git a/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets b/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets index 96b63acd..e8ca73ff 100644 --- a/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets +++ b/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets @@ -20,7 +20,7 @@ import { ProfilePageBuilder } from '../view/ProfilePage'; import { TaskPageBuilder } from '../view/TaskPage'; import { VideoPageBuilder } from '../view/VideoPage'; import { IndexBottomNavItem } from '../viewmodel/IndexBottomNavItem'; -// import { SearchPage } from '../view/SearchPage' +import { SearchPage } from '../view/SearchPage' /** @@ -56,6 +56,9 @@ struct Index { private tabsController: TabsController = new TabsController() build() { + if(1) + SearchPage() + else Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) { ForEach(bottomNavItemList, (item: IndexBottomNavItem, itemIndex: number) => { TabContent() { diff --git a/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets b/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets index 65921b7e..990b5fdd 100644 --- a/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets +++ b/scenario/arkui/MyNews/entry/src/main/ets/view/HomePage.ets @@ -60,15 +60,15 @@ export struct HomePage { /* 下方页面内容 */ Column() { - // TODO: 添加其他选项卡对应的页面 if (this.currentTabIndex === 0) { - FollowingTabContent() + FollowingTabContent() // 默认显示推荐页 } else if (this.currentTabIndex === 1) { RecommendationTabContent() } + // TODO: 添加其他选项卡对应的页面 else { - Text(this.currentTabIndex.toString()) // 默认显示推荐页 + Text(this.currentTabIndex.toString()) } } .width('100%') @@ -98,13 +98,13 @@ struct TopBar { .size({ width: 34, height: 34 }) .fillColor($r('app.color.primary')) .backgroundColor($r('app.color.primary_fg')) - .borderRadius(17) + .borderRadius(999) Text('阅读赚金币') .padding({ left: 2, right: 2, top: 1, bottom: 1 }) .fontSize(7) .fontColor($r('app.color.light_fg')) .backgroundColor('#ffcc00') - .borderRadius(5) + .borderRadius(999) } .height('100%') .align(Alignment.Bottom) @@ -127,7 +127,7 @@ struct TopBar { .width(0) .height('100%') .flexGrow(1) - .borderRadius(22) + .borderRadius(999) .backgroundColor($r('app.color.primary_fg')) .onClick(() => { // 将搜索页压入页面栈 diff --git a/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets b/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets index fb132eb1..3002c7d2 100644 --- a/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets +++ b/scenario/arkui/MyNews/entry/src/main/ets/view/SearchPage.ets @@ -40,26 +40,66 @@ export struct SearchPage { build() { Column() { - Column({ space: 12 }) { - /* 顶栏：搜索框+按钮 */ - TopBar() - /* 顶栏下方的推荐词条 */ - Recommendation() - Divider().strokeWidth(1).color($r('app.color.light_border')) - - if (this.isPrivacyModeOn) { - /* 无痕模式提示信息 */ - PrivacyModeHint().padding({ top: 12, bottom: 12 }) - Divider().strokeWidth(1).color($r('app.color.light_border')) - /* 热榜 */ - HotBoard() - } - else { - /* 搜索榜、搜索历史等 */ - HistoryAndTrending() + /* 顶栏：搜索框+按钮 */ + TopBar() + + /* 除顶栏和底部无痕开关栏外，其他组件需添加左右padding */ + Column() { + Scroll() { + Column({ space: 14 }) { + /* 顶栏下方的推荐词条 */ + TrendingNews() + Divider() + .strokeWidth(1) + .color($r('app.color.light_border')) + + if (this.isPrivacyModeOn) { + /* 无痕模式提示信息 */ + PrivacyModeHint() + Divider() + .strokeWidth(1) + .color($r('app.color.light_border')) + /* 热榜 */ + HotBoard() + } + else { + /* 搜索历史 */ + History() + Divider() + .strokeWidth(1) + .color($r('app.color.light_border')) + /* 其他推荐内容 */ + Recommendation() + } + + /* 反馈按钮 */ + Button({ type: ButtonType.Capsule, stateEffect: false }) { + Row({ space: 5 }) { + Image($r('app.media.ic_public_fail')) + .size({ width: 10, height: 10 }) + Text('反馈') + .fontSize(10) + } + .padding({ left: 8, right: 8, top: 4, bottom: 4 }) + } + .margin({ top: 20, bottom: 20 }) + .backgroundColor(Color.Transparent) + .borderWidth(1) + .borderColor($r('app.color.light_border')) + } + .width('100%') } + .width('100%') + .height(0) + .flexGrow(1) + .padding({ top: 14 }) + .align(Alignment.Top) + .scrollBar(BarState.Off) + .edgeEffect(this.isPrivacyModeOn ? EdgeEffect.Spring : EdgeEffect.None) } .width('100%') + .height(0) + .flexGrow(1) .padding({ left: 14, right: 14 }) /* 无痕搜索模式开关栏 */ @@ -83,21 +123,24 @@ export struct SearchPage { @Component struct TopBar { build() { - Row({ space: 4 }) { - Image($r('app.media.ic_public_cancel')) - .size({ width: 20, height: 20 }) + Row() { + /* 返回按钮 */ + Image($r('app.media.ic_public_arrow_left')) + .size({ width: 30, height: 30 }) .fillColor($r('app.color.light_fg')) .onClick(() => { router.back() }) - + /* 搜索框 */ Search({ placeholder: '示例热搜词条' }) .width(0) .height('100%') .flexGrow(1) - .borderRadius(22) + .textFont({ size: 13 }) + .placeholderFont({ size: 13 }) + .borderRadius(999) .backgroundColor($r('app.color.index_tab_bg')) - + /* 搜索按钮 */ Text('搜索') .margin({ left: 10 }) .fontSize(14) @@ -108,16 +151,16 @@ struct TopBar { } .width('100%') .height(60) - .padding({ top: 18, bottom: 10 }) + .padding({ left: 6, right: 14, top: 18, bottom: 10 }) } } /** - * 顶栏下方的推荐词条 + * 顶栏下方的热搜词条 */ @Component -struct Recommendation { +struct TrendingNews { build() { // TODO: 改为从列表中随机读取 Row() { @@ -202,22 +245,31 @@ struct HotBoard { } .width('100%') }) + /* 查看更多按钮 */ + Row({ space: 2 }) { + Text('查看更多') + .fontSize(12) + .fontWeight(FontWeight.Medium) + Image($r('app.media.ic_public_arrow_right_filled')) + .size({ width: 12, height: 12 }) + } + .width('100%') + .height(38) + .justifyContent(FlexAlign.Center) + .backgroundColor($r('app.color.light_border')) + .borderRadius(5) } .width('100%') } } -/** - * 搜索历史、热搜榜等 - */ +/* 搜索历史 */ @Component -struct HistoryAndTrending { - @State curIdx: number = 0 - +struct History { build() { Column({ space: 12 }) { - /* 搜索历史 */ + /* 标题 */ Row() { Text('搜索历史') .fontSize(12) @@ -232,6 +284,7 @@ struct HistoryAndTrending { .width('100%') .justifyContent(FlexAlign.SpaceBetween) + /* 内容 */ Row() { Text('示例搜索历史1') .width('45%') @@ -266,10 +319,20 @@ struct HistoryAndTrending { .strokeWidth(1) } .width('100%') + } + .width('100%') + } +} - Divider().strokeWidth(1).color($r('app.color.light_border')) +/** + * 其他推荐内容 + */ +@Component +struct Recommendation { + @State curIdx: number = 0 - /* 其他 */ + build() { + Column({ space: 12 }) { Row() { Row({ space: 14 }) { ForEach(tabItemList, (item: string, itemIdx: number) => { diff --git a/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left.svg b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left.svg new file mode 100644 index 00000000..1e9405ce --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_arrow_left + + + + + + + + + + \ No newline at end of file diff --git a/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left_filled.svg b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left_filled.svg new file mode 100644 index 00000000..4ae07086 --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_left_filled.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_arrow_left_filled + + + + + + + + + + \ No newline at end of file diff --git a/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right.svg b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right.svg new file mode 100644 index 00000000..48ed31ef --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right.svg @@ -0,0 +1,15 @@ + + + + Public/ic_public_arrow_right + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right_filled.svg b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right_filled.svg new file mode 100644 index 00000000..b8570da9 --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_arrow_right_filled.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_arrow_right_filled + + + + + + + + + + \ No newline at end of file diff --git a/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_fail.svg b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_fail.svg new file mode 100644 index 00000000..cce75b40 --- /dev/null +++ b/scenario/arkui/MyNews/entry/src/main/resources/base/media/ic_public_fail.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_fail + + + + + + + + + + \ No newline at end of file -- Gitee