LoginSignup
0
0

More than 3 years have passed since last update.

たくさんのボタンで遊んでみた

Posted at

SwiftUIでボタンを押すとポップアップが表示され、1クッション置いた後そのボタンに動作がなされるものを自分なりに表現できたので、学習の記録のために投稿しました。

スクロールビューの中にボタンをたくさん配置して、それぞれで動作するでいるように頑張りました。

import SwiftUI

struct ContentView: View {
    @State var array = ["あいうえお","かきくけこ","さしすせそ","たちつてと","なにぬねの","はひふへほ","まみむめも","やゆよ","らりるれろ","わをん"]
    @State var ShowConfirmFlags = Array(repeating: false, count: 10)
    @State var flags = Array(repeating: false, count: 10)

    var body: some View {
            ScrollView{
                ForEach(0..<array.count) { num in
                    Button(action: {
                        ShowConfirmFlags[num] = true
                    }) {
                        Text(array[num])
                                 .font(.title2)
                                     .fontWeight(.black)
                                     .foregroundColor(Color.white)
                                     .multilineTextAlignment(.center)
                                     .padding(.all)
                                     .background(Color.red.opacity(0.5))
                                     .cornerRadius(5)
                                     .padding(.all)
                            .shadow(color: .gray, radius:flags[num] ? 0:4, x: flags[num] ? 0 : 5, y: flags[num] ? 0 : 5)
                            .offset(x: flags[num] ? 5 : 0,y: flags[num] ? 5 : 0)
                    }.alert(isPresented: $ShowConfirmFlags[num]) {
                        Alert(title: Text("押し込む"),
                              primaryButton: .default(Text("いいえ")),
                              secondaryButton: .default(Text("はい")) {
                                flags[num] = true
                              }
                        )
                    }
                }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        VStack{
            ContentView()

        }
    }
}

表示させるテキストのデザインに少し凝ってしまったためText以下の部分が長くなってしまいました…

このgifでは一つ目のボタンしかしていませんが 、下のボタン達もちゃんと動きました。
ezgif.com-video-to-gif.gif

まだ初学者でネットの情報のもとに作成したため、あまりスマートなやり方ではないかもしれません。これからも見様見真似で、色々なことをできるようにして自分が作りたいアプリを完成させたいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0