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

Question

我使用的是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       
          }
        }
    }

Answer 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" }
      }
    }
  }
}