使用qml的黑莓10的布局

Question

我正在学习黑莓10.我想为下面的balckberry 10设计一个qml页面。

我不明白在QML布局。 我想要具有特定宽度和高度的布局以及一些对齐。

请给我提供qml中的源代码以供下面的页面使用。

Answer 1

这是您要求的布局。当然，你需要提供自己的资产ImageView，ImageButton等

import bb.cascades 1.0 

Page { 
    // root 
    Container { 
     //[0] 
     Container { 
      maxHeight: 300 
      minHeight: maxHeight 
      layout: StackLayout { 
       orientation: LayoutOrientation.LeftToRight 
      } 
      ImageView { 
      } 
      ImageView { 
      } 
      ImageView { 
      } 
     } //[0] 

     // [1] 
     Container { 
      maxHeight: 150 
      minHeight: maxHeight 
      layout: StackLayout { 
       orientation: LayoutOrientation.LeftToRight 
      } 
      Label { 
       text: "Label" 
      } 
      Button { 
       text: "Button 1" 
      } 
      Button { 
       text: "Button 2" 
      } 
     } // [1] 

     // [2] 
     Container { 
      maxHeight: 600 
      minHeight: maxHeight 
      horizontalAlignment: HorizontalAlignment.Fill 
      // [2-1] 
      Container { 
       layout: StackLayout { 
        orientation: LayoutOrientation.LeftToRight 
       } 
       ImageButton { 
       } 
       ImageButton { 
       } 
       ImageButton { 
       } 
      } // [2-1] 

      // [2-2] 
      Container { 
       layout: StackLayout { 
        orientation: LayoutOrientation.LeftToRight 
       } 
       ImageButton { 
       } 
       ImageButton { 
       } 
       ImageButton { 
       } 
      } // [2-2] 

      // [2-3] 
      Container { 
       horizontalAlignment: HorizontalAlignment.Fill 
       layout: DockLayout { 
       } 
       Button { 
        horizontalAlignment: HorizontalAlignment.Right 
        text: "Button 3" 
       } 
      } // [2-3] 
     } // [2] 

     // [3] 
     Container { 
      maxHeight: 150 
      minHeight: maxHeight 
      layout: StackLayout { 
       orientation: LayoutOrientation.LeftToRight 
      } 
      TextArea { 
       text: "Text Box" 
      } 
      ImageView { 
      } 
     } // [3] 
    } // root 
} 

另外，如果你想拥有小部件的不同的相对大小和彼此相同StackLayout中的位置，我d建议在这种情况下玩StackLayoutProperties。