Invalid property assignment: "drawer" is a read-only property

Tagged: bug drawer

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

Author

Posts
August 1, 2017 at 00:47 #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{}
}
}
}
}

August 1, 2017 at 07:50 #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

August 1, 2017 at 11:03 #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{}
```
```
        }
```
August 1, 2017 at 14:50 #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