Erro estranho em qml e oxyde

Question

Eu fiz um aplicativo com este código-fonte: link No entanto, quando tento executar o aplicativo, a visualização da Web fica preta e não carrega a página da Web.

Aqui está a saída de falha: link

Quando defino uma largura para o elemento webview com algo como- > width: units.gu (160) Em seguida, funciona muito bem.No entanto, se possível, eu preferiria usar a altura total do pai.

Aqui está a fonte corrigida e aprimorada: link

    

Answer 1

Não consegui reproduzir o seu problema, mas quando exibi a amostra, não vi a visualização da Web. Parece-me que o seu posicionamento é muito confuso. Você tem uma coluna contendo uma única linha, que contém outra coluna. Isso não faz muito sentido. É obscurecido por recuo incorreto, então o primeiro take-away é, limpe seu código antes de publicá-lo. Não só ajudará aqueles que tentam ajudá-lo, mas também poderá descobrir o problema no processo.

Você está misturando o posicionamento por tamanho e ancoragem explícitos. Por exemplo, sua coluna externa possui a largura definida de forma explícita e implícita, através do atributo anchor.fill. Você sabe qual deles vai ganhar se eles não concordarem? Eu tenho certeza que não.

Ao longo de uma linha semelhante, você define a largura do WebView como a largura de seu pai, a Linha. Mas o Row precisa ser amplo o suficiente para comportar todos os seus filhos, por isso deve ser mais amplo que o WebView. Como a QML resolve isso? Eu não sei. Eu acho que Row e Column são bons para organizar um número de elementos de tamanho conhecido, mas não para manter elementos que devem ocupar o espaço restante. Se é isso que você quer, faça explicitamente ou através de âncoras.

Abaixo, eu reescrevi seu código de exemplo em um formulário que funciona para mim. Eu não sei se esse foi o layout que você estava tentando, mas espero que esteja claro o suficiente para você reorganizá-lo como quiser.

Eu escolhi colocar a entrada do URL e os botões em uma Fila, já que todos eles são de tamanho fixo. O WebView deve ocupar o restante do espaço, então ancoro seu topo na parte inferior da Linha (com uma margem de 1 gu) e sua parte inferior na parte inferior da Página. Definir sua largura para a largura da página garante que ela alcance todo o caminho, embora isso também possa ter sido feito com âncoras.

import QtQuick 2.0
import Ubuntu.Components 1.1
import com.canonical.Oxide 1.0
import QtQuick.Window 2.0

MainView {
    applicationName: "com.ubuntu.developer.mkamenjak77.bugapp"
    useDeprecatedToolbar: false
    width: Screen.width/2
    height: Screen.height/2

    Page {
        Row{
            id: controlRow

            TextField {
                id: textfield
                text: "http://google.com"
                width: units.gu(40)

                Keys.onReturnPressed: {
                    if (textfield.text.substring(0, 7) != "http://")
                        textfield.text = "http://" + textfield.text;
                    webview.url = textfield.text
                }
            }

            Button {
                width: units.gu(10)
                text: i18n.tr("Osvježi")
                onClicked: webview.reload()
            }

            Button {
                width: units.gu(10)
                text: i18n.tr("Naprijed")
                onClicked: webview.goForward()
            }

            Button {
                width: units.gu(10)
                text: i18n.tr("Natrag")
                onClicked: webview.goBack()
            }
        }

        WebView {
            id: webview
            width: parent.width
            anchors.top: controlRow.bottom
            anchors.topMargin: units.gu(1)
            anchors.bottom: parent.bottom

            Component.onCompleted: {
                url = textfield.text
            }
        }
    }
}