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

问题描述

我正在使用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       
          }
        }
    }

解决方法

如果我理解正确的话——您希望将导航项图像设置为不仅仅是 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" }
      }
    }
  }
}

qml qt