Forums

OverviewFelgo 2 Support (Qt 5) › Invalid property assignment: "drawer" is a read-only property

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16814

    Waeil

    hi agin, i need a help to solve this problem. i want combine Appdraw + Navigation ; to make a picture on the top of my drawer panel

     

    import Felgo 3.0
    import QtQuick 2.0
    import QtQuick.Layouts 1.3

    App
    {
    id: idMasterGUI

    AppDrawer
    {
    id: idAppDrawer
    width: parent.width * 0.4
    z: 10
    Rectangle
    {
    anchors.fill: parent
    color: Theme.tintColor
    }
    Column
    {
    spacing: dp(5)
    RoundedImage
    {
    id: id_img
    fillMode: AppImage.PreserveAspectFit
    source: “../assets/images/Menu.png”
    width: idAppDrawer.width
    height: idAppDrawer.width * 0.25
    }
    }
    }

    Navigation
    {
    id: navigation
    navigationMode: navigationModeDrawer
    drawer: idAppDrawer

    NavigationItem
    {
    title: “Welcome”
    icon: IconType.home

    NavigationStack
    {
    Page_Welcome{}
    }
    }

    NavigationItem
    {
    title: “Product”
    icon: IconType.dropbox

    NavigationStack
    {
    Page_ListProducts{}
    }
    }

    NavigationItem
    {
    title: “Billing”
    icon: IconType.shoppingcart

    NavigationStack
    {
    Page_ListBillings{}
    }
    }
    }
    }

    #16815

    Günther
    Felgo Team

    Hi Waeil!

    It is not required to add an additional AppDrawer item for showing a header-image in the navigation drawer. You can use the Navigation::headerView property to add an element on top of the list-items of your navigation.

    Please have a look at the Qt World Summit demo app for an example implementation of a navigation drawer that shows a header image.

    Cheers,
    Günther

    #16816

    Waeil

    it work Sir, thank’s.

    Can you please tell me how add Graduation inside NavigationItem .. or Tel me how customize my own component  for NavigationItem with Graduation

    gradient: Gradient

            {
                GradientStop { id: idGrad1; position: 0.0; color: "#EDEDED" }
                GradientStop { id: idGrad2; position: 0.95; color: "#E7E7E7" }
                GradientStop { id: idGrad3; position: 1.0; color: "#000000" }
            }

    Navigation

        {
            id: navigation
            navigationMode: navigationModeDrawer
            headerView: RoundedImage
                    {
                        id: id_img
                        fillMode: AppImage.PreserveAspectFit
                        source: "../assets/images/Menu.png"
                        width: navigation.drawer.width
                        height: navigation.drawer.width * 0.25
                    }
            NavigationItem
            {
                title: "Welcome"
                icon: IconType.home
    
    
                Page_Welcome{}
    
    
            }
    #16831

    Günther
    Felgo Team

    Hi Waeil!

    The NavigationItems (used as tabs / drawer list items) come with a default styling for iOS and Android. You can only modify their look by changing the ThemeNavigationAppDrawer or ThemeTabControl settings of your app Theme.

    Adding a completely custom styling for list-item and tabs of Navigation is not possible at the moment.

    However, you can build a new look, by using a custom AppDrawer and/or TabControl instead of the Navigation. These types give you full control over the styling of the content shown in the drawer or tab control.

    Best,
    Günther

Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support