i'm trying avoid annoying overlapping both sideview , listview seem fancy. here example demonstrates issue:
note: @ green rectangle on left when swipe swipeview , tabs when scroll down listview
main.cpp
#include <qguiapplication> #include <qqmlapplicationengine> int main(int argc, char *argv[]) { qcoreapplication::setattribute(qt::aa_enablehighdpiscaling); qguiapplication app(argc, argv); qqmlapplicationengine engine; engine.load(qurl(qlatin1string("qrc:/main.qml"))); return app.exec(); } main.qml
import qtquick 2.7 import qtquick.window 2.0 import qtquick.controls 2.0 import qtquick.controls 1.4 import qtquick.controls.styles 1.4 import qtquick.layouts 1.2 window { id: window visible: true width: 600 height: 480 title: "demo" rowlayout { id: layouttoplevel anchors.fill: parent spacing: 0 rectangle { id: sidebarview layout.preferredwidth: layouttoplevel.width * .3 layout.fillheight: true color: "#453" border.width: 1 } columnlayout { id: sideviewlayout spacing: 0 swipeview { id: sideview currentindex: sideviewpageindicator.currentindex layout.fillwidth: true layout.preferredheight: layouttoplevel.height * .9 page { id: page1 header: text { text: "page 1" horizontalalignment: text.alignhcenter font.pixelsize: 20 } } page { id: page2 header: text { text: "page 2" horizontalalignment: text.alignhcenter font.pixelsize: 20 } tabview { id: page2tabview width: parent.width height: parent.height anchors.margins: 4 tabposition: qt.bottomedge tab { title: qstr("tab 1") } tab { title: qstr("tab 2") columnlayout { text { text: "text 1" layout.alignment: qt.aligncenter } text { text: "text 2" layout.alignment: qt.aligncenter } listview { width: parent.width height: parent.height model: listmodel { listelement { name: "element 1" } listelement { name: "element 2" } listelement { name: "element 3" } listelement { name: "element 4" } listelement { name: "element 5" } listelement { name: "element 6" } } delegate: text { text: name } } } } style: tabviewstyle { tabsalignment: qt.alignhcenter frameoverlap: 1 tab: rectangle { border.width: styledata.selected implicitwidth: math.max(text.width + 4, 80) implicitheight: 20 radius: 10 text { id: text anchors.centerin: parent text: styledata.title color: styledata.selected ? "white" : "black" } color: styledata.selected ? "#654" : "white" } frame: rectangle { color: "white" } } } } } pageindicator { id: sideviewpageindicator count: sideview.count interactive: true anchors.bottom: sideview.bottom anchors.bottommargin: -45 anchors.horizontalcenter: parent.horizontalcenter delegate: rectangle { height: 30 width: 30 antialiasing: true color: "#654" radius: 10 opacity: index === sideview.currentindex ? 0.95 : pressed ? 0.7 : 0.45 behavior on opacity { opacityanimator { duration: 100 } } } } } } }
use clip: true
which clips content goes out of boundaries.
Comments
Post a Comment