QML ＜ 8 ＞ QML 动态加载 Loader + Component

QML ＜ 8 ＞ QML 动态加载 Loader + Component

Loader 作为一个占位符用于加载元素项，项的加载通过资源属性 （source property）或者资源组件（sourceCompontent）属性控制

二、示例

本文以实现tab切换页面功能，记录QML中以Loader+Component 方式实现动态加载

1.tab类目按钮

类目数据：
代码如下（示例）：

    property  var tabs_data: [

        {"name":"button_1","index":1 },
        {"name":"button_2","index":2 },
        {"name":"button_3","index":3 },

    ]

实现代码：

Rectangle
        {
            id:tab_header
            Layout.fillWidth: true
            Layout.preferredHeight: 50
            RowLayout
            {
                anchors.fill: parent
                spacing: 1
                Repeater
                {
                    model: tabs_data
                    Button
                    {
                        id:button
                        Layout.preferredWidth:80
                        Layout.fillHeight: true
                        text: modelData.name
                        onClicked:
                        {
                            if(modelData.index === 1)
                            {
                                main_area.state ="page_1"
                            }
                            else if(modelData.index === 2)
                            {
                                main_area.state ="page_2"
                            }
                            else
                            {
                                main_area.state ="page_3"
                                // mainarea_loader.sourceComponent = page_3
                            }
                        }
                    }

                }
                Item
                {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
        }

2.公共显示区

利用Loader 加载Component
代码如下（示例）：

     Rectangle
        {
            id:main_area
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height - tab_header.height
            border.color: "red"
            border.width: 1
            Loader
            {
                anchors.fill: parent
                id:mainarea_loader
                sourceComponent: page_1

            }
         }

页面Component示例：

 Component
        {
            id:page_1

            Rectangle
            {
                anchors.fill:  parent
                color: "#00B000"
                Text {
                    anchors.centerIn: parent
                    id: name
                    text: qsTr("page_1")
                }
            }

        }

3 动态页面切换

tab 按钮点击时切换公共显示区页面，这里有两种处理方式

1 直接修改Loader 的sourceComponent 属性指定目标页面

Button
      {
       id:button
       Layout.preferredWidth:80
       Layout.fillHeight: true
       text: modelData.name
       onClicked:
       {
       if(modelData.index === 1)
       {
       mainarea_loader.sourceComponent = page_1
       }

2 公共显示区Rectangle 绑定自定义状态 states，tab按钮点击修改为目标页面状态

状态定义：

states: [
         State {
         name: "page_1"
         PropertyChanges { target: mainarea_loader; sourceComponent: page_1 }
                },
        State {
        name: "page_2"
        PropertyChanges { target: mainarea_loader; sourceComponent: page_2 }
               },
        State {
        name: "page_3"
        PropertyChanges { target: mainarea_loader; sourceComponent: page_3 }
              }
       ]

页面切换，状态改变：

 Repeater
                {
                    model: tabs_data
                    Button
                    {
                        id:button
                        Layout.preferredWidth:80
                        Layout.fillHeight: true
                        text: modelData.name
                        onClicked:
                        {
                            if(modelData.index === 1)
                            {
                                main_area.state ="page_1"
                            }
                            else if(modelData.index === 2)
                            {
                                main_area.state ="page_2"
                            }
                            else
                            {
                                main_area.state ="page_3"
                                
                            }
                        }
                    }
                }

总结

示例程序显示效果：