Russian Qt Forum

Qt => Qt Quick => Тема начата: Larry от Декабрь 17, 2015, 16:36



Название: [РЕШЕНО]Произвольная форма кнопки
Отправлено: Larry от Декабрь 17, 2015, 16:36
Добрый день, форумчане.
Подскажите пожалуйста, есть ли возможность сделать компонент произвольной формы, по рисунку?
Спасибо.


Название: Re: Произвольная форма кнопки
Отправлено: BuRn от Декабрь 18, 2015, 08:29
Ты можешь нарисовать все что угодно, используй Canvas


Название: Re: Произвольная форма кнопки
Отправлено: navrocky от Декабрь 18, 2015, 10:49
Помимо Canvas, если кнопка в виде картинки, можешь использовать BorderImage для тянущейся кнопки или обычный Image если кнопка фиксированного размера.

Так-же правильнее будет не изобретать свою кнопку с нуля а взять Button из QtQuick.Controls и переопределить только стиль.


Название: Re: Произвольная форма кнопки
Отправлено: Larry от Декабрь 18, 2015, 11:53
Помимо Canvas, если кнопка в виде картинки, можешь использовать BorderImage для тянущейся кнопки или обычный Image если кнопка фиксированного размера.

Так-же правильнее будет не изобретать свою кнопку с нуля а взять Button из QtQuick.Controls и переопределить только стиль.

Спасибо за ответы. Т.е. я могу с помощью стилей сделать произвольную форму для кнопки?


Название: Re: Произвольная форма кнопки
Отправлено: navrocky от Декабрь 18, 2015, 12:02
Спасибо за ответы. Т.е. я могу с помощью стилей сделать произвольную форму для кнопки?

Да. Единственное, клики она по прежнему будет отрабатывать в прямоугольной области.


Название: Re: Произвольная форма кнопки
Отправлено: Larry от Декабрь 18, 2015, 13:04
Спасибо большое.
Чтобы не плодить тему отдельную, то задам здесь еще вопрос:
как вставить изображение в TableView, а то никак не получается:

Код:
ListModel
{
    id: _model
}

TableView
{
    id: _tableView
    width: 200
    anchors.fill: _view
    anchors.horizontalCenter: _view.horizontalCenter

    TableViewColumn
    {
        role: "image"
        title: "Title"
        width: 50

        delegate: _delegate
    }
   
    model: _model
}

Component
{
    id: _delegate

    Item
    {
        width:  32
        height: 32

        Image
        {
            anchors.horizontalCenter: _tableView.horizontalCenter
            anchors.verticalCenter:   _tableView.verticalCenter

            width:  32
            height: 32

            source: "antena"
        }
    }
}


Название: Re: Произвольная форма кнопки
Отправлено: Larry от Декабрь 18, 2015, 15:04
C изображениями уже разобрался :)


Название: Re: Произвольная форма кнопки
Отправлено: gil9red от Декабрь 18, 2015, 15:50
C изображениями уже разобрался :)

Было бы хорошо, если бы написали в чем была проблема )
А то придет человек от гугла с такой проблемой и увидев только "Спасибо, сам разобрался" без решения проблемы будет очень растроенным :)


Название: Re: [РЕШЕНО]Произвольная форма кнопки
Отправлено: Larry от Декабрь 18, 2015, 16:03
да, Вы правы. Но выложу чуть позже, т.к. удалил пока эту часть и отрабатываю в чистом проекте - играюсь со свойствами TableView.


Название: Re: [РЕШЕНО]Произвольная форма кнопки
Отправлено: Larry от Декабрь 18, 2015, 17:53
Немного переделал, но теперь все работает. Только не сделал headerDelegate.

Код:
    Item
    {
        id: mainItem
        anchors.fill: parent

        TableView
        {
            id: table
            anchors.fill: parent

            TableViewColumn
            {
                role: "name"
                title: "Name"
                width: table.width/3

                delegate: textDelegate
            }

            TableViewColumn
            {
                role: "level"
                title: "Level"
                width: table.width/3

                delegate: imageDelegate
            }

            TableViewColumn
            {
                role: "count"
                title: "Count"
                width: table.width/3

                delegate: imageDelegate
            }

            model: listmodel

            rowDelegate: _rowDelegate
        }

        ListModel
        {
            id: listmodel

            ListElement { name: "avto1"; level: "antena"; count: "sat" }
            ListElement { name: "avto2"; level: "antena"; count: "sat" }
            ListElement { name: "avto3"; level: "antena"; count: "sat" }
        }

        Component
        {
            id: textDelegate

            Item
            {
                Rectangle
                {
                    anchors.fill: parent
                    color: (styleData.selected)?"skyblue":"white"
                    border.width: 1
                    border.color: "black"

                    Text
                    {
                        color: (styleData.selected)?"red":"black"
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        text: styleData.value
                    }
                }
            }
        }

        Component
        {
            id: imageDelegate

            Rectangle
            {
                border { width: 1; color: "black" }
                color: (styleData.selected)?"skyblue":"white"

                Image
                {
                    width: 32
                    height: 32
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    source: styleData.value
                }
            }
        }

        Component
        {
            id: _rowDelegate

            Item
            {
                height: 32
            }
        }
    }