2015-03-18 2 views
5

От: http://doc.qt.io/qt-5/qml-qtquick-controls-tabview.html#detailsКак настроить вкладки TabView в нескольких строках?

TabView 
{ 
    Tab { 
     title: "Red" 
     Rectangle { color: "red" } 
    } 
    Tab { 
     title: "Blue" 
     Rectangle { color: "blue" } 
    } 
    Tab { 
     title: "Green" 
     Rectangle { color: "green" } 
    } 
} 

Эти вкладки получают по умолчанию, показанной на турнике. Как отображать их в отдельных строках?

Как это:
Tab1
Таб2
TAB3

Вместо:
Tab1 Таб2 TAB3

ответ

5

Вам необходимо скрыть стандартную панель вкладок, а также создать свой собственный вертикальный бар ,

Row { 
    Column { 
     Repeater { 
      model: view.count 
      Rectangle { 
       width: 100 
       height: 40 
       border.width: 1 
       Text { 
        anchors.centerIn: parent 
        text: view.getTab(index).title 
       } 
       MouseArea { 
        anchors.fill: parent 
        cursorShape: Qt.PointingHandCursor 
        onClicked: view.currentIndex = index 
       } 
      } 
     } 
    } 
    TabView { 
     id: view 
     style: TabViewStyle { 
      tab: Item {} 
     } 

     Tab { 
      title: "Red" 
      Rectangle { color: "red" } 
     } 
     Tab { 
      title: "Blue" 
      Rectangle { color: "blue" } 
     } 
     Tab { 
      title: "Green" 
      Rectangle { color: "green" } 
     } 
    } 
} 
0

Я не 100% уверен, что вы хотели бы достичь здесь, но у меня было подобное требование ставить мне не так давно, и она была легко решена в конструкторе. В разделе свойств QTabWidget самым первым вариантом должно быть tabPosition.

Если вы установите tabPosition на «Запад», оно будет выровнять вкладки вверх по вертикали, в левой части вашего виджета, но текст будет также боком, не знаю, является ли это проблемой для вас, это было не в моем случае. Я бы опубликовал скриншоты, но моя репутация слишком низкая.

Смежные вопросы