ボタンクリックによるテキスト切り替え

前回の授業で2つのボタンを追加しました。1つはクリックするとボタンのテキストが変わり、もう1つはクリックすると現在のウィンドウを閉じます。今回は1つ目のボタンに少し複雑なロジックを追加します。クリックするたびにテキストが交互に切り替わる動作を実装し、Pascalの文法を学ぶことを目的とします。

前回作成したプロジェクトを開きます

pasファイル内のクリックイベント関数を直接編集するか、下記の手順で1つ目のボタンのイベント関数に移動できます。

イベント関数のコードを下記に置き換えてください

procedure TForm1.Button1Click(Sender: TObject);
{ ボタンのTagプロパティで状態を記録し、テキスト切り替えを実現 }
begin
  // Tagの値で状態判定:0=初期状態、1=切り替え後の状態
  if Button1.Tag = 0 then
  begin
    Button1.Caption := 'Press again';  // ボタン表示テキストを変更
    Button1.Tag := 1;                  // 状態フラグを1に設定
  end
  else
  begin
    Button1.Caption := 'Press';        // 元のテキストに戻す
    Button1.Tag := 0;                  // フラグを0にリセット
  end;
end;Code language: JavaScript (javascript)

ボタンイベントへ移動する手順

保存済みのLazarusプロジェクトを開き、Form1デザイン画面に切り替えて、画面上の Press と書かれたボタン(Button1)をクリックします

コントロールを選択した状態で、右側の「オブジェクトインスペクター(Object Inspector)」の Events(イベント) タブを開きます

OnClick クリックイベントの行を探し、右側の入力欄をクリック後、末尾の ... 省略記号ボタンを押すと、コードエディタの対応関数へ自動ジャンプします

元のコードをすべて削除し、下記の完全なコードを貼り付けます。プロジェクトを保存→コンパイル→実行し、ボタンをクリックするとテキストが交互に切り替わります

  1. Tagプロパティ:すべてのフォームコントロールに標準搭載された整数型プロパティ。任意の数値フラグを保存でき、本サンプルでは0と1の2状態のみ使用します
  2. 1回目クリック:Tag=0 → テキストが Press again に変わり、Tagが1に設定される
  3. 2回目クリック:Tag=1 → テキストが Press に戻り、Tagが0にリセットされる
  4. 連続してクリックするたびにテキストが切り替わり、スイッチのような動作になります

上記コードはボタンのTagプロパティに状態を記憶させることで、テキストの切り替え機能を実現しています。

動作デモ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です