qml을 사용하는 블랙 베리 10의 레이아웃

Question

저는 Blackberry 10을 배우고 있습니다. 다음과 같이 balckberry 10 용 페이지를 디자인하고 싶습니다.

나는 QML의 레이아웃을 이해하지 못했다. 특정 너비와 높이 및 일부 정렬이있는 레이아웃이 필요합니다.

아래 페이지에서 qml의 소스 코드를 제공해 주시겠습니까?

Answer 1

요청하신 레이아웃은 다음과 같습니다. 물론, 당신은 내가 '당신이 다른 상대 위젯의 크기와 같은 StackLayout 내에서 서로에 대해 자신의 위치를 ​​갖고 싶어,

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 
} 

또한, ImageView에 대한 ImageButton 등을 자신의 자산을 제공해야 이 경우 StackLayoutProperties 주변에서 게임하는 것이 좋습니다.