QT QML signal does not get to a Canvas when defined in style: ButtonStyle -
i quite new qml , trying make qml button change it's background when event happens. button uses style: buttonstyle , canvas generate graphics (via javascript). using qml states control button state.
i figured out canvas not refresh automatically tried call requestpaint() inside onstatechanged handler, signal somehow not canvas when defined in style property.
here code:
button { id: small_rounded_button state: "off" states: [ state { name: "on" propertychanges { target: small_rounded_button backgroundcolor: "#18243c" } }, state { name: "off" propertychanges { target: small_rounded_button backgroundcolor: "#aaa" } } ] mousearea { anchors.fill: parent onclicked: { if (small_rounded_button.enabled == true) { if (small_rounded_button.state == "on") { small_rounded_button.state = "off" } else { small_rounded_button.state = "on" } } } } style: buttonstyle { background: item { canvas { anchors.fill: parent onpaint: { var ctx = getcontext("2d"); ctx.reset(); ctx.beginpath(); ctx.linewidth = height * 0.1; ctx.roundedrect(ctx.linewidth / 2, ctx.linewidth / 2, width - ctx.linewidth, height - ctx.linewidth, small_rounded_button.radius, small_rounded_button.radius); ctx.strokestyle = "grey"; ctx.stroke(); /* sets colour when app starts */ ctx.fillstyle = small_rounded_button.backgroundcolor; ctx.fill(); } /* never happens */ onstatechanged: { requestpaint() } } label { text: small_rounded_button.text color: "#000" font.pixelsize: small_rounded_button.height * 0.5 //anchors.centerin: parent } label: null } } } thanks in advance help,
greg
you implemented onstatechanged handler inside canvas, doesn't change state, button does.
you can use signals , slots archive want:
canvas { component.oncompleted: { small_rounded_button.statechanged.connect(requestpaint); } } anyhow, there more problems in code, here's correctly working version:
import qtquick 2.0 import qtquick.controls 1.3 import qtquick.controls.styles 1.3 button { id: small_rounded_button property string backgroundcolor : "#f0f" state: "off" states: [ state { name: "on" propertychanges { target: small_rounded_button backgroundcolor: "#18243c" } }, state { name: "off" propertychanges { target: small_rounded_button backgroundcolor: "#aaa" } } ] mousearea { anchors.fill: parent onclicked: { if (small_rounded_button.enabled == true) { if (small_rounded_button.state == "on") { small_rounded_button.state = "off" } else { small_rounded_button.state = "on" } } } } style: buttonstyle { background: item { canvas { component.oncompleted: { requestpaint(); small_rounded_button.statechanged.connect(requestpaint); } anchors.fill: parent onpaint: { var ctx = getcontext("2d"); ctx.reset(); ctx.beginpath(); ctx.linewidth = height * 0.1; ctx.roundedrect(ctx.linewidth / 2, ctx.linewidth / 2, width - ctx.linewidth, height - ctx.linewidth, small_rounded_button.radius, small_rounded_button.radius); ctx.strokestyle = "grey"; ctx.stroke(); /* sets colour when app starts */ ctx.fillstyle = small_rounded_button.backgroundcolor; ctx.fillrect(0, 0, width, height); } } label { text: small_rounded_button.text color: "#000" font.pixelsize: small_rounded_button.height * 0.5 //anchors.centerin: parent } } } }
Comments
Post a Comment