如何在 Felgo/QML 的 NavigationItem 上设置自定义图像答案

【问题标题】：How to set custom Image on NavigationItem of Felgo/QML如何在 Felgo/QML 的 NavigationItem 上设置自定义图像
【发布时间】：2021-06-14 17:51:21
【问题描述】：

我正在使用qt，我的导航项需要从设备设置自定义图像，如何在NavigationItem上设置图像？

  App {  
      Navigation {
        NavigationItem {
          title: "Main"
           //I need set Image on this item, kindly help me. I know there is icon, but I dont know how to set custom image.
          //Image{ "  icon.source: "https://www.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png""
          //      anchors.left:parent.left       
          }
        }
    }

【问题讨论】：

导航不是 QML 标准的一部分，您使用的是 Felgo 之类的库吗？
是的。我正在使用的费尔戈
你试过了吗：icon.source: "file:///C:/Users/Nourin/Pictures/cnt.png"？
我收到错误“file:WebEditor/qml/WebScriptMain.qml:8: Invalid grouped property access”
现在我已经从 http 获取了 url 源。仍然错误是一样的。

标签： qt qml felgo

【解决方案1】：

如果我对您的理解正确 - 您希望将导航项图像设置为不只是 IconType 常量之一。为此，您需要声明自己的组件并设置为iconComponent。另外，请记住，您不仅可以在此处使用图像 - 您可以使用任何类型的 UI 元素（参考，请参阅官方文档中的示例）。

这是一个您可以自己尝试的示例实现：

import QtQuick 2.15
import Felgo 3.0

App {
  // Here CustomNavigationImage is inline declaration of a component.
  // If your Qt is lower then 5.15, you can declare this component in a separate file.
  component CustomNavigationImage: AppImage {
    anchors.fill: parent
    fillMode: Image.PreserveAspectFit
  }

  Navigation {
    navigationMode: navigationModeTabsAndDrawer

    NavigationItem {
      title: "Custom Page"
      iconComponent: CustomNavigationImage {
        defaultSource: "https://www.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png"
      }
      NavigationStack {
        Page { title: "Custom page" }
      }
    }

    NavigationItem {
      title: "StackOveflow image"
      iconComponent: CustomNavigationImage {
        defaultSource: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png"
      }
      NavigationStack {
        Page { title: "StackOveflow image" }
      }
    }
  }
}

【讨论】：