ButtonLayout example syntax error [answered]

asked 2019-12-14 23:39:03 +0200

Spam Hunter
11677 ●187 ●289 ●324

updated 2019-12-16 16:27:47 +0200

With respect to the documentation of a ButtonLayout example for SFOS;

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     ButtonLayout {
         anchors.width: parent.width   // <---- this line
         Button {
             text: "Button1"
         }
         Button {
             text: "Button2"
         }
         Button {
             text: "Button3"
         }
     }
 }

This throws an error in the SDK, as I would expect it to.....anchors.width?, clearly this should be width: parent.width, then the example works.

Also, the example, along with many others, are somewhat lacking any context. Many use cases for buttons might be on pages in apps or settings, so why not set an example of how you could arrange 3 buttons on a page, like the following;

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent
        Column {
            id: column
            width: page.width
            spacing: Theme.paddingLarge

            PageHeader { title: qsTr("Button layout") }

            ButtonLayout {
                width: parent.width
                Button {
                    text: "Button 1"
                    onClicked: {
                        console.log("Button 1 clicked")
                    }
                }
                Button {
                    text: "Button 2"
                    onClicked: {
                        console.log("Button 2 clicked")
                    }
                }
                Button {
                    text: "Button 3"
                    onClicked: {
                        console.log("Button 3 clicked")
                    }
                }
            }
        }
    }
}