通过按键事件获取到浏览器地址栏联想记录

通过按键事件获取到浏览器地址栏联想记录

HarmonyOS
2024-05-26 11:37:14
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
day_night

1.功能场景描述及使用场景

本文主要介绍当我们点击浏览器的地址栏,会关联出历史的浏览记录,按键盘的上下键可以使地址栏的内容替换成浏览记录的内容

2.使用的核心API

onKeyEvent(event: (event?: KeyEvent) => void)

3.核心代码解释

1.通过ForEach遍历出从数据库中取出的关联历史记录,并用text组件来展示。

2.将从数据库中获取到的历史记录存入数组然后传入地址栏所在的子组件中。

3.使用按键事件来通过按键“上”和“下”来获取到对应的地址栏浏览记录的数据。

注意:onKeyEvent事件中每个按键都有2次回调,分别对应KeyType.Down和KeyType.Up,表示按键被按下、然后抬起。可以使用IF判断来拆分。

核心代码如下:

//地址栏输入框组件 
@Component 
export struct LocationBar { 
@State message: string = 'Hello World' 
textInputController: TextInputController = new TextInputController() 
@Link searchSugResult: string[]; 
private index :number=0 
@State url: string = "http://www.baidu.com"; 
​ 
build() { 
  Row(){ 
    TextInput({ 
      text: this.url, 
      controller: this.textInputController 
    }) 
      .onKeyEvent((event: KeyEvent) => {//按键事件 
      if (event.type === KeyType.Down) { 
        console.log(this.index.toString()) 
        if (event.keyCode === 2013) {//2013代表 键盘中 下 键 
          this.url = this.searchSugResult[this.index].toString() 
          if (this.searchSugResult.length-1 === this.index) { 
            this.index = -1 
          } 
          this.index++ 
        } 
        if (event.keyCode === 2012) {//2012代表 键盘中 上 键 
          this.url = this.searchSugResult[this.index].toString() 
          if (this.index<=0) { 
            this.index = this.searchSugResult.length 
          } 
          this.index-- 
        } 
      } 
      }) 
      .width('800vp') 
      .onChange(value => { 
        this.url = value; 
      }) 
    Button('搜索', { type: ButtonType.Capsule, stateEffect: true }) 
      .width('100vp') 
      .height('36vp') 
      .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 
      .backgroundColor($r('sys.color.ohos_id_color_button_normal')) 
      .onClick(() => { 
        // this.webviewController.loadUrl(this.url); 
      }) 
  } 
} 
}
//展示地址栏联想记录 
@Component 
export struct SearchSugItem { 
@State searchSug: string = ''; 
url: string = ""; 
@State isHover: boolean = false 
@State eventType: string = '' 
@Styles 
pressStyles(){ 
  .backgroundColor($r('sys.color.ohos_id_color_click_effect')) 
} 
​ 
@Styles 
focusStyles(){ 
  .backgroundColor($r('sys.color.ohos_id_color_focused_outline')) 
  .padding({ left: '2vp', right: '2vp', top: '2vp', bottom: '2vp' }) 
} 
​ 
@Styles 
normalStyles(){ 
  .backgroundColor(this.isHover ? $r('sys.color.ohos_id_color_hover') : Color.Transparent) 
  .borderRadius(this.isHover ? 16 : 0) 
} 
​ 
build() { 
  Row(){ 
    Text(this.searchSug) 
      .fontSize('16vp') 
      .maxLines(1) 
      .fontColor($r('sys.color.ohos_id_color_text_primary')) 
      .fontSize($r('sys.float.ohos_id_text_size_body1')) 
      .fontFamily($r('sys.string.ohos_id_text_font_family_regular')) 
      .focusable(true)//让text组件能够获取到焦点 
  } 
  .width('100%') 
  .height('48vp') 
  .stateStyles({ 
    focused: this.focusStyles, 
    pressed: this.pressStyles, 
    normal: this.normalStyles 
  }) 
  .onHover((isHover: boolean = false) => { 
    this.isHover = isHover 
  }) 
} 
}
import { SearchSugItem } from './SearchSugItem'; 
​ 
//ForEach遍历关联出来的历史记录 
@Component 
export struct SugList { 
@Link searchSugResult: string[]; 
private searchSugResult1 : Map<number,string>; 
@State twoButtonColor: string = '#87CEFA'; 
url: string = ""; 
build() { 
  List() { 
    ForEach(this.searchSugResult, (model: string,index1:number) => { 
      ListItem() { 
        SearchSugItem({searchSug:model}) 
      }.focusOnTouch(true) 
    }) 
  } 
  .focusOnTouch(true) 
  .width('800vp') 
  .padding({ right: '200vp'}) 
  .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 
  .borderRadius(20) 
  .shadow({ 
    radius: 20, 
    color: Color.Black, 
    offsetX: 0, 
    offsetY: 2 
  }) 
} 
​ 
aboutToAppear(){ 
  for (let index = 0; index < 10; index++) { 
    this.searchSugResult.push('搜索联想'+index) 
  } 
} 
}
import web_webview from '@ohos.web.webview'; 
import { LocationBar } from './LocatioBar'; 
import { SugList } from './SugList'; 
//主页面 
@Entry 
@Component 
struct Index { 
@State searchSug: string = ''; 
@State searchSugResult: string[] = []; 
textInputController: TextInputController = new TextInputController() 
webviewController: WebviewController = new web_webview.WebviewController(); 
url: string = ""; 
build() { 
  Row() { 
    Column() { 
      LocationBar({searchSugResult:this.searchSugResult}) 
      SugList({searchSugResult:this.searchSugResult}) 
      // DateComponent({selectedDate:this.parentSelectedDate}) 
    } 
    .width('100%') 
  } 
  .height('100%') 
} 
}

问题总结:

在通过上下键改变地址栏内容使,未改变下面联想记录的样式。

另外在传递下面联想记录的数据时,是先将数据从子组件传递给父组件,再从父组件传递给子组件,比较麻烦,后续再改进

− 目前此demo的样式只能在平板和电脑上才能展示完全,手机上显示不完全

4.实现效果

5.适配的版本信息

IDE:DevEco Studio 4.0.1.501

SDK:HarmoneyOS 3.2.4.0

分享
微博
QQ
微信
回复
2024-05-27 11:51:24
相关问题
浏览器应用应该怎样拉起?
37浏览 • 2回复 待解决
有谁知道如何拉起浏览器应用
712浏览 • 1回复 待解决
Web组件是否支持浏览器的localstorage?
487浏览 • 1回复 待解决
浏览器下载的文件如何导入鸿蒙
5687浏览 • 1回复 待解决
服务卡片webview如何跳转系统浏览器
6704浏览 • 2回复 待解决
安卓App或者浏览器如何跳转鸿蒙App
8620浏览 • 1回复 待解决
如何实现搜索历史记录
390浏览 • 1回复 待解决