HELP ビューの作成
アプリ本体からHELPボタンを押すとHELP画面が表示されて、戻るボタンを押すと元に戻るというのを作ってみる。
File>New>File... から SwiftUI VIEW を選んで、ファイル名はHelpView(別になんでもいい）
できたファイルをこんなふうにしてみる
import SwiftUI
struct HelpView: View {
@Binding var helpFlg : Bool
let helpText = """
HELPのテキスト
いっぱい書いて
横にどれだけ広がってくれるのかを試すために長い文章を書いてみる。
おこう
"""
var body: some View {
ZStack {
Color.white
VStack {
Text("HELP").font(.headline)
ScrollView {
Text(helpText)
}
Spacer()
Button(" ←戻る "){
self.helpFlg = false
}
.padding(5)
.background(Color.gray)
.foregroundColor(.white)
.clipShape(Capsule())
.frame(maxWidth: .infinity, alignment: .topLeading)
}
}
}
}
いっぱい盛り込んだ。
@Binding var helpFlg : Bool
これは親のVIEWでhelpflgがtrueならこのビューを表示し、このビューでボタンを押すと親ビューで表示を消すための変数。
let helpText = """
HELPのテキスト
いっぱい書いて
横にどれだけ広がってくれるのかを試すために長い文章を書いてみる。
おこう
"""
HELPに表示するテキストを """ """ ダブルコーテーション３つで囲むとテキスト内の改行も許される。このテキストは実行中に変更されることはないので let で宣言。
ZStack {
Color.white
VStack {
Color.white は白で塗りつぶし。これをZStackで以下のViewと重ね書きする。
塗りつぶしておかないと、親VIEWの画像と重なってしまう。
Text("HELP").font(.headline)
ScrollView {
Text(helpText)
}
最初のTextはタイトル表示。フォントも指定している。
その次、ScrollView はテキストが長かったときに画面スワイプでスクロールしてくれる。
そしてText(helpText) で実際のテキストを表示。
Spacer()
Button(" ←戻る "){
self.helpFlg = false
}
.padding(5)
.background(Color.gray)
.foregroundColor(.white)
.clipShape(Capsule())
.frame(maxWidth: .infinity, alignment: .topLeading)
Spacer() を置いて、ボタンが一番下に表示されるよう
Button(" ←戻る "){
self.helpFlg = false
}
ボタンとしてテキストを使っているのだけど、そこに表示されるテキストと、
ボタンを押した時のアクション。helpFlagをfalseにしてるだけ。
その下に続くのはボタンの装飾
.padding(5)
これがないとテキストギリギリに枠ができる。数値で隙間調整。
.background(Color.gray)
背景色指定。
.foregroundColor(.white)
文字色指定
.clipShape(Capsule())
文字を囲む枠の設定
.frame(maxWidth: .infinity, alignment: .topLeading)
ボタンを画面の左に表示するという設定。topは与えられた枠の上部、Leadingは左詰め。
Spacerで下詰めにしているから、 .leading でもよかった。
で、Viewをこんなふうに作ると、PreViewで HelpFlg がないよ〜というエラーになる。
@State var helpflg = true
で変数を宣言してやればいいのだけれど、PreViewで変数を宣言するとこれまた怒られる。
PreViewなんていらないなら、
// HelpView()
Text("HELP VIEW")
として誤魔化すのが簡単。
でも、やっぱりプレビューも見たいよねってときは、
struct helpWrap: View {
@State var helpflg = true
var body: some View{
HelpView(helpFlg: $helpflg)
}
}
とやって、HelpViewを呼び出すビューを作っておいて、
struct HelpView_Previews: PreviewProvider {
static var previews: some View {
// HelpView()
helpWrap()
}
}
プレビューからはこっちを呼び出す。
親ビューからHelpView w呼び出すときも
@State var helpflg = true
の宣言と、
HelpView(helpFlg: $helpflg)
のように引数指定が必要。
親ビューに表示するボタンは
Button(" HELP "){
self.helpflg = true
}
.padding(5)
.background(Color.gray)
.foregroundColor(.white)
.clipShape(Capsule())
.frame(maxWidth: .infinity, alignment: .topLeading)
戻るボタンと同じところに表示しておくと、わかりやすいかも。
