放置提交按鈕qml佈局bb10

我想將提交按鈕放在彩色框下方。我應該怎麼做才能修復佈局？每當我調整topPadding整個蓋盒調整未提交按鈕放置提交按鈕qml佈局bb10

import bb.cascades 1.0

頁{

Container { 
    background: Color.create("#f9f7f2"); 
    layout: StackLayout {} 

    // Container for holding the title 
    Container { 
     horizontalAlignment: HorizontalAlignment.Center 
     layout: DockLayout {} 

     ImageView { 
      horizontalAlignment: HorizontalAlignment.Fill 
      verticalAlignment: VerticalAlignment.Fill 
      imageSource: "asset:///images/navigation_bar.png" 
     } 

     Container { 
      horizontalAlignment: HorizontalAlignment.Right 
      rightPadding: 30 
      topPadding: 40 
      layout: DockLayout {} 

      ImageButton { 
       id: btnsettings 
       verticalAlignment: VerticalAlignment.Center 
       defaultImageSource: "asset:///images/navbar_icon_settings.png" 

       onClicked: { 
        // show settings page when the button is clicked 
        cppObj.onSettingsClicked(); 
       } 
      } 
     } 
    } 

    Container { 
     topPadding: 20 
     leftPadding: 20 
     rightPadding: 20 
     bottomPadding: 20 
     background: Color.create("#F4E9E1"); 
     horizontalAlignment: HorizontalAlignment.Fill 
     layout: StackLayout {} 

     Label { 
      verticalAlignment: VerticalAlignment.Center 
      horizontalAlignment: HorizontalAlignment.Left 
      text: "Add Projects" 

      textStyle { 
       // fontFamily: FontStyle.Default.Myriad 
       // fontSize: 36 
       color: Color.create("#60323C") 
      } 
     } 
    } 

    ScrollView { 
     scrollViewProperties { 
      scrollMode: ScrollMode.Vertical 
     } 

     Container { 
      verticalAlignment: VerticalAlignment.Center 
      horizontalAlignment: HorizontalAlignment.Center 
      Divider {} 

      Container { 
       rightPadding: 30 
       leftPadding: rightPadding 
       bottomPadding: 40 
       topPadding: 20 
       verticalAlignment: VerticalAlignment.Bottom 
       layout: DockLayout {} 

       ImageView { 
        horizontalAlignment: HorizontalAlignment.Center 
        verticalAlignment: VerticalAlignment.Center 
        topMargin: 40 
        imageSource: "asset:///images/create_project_frame.png" 
       } 

      Container { 
       horizontalAlignment: HorizontalAlignment.Center 
       leftPadding: 70 
       rightPadding: 70 
       topPadding: 60 

       Label { 
        horizontalAlignment: HorizontalAlignment.Center 
        verticalAlignment: VerticalAlignment.Center 
        text: qsTr("Create a Project") 
       } 
      } 

      Container { 
       leftPadding: 70 
       rightPadding: 70 
       topPadding: 150 

       TextField { 
        id: tfMemberName 
        input.submitKey: SubmitKey.Next 
        topPadding: 50 
        hintText: qsTr("project name") 
        } 
       } 

      Container { 
       rightPadding: 30 
       leftPadding: rightPadding 
       bottomPadding: 20 
       verticalAlignment: VerticalAlignment.Bottom 
       layout: DockLayout {} 

       ImageView { 
        horizontalAlignment: HorizontalAlignment.Center 
        verticalAlignment: VerticalAlignment.Center 
        topMargin: 40 
        imageSource: "asset:///images/add_member_frame.png" 
       } 

       Container { 
        horizontalAlignment: HorizontalAlignment.Center 
        leftPadding: 70 
        rightPadding: 70 
        topPadding: 60 

        Label { 
         horizontalAlignment: HorizontalAlignment.Center 
         verticalAlignment: VerticalAlignment.Center 
         text: qsTr("Add a Member") 
        } 
       } 

        Container { 
         leftPadding: 70 
         rightPadding: 70 
         topPadding: 150 

         TextField { 
          id: tfEmail 
          input.submitKey: SubmitKey.Next 
          topPadding: 40 
          hintText: qsTr("email address") 
         } 
        } 

        Container { 
         horizontalAlignment: HorizontalAlignment.Left 
         verticalAlignment: VerticalAlignment.Center 
         topPadding: 250 
         leftPadding: 180 
         layout: DockLayout {} 

        ImageButton { 
         id: btnaddmore 
         defaultImageSource: "asset:///images/button_add.png" 

         onClicked: { 
          controller.showProjectsPage(); /*var projectsPage = page.createObject(); 
          navPane.push(projectsPage);*/ 
         } 
        } 
       } 

       Container { 
        horizontalAlignment: HorizontalAlignment.Right 
        rightPadding: 250 
        topPadding: 310 

        Label { 
         horizontalAlignment: HorizontalAlignment.Right 
         text: qsTr("add more") 
          } 
         } 
        } 
       } 
      } 

      ImageButton { 
       id: btnsubmit 
       horizontalAlignment: HorizontalAlignment.Center 
       defaultImageSource: "asset:///images/button_submit.png" 
      } 
     } 
} 
/*actions: [ 
    ActionItem { 
     title: qsTr ("Add Project") 
     imageSource: "asset:///images/actionbar_icon_add.png" 
     ActionBar.placement: ActionBarPlacement.OnBar 

     /*onTriggered: { 
      _projects.addProjects() 
      navigationPane.push(addProjects.createObject()) 
     } 
    } 
]*/

}

我想做到這一點看 enter image description here

來源

2013-07-04 kev

如果我對不起，這個代碼

import bb.cascades 1.0 

Page { 

    // [0] 
    Container { 
     background: Color.Gray 
     topPadding: 40 
     leftPadding: 20 
     rightPadding: leftPadding 
     bottomPadding: topPadding 
     layout: StackLayout { 
     } 

     // [1] 
     Container { 
      leftPadding: 40 
      rightPadding: leftPadding 
      background: Color.Red 
      maxHeight: 350 

      // [2] 
      Container { 
       layoutProperties: StackLayoutProperties { 
        spaceQuota: 1.5 
       } 
       Label { 
        horizontalAlignment: HorizontalAlignment.Center 
        text: "Add a Member" 
       } 
       TextField { 
        horizontalAlignment: HorizontalAlignment.Center 
        hintText: "email address" 
       } 
      } // [2] 

      Container { 
       layoutProperties: StackLayoutProperties { 
        spaceQuota: 1 
       } 
       horizontalAlignment: HorizontalAlignment.Center 
       Container { 
        layout: StackLayout { 
         orientation: LayoutOrientation.LeftToRight 
        } 
        Button { 
         text: "+" 
        } 
        Label { 
         verticalAlignment: VerticalAlignment.Center 
         text: "add more" 
        } 
       } 

      } 
     } //[1] 

     Button { 
      horizontalAlignment: HorizontalAlignment.Center 
      text: "Button submit" 
     } 
    } // [0] 
}

會給你以下佈局：

enter image description here

只需使用您的自定義更換ButtonsImageButtons

來源

2013-07-05 03:49:44 Sunseeker

有按鈕的添加正確的標籤，並在圖片上，我想要的在添加按鈕和文本標籤正下方的棕色框圖像背景之外提交按鈕 – kev

好吧，這很好，你用想要實現的佈局更新圖像。請查看我的最新答案。 – Sunseeker

明白了，我注意到我使用了很多容器，我如何簡化它。我的qml代碼張貼在上面 – kev

放置提交按鈕qml佈局bb10

回答

相關問題