激活 QML 选项卡而不是 TextField 时，如何确保 Button 具有焦点？答案

【问题标题】：How to ensure Button has focus when QML tab is activated, rather than TextField?激活 QML 选项卡而不是 TextField 时，如何确保 Button 具有焦点？
【发布时间】：2014-09-07 10:59:59
【问题描述】：

在 QML 中，我有一个包含 TextField 和 Button 的选项卡。选择选项卡而不是 TextField 时，如何确保 Button 具有焦点？将“焦点：”分别设置为 true 和 false 不会这样做。在下面的代码中，目标是让 btnRefresh 在选择选项卡时获得焦点，而不是 txtName。

main.qml:

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2  // For TabViewStyle

ApplicationWindow {
   visible: true
   width: 640
   height: 480
   title: qsTr("Hello World")

   TabView {
      id: tabView
      anchors.fill: parent
      anchors.margins: 20
      tabPosition: Qt.BottomEdge

      Tab {title: "Tab 1"; source: "mytab.qml"}
      Tab {title: "Tab 2"; source: "mytab.qml"}

      style: TabViewStyle {
         frameOverlap: 1
         tab: Rectangle {
            color: styleData.selected ? "steelblue" :"lightsteelblue"
            border.color:  "steelblue"
            implicitWidth: Math.max(text.width + 4, 80)
            implicitHeight: 20
            radius: 2
            Text {
               id: text
               anchors.centerIn: parent
               text: styleData.title
               color: styleData.selected ? "white" : "black"
            }
         }
         frame: Rectangle { color: "steelblue" }
      }
   }
}

mytab.qml:

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Rectangle {
   anchors.fill: parent

   GridLayout {
      columns: 2
      anchors.fill: parent
      rowSpacing: 10

      RowLayout {
         Layout.columnSpan: 2

         Label {
            id: lblName
            text: "Name:"
         }

         TextField {
            id: txtName;
            text: "a name"
            Layout.preferredWidth: lblName.implicitWidth * 1.5;
            focus: false
         }
      }

      TextArea {
          id: textSetup
          text: "Text Area"
          Layout.columnSpan: 2
          Layout.fillWidth: true
          Layout.fillHeight: true
      }

      Button {
          id: btnRefresh
          Layout.columnSpan: 2
          Layout.alignment: Qt.AlignHCenter
          text: qsTr("Refresh")
          focus: true
      }
   }
}

【问题讨论】：

您能否编辑您的问题以添加证明它不这样做的代码？
我更新了问题以显示对 Tab 的依赖，并提供了代码示例。

标签： button focus qml textfield

【解决方案1】：

每当您在 TabView 中切换选项卡时，都会在两个选项卡（一个消失的和一个出现的）上调用信号处理程序 onVisibleChanged，因为这些选项卡的可见性已经改变。您可以尝试将以下代码添加到您的选项卡：

Tab { 
id: tab1
title: "Tab 1"; source: "mytab.qml" 
onVisibleChanged: { 
        if (visible)  tab1.item.funcSetFocusOnButton();  
    } 
}

请注意使用item 在选项卡上调用函数的方式。现在在“mytab.qml”中，您创建了一个javascript 函数funcSetFocusOnButton，它将焦点放在您的按钮上。所以你的 mytab.qml 会有这个额外的代码：

Rectangle {
    //Your GridLayout{}

    funcSetFocusOnButton() {
        btnRefresh.forceActiveFocus();
    }
}

请注意，funcSetFocusOnButton 函数应该是基础项目的直接子项（此处为矩形）。希望这会有所帮助！

【讨论】：