вторник, 19 июня 2012 г.

QML виджет верхнего уровня & повернутый градиент

Вчера писал гуй для GTD клиента. В рамках спортивного программирования и качания скиллов в декларативном Qt/QML. На старте нарисовались 2 задачи, притом не решаемые без угнетающих костылей. Например:
Изображение Hint для програмирования на QML
Фактически это Hint на QML
Вроде бы и ничего страшного ? закругленный прямоугольник размером с childrect внутри image + text привязанные друг к другу, появляются по событию мыши. 2 минуты работы и ... хинт оказывается под следующим компонентом:
Z-order у хинта
Кажется тут и пригодится ранее неиспользуемое мной свойство визуальных компонентов: координата z... а вот не тут то было :)... ничего не меняется!. Хотя гугл, форумы и все все все говорят использовать его... хмм. Читаем внимательно и вдумчиво мануал, ага z-order учитывается только для sibling компонентов. А у меня хинт - чайлд кнопки, кнопка - чайлд панели (иголка в яйце, яйцо в зайце, заяц в шоке), а уже сама тулпанель sibling для правого компонента... вобщем на глаза грабля правильной архитектуры ;). Изменение z координаты для всей панели дало ожидаемый результат, но это не совсем то, что нужно. В конкретно данном случае, работает, а если 2 панели рядом - уже нет...

Выход ? сделать хинт - потомком Root`a. Архитектура получается жесть :) Это не наш путь. Выход №3 ? создать на root компоненте глобальный Loader и грузить в него компонент нашего хинта, но тогда anchor`ы использовать низя, а вместо них гораздо более медленные бинды, и добавляется лишний загрузчик картинки которого можно было бы (и хочется) избежать. Больше ничего не придумывается. Может быть, однажды, ToolTip переберется из симбиан в десктоп, а пока будем экспериментировать дальше.

А теперь страшная и неожиданная новость намбер ту: градиенты в QML бывают только сверху вниз :) и что бы сделать градиент слева направо рисуем его в отдельном Rectangle и применяем к нему нехитрые трансформации поворота и переноса :) Как по мне - это бессовестный костыль учитывая какие возможности имеются у обыкновенных Qt виджетов по рисованию градиентов.

Вместо:
Rectangle {

...
        gradient: Gradient {
            GradientStop {
...
            }
            GradientStop {
...
            }
}
}

пишем:
Rectangle {
...

//
выходим из ситуации при помощи дополнительно объекта
    Rectangle{

        // поворот
        rotation: 90

        // меняем ширину с высотой
        width: parent.height
        height: parent.width


        // передвигаем
        x: height

        // ... и сам градиент
        transformOrigin: Item.TopLeft
        gradient: Gradient {
            GradientStop {
...
            }
            GradientStop {
...
            }
        }

    }