HarmonyOS 鸿蒙Next 使用DevEco给软件配置多语言和修改图像

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 使用DevEco给软件配置多语言和修改图像

这里展示一种软件的多语言配置过程(修改系统语言软件内的文字跟着变),

顺带提了一下如何修改图片源(自定义显示什么图片)。

先看成果的预览图:

cke_79412.png

代码:

代码:

// xxx.ets
class A {
  text: string = ''
  num: number = 0
}

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State currentIndex: number = 0

  @Builder
  NavigationTitle() {
    Column() {
      Text('Title')
        .fontColor('#182431')
        .fontSize(30)
        .lineHeight(41)
        .fontWeight(700)
      Text('subtitle')
        .fontColor('#182431')
        .fontSize(14)
        .lineHeight(19)
        .opacity(0.4)
        .margin({ top: 2, bottom: 20 })
    }.alignItems(HorizontalAlign.Start)
  }

  @Builder
  NavigationMenus() {
    Row() {
      Image('resources/base/media/ic_public_add.svg')
        .width(24)
        .height(24)
      Image('resources/base/media/ic_public_add.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
      Image('common/ic_public_more.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
    }
  }

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width('90%')
          .height(40)
          .backgroundColor('#FFFFFF')
          .margin({ top: 8 })

        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('90%')
                .height(72)
                .backgroundColor('#FFFFFF')
                .borderRadius(24)
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
            }
          }, (item: number) => item.toString())
        }
        .height(324)
        .width('100%')
        .margin({ top: 12, left: '10%' })
      }
      .title(this.NavigationTitle)
      .menus(this.NavigationMenus)
      .titleMode(NavigationTitleMode.Full)
      .toolbarConfiguration([
        {
          value: $r("app.string.navigation_toolbar_add"),
          icon: $r("app.media.ic_public_highlightsed")
        },
        {
          value: $r("app.string.navigation_toolbar_app"),
          icon: $r("app.media.ic_public_highlights")
        },
        {
          value: $r("app.string.navigation_toolbar_collect"),
          icon: $r("app.media.ic_public_highlights")
        }
      ])
      .hideTitleBar(false)
      .hideToolBar(false)
      .onTitleModeChange((titleModel: NavigationTitleMode) => {
        console.info('titleMode' + titleModel)
      })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}
复制
Navigation页面布局这里的代码有如下内容,我们这里改了一下其中的图片来适应项目

​
.toolbarConfiguration([
        {
          value: $r("app.string.navigation_toolbar_add"),
          icon: $r("app.media.app_icon")
        },
        {
          value: $r("app.string.navigation_toolbar_app"),
          icon: $r("app.media.app_icon")
        },
        {
          value: $r("app.string.navigation_toolbar_collect"),
          icon: $r("app.media.app_icon")
        }
      ])

​
复制
其中的

​value: $r("app.string.navigation_toolbar_add")

其中的

​value: $r("app.string.navigation_toolbar_add")

需要在文件中修改内容

​
{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "navigation_toolbar_add",
      "value": "添加"
    },
    {
      "name": "navigation_toolbar_app",
      "value": "应用"
    },
    {
      "name": "navigation_toolbar_collect",
      "value": "收藏"
    }
  ]
}

直接粘贴修改的语言的默认配置,编译器会高亮提醒配置多语言,通过上图所示灯泡打开编辑器

看图依次双击内容修改就好了。

我们运行看一下成果:

在设置里面改一下语言:

即可在不同语言之间切换

要修改图片的话

看一下HarmonyOS图标库批量下载的问题-华为开发者问答 | 华为开发者联盟

筛选出合适的图片放到文件夹里,在文件中引用即可。

Releases · tibold/svg-explorer-extension安装这个插件可以让你在文件夹里面预览svg图像。

cke_18975.png


更多关于HarmonyOS 鸿蒙Next 使用DevEco给软件配置多语言和修改图像的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 使用DevEco给软件配置多语言和修改图像的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next系统中,使用DevEco Studio为软件配置多语言和修改图像,具体操作如下:

配置多语言

  1. 资源文件准备:在resources目录下,为每个语言创建对应的文件夹,如zh(中文)、en(英文)等,并在各文件夹内创建对应的strings.xml文件,用于存放该语言的字符串资源。

  2. 资源引用:在代码中,通过$r:string.resource_name的方式引用字符串资源,DevEco Studio会自动根据系统语言选择对应的资源文件。

修改图像

  1. 图像资源放置:将图像资源放置在resources/base/media目录下,可按需创建子目录进行分类管理。

  2. 图像引用:在布局文件或代码中,通过$media:image_name的方式引用图像资源。若需动态修改图像,可通过代码设置组件的image属性。

  3. 适配不同分辨率:为适配不同分辨率的设备,可在media目录下创建drawable-hdpidrawable-xhdpi等文件夹,放置相应分辨率的图像资源。

完成上述步骤后,重新编译并运行项目,即可看到多语言和图像修改的效果。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部