[Interest] More QML Styling woes.

[Nurmi J-P]

On 17 May 2014, at 06:37, Jason Hihn <jhihn at gmx.com> wrote:

> I still haven't figured out to have the TextField background rect to autosize to the implcitheight. I can set it explicitly as "45" below, but I'd rather not hard-code it. What can I set to have it adjust automatically?
>  
> Next up, let's compare styling a TextField vs a TextArea. We can't set a radius on the border on the TextArea. It would be cool if it took a Rect for the background like TextField.
>  
>  
> TextField {
> width: parent.width
> height: implicitHeight
> style: TextFieldStyle {
> textColor: "black"
> font {pixelSize: 30}
> background: Rectangle {
> radius: 10
> border.width: 1
> border.color: "black"
> implicitHeight: 45
> color:"lightgray"
> }
> }
> }
>  
> TextArea {
> width: parent.width
> frameVisible: true
> height: 125
> style: TextAreaStyle {
> textColor: "black"
> font {pixelSize: 30}
> backgroundColor: "lightgray"
> // background: Rectangle {
> // radius: 10
> // border.width: 1
> // border.color: "black"
> // implicitHeight: 45
> // color:"lightgray"
> // }
> }
> }
> 

Hi,

The TextFieldStyle size calculation has been fixed in Qt 5.3.1: https://codereview.qt-project.org/#change,85353. To get rounded corners for TextArea, you could hide the built-in background and style the frame like this:

     TextArea {
        width: parent.width
        frameVisible: true
        height: 125
        backgroundVisible: false // <--
        style: TextAreaStyle {
            textColor: "black"
            font {pixelSize: 30}
            frame: Rectangle {
                radius: 10
                border.width: 1
                border.color: "black"
                implicitHeight: 45
                color:"lightgray"
            }
        }
    }

Just notice that the rounded corners won't play nice with default rectangular scrollbars, so you will also have to style them to match the rounded corners. A good starting point might be to enable transient scroll bars and then tweak the handle delegate to match your look'n'feel.

         style: TextAreaStyle {
            ...
            transientScrollBars: true
        }


--
J-P Nurmi