SwiftUIでは動作を捉えて反応する基本的なオブジェクトは用意されていますが、その他のオブジェクトに反応をつけたい場合があります。オブジェクトに .onTapGesture を追加します。
- 前回のコードに続けて書く
- @State var tap_text = “タップ前” を追加
- VStackの一番下に **Text( tap_text )**を作成
- 上記のオブジェクトに .onTapGesture { … } を追加
- タップ時の処理として tap_text = “タップしました” を記述
.onTapGestureはそのオブジェクトをタップしたときの反応を書くことができます。ただしButtonやLinkに触れたときのような見た目の変化はありません。.onTapGestureを用いる場合、良いインタラクションのために見た目の変化なども書く必要がありますので注意してください。
コード#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import SwiftUI
struct ContentView: View {
@State var message:String = ""
@State var input_text:String = "あいうえお"
@State var tap_text:String = "タップ前"
var body: some View {
VStack {
Text( message )
.frame( width: .infinity, height: 50 )
Button {
print( "押しました" )
message = "押しました"
}
label: {
Label( "アイコンを含むボタン", systemImage: "plus" )
.foregroundStyle( .white )
.padding( .vertical, 10 )
.padding( .horizontal, 20 )
.background( .blue )
.clipShape( RoundedRectangle(cornerRadius: 8) )
}
Link(
"外部リンク",
destination: URL( string:"https://wdkk.co.jp/" )!
)
.padding( 20 )
TextField( "プレイスホルダー", text: $input_text )
.padding( 10 )
.border( .gray, width: 1.0 )
.padding( 20 )
Text( input_text )
.padding( 20 )
.frame( width: .infinity, height: 50 )
Text( tap_text )
.padding( 20 )
.frame( width: .infinity, height: 50 )
.onTapGesture {
tap_text = "タップしました"
}
}
}
}
|
タップ後#
