TableView,TabView,ScrollView及SplitView

　　SplitView{...}用于分割条的方式横向或纵向布局元素.定义方式如下:

1 SplitView {
2 　　anchors.fill:parent
3 　　orientation: Qt.Horizontal //横向布局  ,纵向布局是Qt.Vertical
4 　　```
5 　　然后是各种元素
6 　　```
7 }

 

　　TableView{...}用于显示列表项,定义方式如下:

 1  TableView {
 2                 id:tableView
 3                 width: 300
 4                 TableViewColumn{
 5                     role:"title"
 6                     title:"名称"
 7                     horizontalAlignment: Text.AlignHCenter        //水平对齐方式:文本居中对齐
 8                     width:100
 9                 }
10                 TableViewColumn{
11                     role:"author"
12                     title:"作者"
13                     horizontalAlignment: Text.AlignHCenter
14                     width:200
15                 }
16                 model:libraryModel                      //指定了负责提供数据的ListModel对象
17             }

 

TabView{...}用于分页浏览,定义方式如下:

 1  TabView {
 2                 id:tabView
 3                 width:215
 4                 height:300
 5                 Tab{
 6                     title:"蒙娜丽莎"
 7                     Image {
 8                         source:"images/蒙娜丽莎.jpg"
 9                     }
10                 }
11                 Tab {
12                     title:"大卫"
13                     Image{
14                         source: "images/大卫.jpg"
15                     }
16                 }
17                 Tab {
18                     title:"圣母"
19                     Image {
20                         source:"images/圣母.jpg"
21                     }
22                 }
23             }

　　ScrollView{...}用滑动条显示元素,定义方式如下:

1 ScrollView {
2                 Image {
3                     id:scrolimg
4                     source:"images/蒙娜丽莎.jpg"
5                 }
6             }

效果图为

左边为TableView,中间为TabView,右边为ScrollView,整体布局是SplitView

结构图如下

posted on 2017-09-22 10:51  NeawBe  阅读(288)  评论(0)    收藏  举报

导航