QML Bootstrap开发学习

Qt+Bootstrap

Posted by MetaNetworks on August 2, 2020
本页面总访问量

QML Bootstrap

Link:Github仓库地址

列表List

  • 效果图

  • 代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    
      DefaultListView{
              id: listView
              hasDivider: true
              anchors.fill: parent
              onItemClicked: {
                  listView.model.get(index).text = "Item clicked";
              }
        
              model: ListModel{
                  ListElement{
                      text: "Item 1 default"
                      divider: "Divider 1"
                  }
                  ListElement{
                      text: "Item 2 light"
                      divider: "Divider 1"
                      class_name: "light"
                  }
                  ListElement{
                      text: "Item 3 stable"
                      divider: "Divider 1"
                      class_name: "stable"
                  }
                  ListElement{
                      text: "Item 4 calm"
                      divider: "Divider 2"
                      class_name: "calm"
                  }
                  ListElement{
                      text: "Item 5 positive"
                      divider: "Divider 2"
                      class_name: "positive"
                  }
                  ListElement{
                      text: "Item 5 assertive"
                      divider: "Divider 2"
                      class_name: "assertive"
                  }
                  ListElement{
                      text: "Item 5 balanced"
                      divider: "Divider 3"
                      class_name: "balanced"
                  }
                  ListElement{
                      text: "Item 5 royal"
                      divider: "Divider 3"
                      class_name: "royal"
                  }
                  ListElement{
                      text: "Item 5 dark"
                      divider: "Divider 3"
                      class_name: "dark"
                  }
              }
        
          }
    

带图标的列表

  • 效果图

  • 代码