0

このコードは、2 つの入力テキスト ボックスを作成します。

import QtQuick 1.0

Column 
{
  width: 500
  height: 200

  Text 
  {
    id: userInfoTextA
    focus: false
    text: "Enter a value from 0 to 10:"
  }

  TextInput
  {
    id: userInputA
    focus: true

    anchors.left : userInfoTextA.right
    anchors.leftMargin : 20

    validator: IntValidator { bottom:0; top: 20 }

    Keys.onReturnPressed: 
    {
      console.log (userInputA.text)
    }
  }

  Text 
  {
    id: userInfoTextB
    focus: false
    text: "Enter a value from 10 to 20:"
  }

  TextInput
  {
    id: userInputB
    focus: true

    anchors.left : userInfoTextB.right
    anchors.leftMargin : 20

    validator: IntValidator { bottom:0; top: 20 }

    Keys.onReturnPressed: 
    {
      console.log (userInputB.text)
    }
  }
}

出力ウィンドウでは、デフォルトでフォーカスがテキスト ボックス A に設定されています。次の方法でテキスト ボックス B にフォーカスを移動するにはどうすればよいですか?
1. キーボード
2. マウス
?

4

1 に答える 1

1

だから、たくさんのささいなこと：

1) マウスでクリックすると、すでにフォーカスが移動しているはずです。それについて心配する必要はありません。

2）あなたのレイアウトは列形式では難しく、デフォルトでは TextInput には幅がなく、使いにくい

3)本当の答え: アイテムにフォーカスを設定して切り替えることができます (以下を参照)。

4) しかし、人々はアイテム間の切り替えにタブ/シフトタブを使用することに慣れているため、おそらく以下の例にも見られる KeyNavigation システムも使用する必要があります。

したがって、ここにあなたが望むことをするいくつかの修正されたサンプルコードがあります:

import QtQuick 1.0

Grid 
{
  width: 500
  height: 200
  columns: 2

  Text 
  {
    id: userInfoTextA
    text: "Enter a value from 0 to 10:"
    width: 200
  }

  TextInput
  {
    id: userInputA
    focus: true
    width: 100

    anchors.left : userInfoTextA.right
    anchors.leftMargin : 20

    validator: IntValidator { bottom:0; top: 20 }

    KeyNavigation.priority: KeyNavigation.BeforeItem
    KeyNavigation.tab: userInputB

    Keys.onReturnPressed: 
    {
      console.log (userInputA.text)
      userInputA.focus = false
      userInputB.focus = true
      event.accepted = true;
    }
  }

  Text 
  {
    id: userInfoTextB
    text: "Enter a value from 10 to 20:"
    width: 200
  }

  TextInput
  {
    id: userInputB
    width: 100

    anchors.left : userInfoTextB.right
    anchors.leftMargin : 20

    validator: IntValidator { bottom:0; top: 20 }

    KeyNavigation.priority: KeyNavigation.BeforeItem
    KeyNavigation.backtab: userInputA

    Keys.onReturnPressed: 
    {
      console.log (userInputB.text)
    }
  }
}
于 2013-09-27T13:23:58.173 に答える