Макеты в blackberry 10 с помощью qml

Question

Я изучаю Blackberry 10. Я хочу создать страницу в qml для balckberry 10, как показано ниже.

Я не понимал макеты в 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 в этом случае.