🧩

@Stateを理解したい

2023/11/24に公開

iOS

SwiftUI

tech

Overview

SwiftUIには、FlutterのsetStateと同じようなものがある。それが、@Stateです。ライフサイクルの説明をすると、画面が切り替わるとか、数字が増えていくユースケースで使用します。

setStateについて知りたい人はこちらを見てください
仕組みは、単純で状態を保持したり画面が更新される仕組みですね。

Flutterのカウンターだとこんな感じですね

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Flutter Demo', home: CounterWidget());
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Count: $_counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

summary

@Stateを使うときは、structの{}の下らへんに書きます。今回はカウンターアプリで例をご紹介します。

使い方

状態を扱う変数を定義する

@State var count: Int = 0

カウンターを増減するボタンを作成する。{}の中に処理を書く。変数に、演算子をつけて、増減ができるようにする。
足し算なら、= +1でも良いし+= 1と書くと、同じように機能する処理を書けます。
引き算なら、= -1でも良いし-= 1と書くと、同じように機能する処理を書けます。

引き算

Button("-") {
                count -= 1
            }

足し算

Button("+") {
                count += 1
            }

全体のコード

import SwiftUI


struct ContentView: View {
    @State var count: Int = 0

    var body: some View {
        HStack {
            Button("-") {
                count -= 1
            }
            Text("Count: \(count)")
            Button("+") {
                count += 1
            }
        }
    }
}


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

thoughts

今回使った@Stateについてまとめると...

@Stateの役割

struct内で値を変更できるようにすること
値を変更したら、値を使っているViewを再描画する

Overview

summary

thoughts

Discussion