Fusion风格下StackLayout中Dial控件显示异常的原因与解决

原因 #

Fusion风格的Dial控件实现中，其完整渲染逻辑依赖控件初始化时处于可见状态。而StackLayout的默认行为是仅将当前索引对应的页面设为可见，其他页面会被设置为visible: false。当Dial在不可见的Tab2页面初始化时，Fusion样式没有正确计算控件的尺寸、刻度布局等渲染所需的上下文信息，即使后续切换到Tab2让控件变为可见，也不会自动触发完整的重绘流程，最终导致只显示部分刻度。

而Material等风格的Dial控件在实现时，要么处理了可见性变化的场景，要么初始化逻辑不依赖可见状态，因此能正常显示。

修复方案 #

方案1：用Loader延迟加载Tab2的Dial #

通过Loader在Tab切换到Tab2时才加载Dial，确保Dial初始化时处于可见状态，让Fusion样式能正确完成渲染。

修改后的代码：

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    ColumnLayout {
        anchors.fill: parent 
        spacing: 0
        
        TabBar {
           id: tabBar
           Layout.fillHeight: true; Layout.fillWidth: true 
           Layout.minimumHeight: tab1.height
           Layout.maximumHeight: tab1.height
           
           TabButton {
               id: tab1
               text: "Tab1"
               width: implicitWidth
           }
           TabButton {
               text: "Tab2"
               width: implicitWidth
           }
        }

        StackLayout {
            currentIndex: tabBar.currentIndex
            Layout.fillHeight: true; Layout.fillWidth: true 
            
            Page {
                anchors.fill: parent 
                Dial {
                    inputMode: "Circular"
                }
            }
            Page {
                anchors.fill: parent
                // 用Loader延迟加载，只有当前页可见时才创建Dial
                Loader {
                    anchors.centerIn: parent
                    sourceComponent: Dial {
                        inputMode: "Circular"
                    }
                    active: parent.parent.currentIndex === 1
                }
            }
        }
    }
}

方案2：监听可见性变化，强制Dial重绘 #

给Tab2的Dial添加可见性变化的信号处理，手动触发控件的重新绘制，强制更新渲染状态。

修改后的代码：

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    ColumnLayout {
        anchors.fill: parent 
        spacing: 0
        
        TabBar {
           id: tabBar
           Layout.fillHeight: true; Layout.fillWidth: true 
           Layout.minimumHeight: tab1.height
           Layout.maximumHeight: tab1.height
           
           TabButton {
               id: tab1
               text: "Tab1"
               width: implicitWidth
           }
           TabButton {
               text: "Tab2"
               width: implicitWidth
           }
        }

        StackLayout {
            currentIndex: tabBar.currentIndex
            Layout.fillHeight: true; Layout.fillWidth: true 
            
            Page {
                anchors.fill: parent 
                Dial {
                    inputMode: "Circular"
                }
            }
            Page {
                anchors.fill: parent
                Dial {
                    id: tab2Dial
                    inputMode: "Circular"
                    // 监听可见性变化，强制重绘
                    onVisibleChanged: {
                        if (visible) {
                            // 强制更新控件的布局和渲染
                            forceActiveFocus()
                            update()
                        }
                    }
                }
            }
        }
    }
}

方案3：修改StackLayout的堆叠模式（不推荐） #

将StackLayout的stackingMode设为StackLayout.StackAll，让所有页面保持可见状态，这样Dial初始化时就是可见的。但这种方式会同时渲染所有页面，可能造成不必要的性能开销，仅适合简单场景。

修改代码片段：

StackLayout {
    currentIndex: tabBar.currentIndex
    Layout.fillHeight: true; Layout.fillWidth: true 
    stackingMode: StackLayout.StackAll // 所有页面保持可见
    
    // ... 页面代码不变
}

内容的提问来源于stack exchange，提问作者eejakobowski