Advertisement
ROBERTO_FLORENTINO

QML_OpacityMask

Jun 19th, 2022
1,652
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
QML 2.56 KB | None | 0 0
  1. OpacityMask
  2.  
  3. Item {
  4.     width: 360
  5.     height: 600
  6.  
  7.  
  8.     Rectangle {
  9.         width: 360
  10.         height: 600
  11.  
  12.         ListView {
  13.  
  14.             width: 350
  15.             height: 200
  16.             anchors.centerIn: parent
  17.             id: myList
  18.             model: myModel
  19.             highlight: highlightBar
  20.             clip: true
  21.  
  22.             snapMode: ListView.SnapToItem
  23.  
  24.             headerPositioning: ListView.OverlayHeader
  25.  
  26.  
  27.             header: Rectangle {
  28.                   id: headerItem
  29.                   width: myList.width
  30.                   height:50
  31.  
  32.                   color: "#fafafa"
  33.  
  34.  
  35.                 }
  36.  
  37.  
  38.  
  39.             OpacityMask {
  40.                 source: mask
  41.                 maskSource: myList
  42.             }
  43.  
  44.  
  45.             OpacityMask {
  46.                 source: mask2
  47.                 maskSource: headerItem
  48.             }
  49.  
  50.             LinearGradient {
  51.                 id: mask2
  52.                 anchors.fill: parent
  53.                 start: Qt.point(0, 0)
  54.                 end: Qt.point(0, 300)
  55.                 gradient: Gradient {
  56.                     GradientStop { position: 0.2; color: "transparent"}
  57.                     GradientStop { position: 0.7; color: "white" }
  58.                 }
  59.             }
  60.  
  61.             LinearGradient {
  62.                 id: mask
  63.                 anchors.fill: parent
  64.                 start: Qt.point(0, 0)
  65.                 end: Qt.point(0, 300)
  66.                 gradient: Gradient {
  67.                     GradientStop { position: 0.2; color: "transparent"}
  68.                     GradientStop { position: 0.7; color: "white" }
  69.                 }
  70.             }
  71.  
  72.            
  73.            
  74.  
  75.  
  76.  
  77.             delegate: Item {
  78.                 id: delegateItem
  79.                 width: 400
  80.                 height: 20
  81.                 Text {
  82.                     text: name
  83.                 }
  84.  
  85.                 MouseArea {
  86.                     id: mArea
  87.                     anchors.fill: parent
  88.                     onClicked: {
  89.                         myList.currentIndex = index
  90.                     }
  91.                 }
  92.             }
  93.         }
  94.  
  95.         Component {
  96.             id: highlightBar
  97.             Rectangle {
  98.                 width: parent.width
  99.                 height: 20
  100.                 color: "#FFFF88"
  101.             }
  102.         }
  103.  
  104.         ListModel {
  105.             id: myModel
  106.         }
  107.  
  108.          Component.onCompleted: {
  109.             for (var i = 0; i < 100; i++) {
  110.                 myModel.append({
  111.                     name: " Item  : " + i
  112.                 })
  113.             }
  114.         }
  115.     }
  116.  
  117.  
  118.  
  119. }
  120.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement