クラスのゲッター
CoddyのFlutterジャーニー「状態管理」セクションの一部。レッスン 6/27。
他の値から導き出せる値は、保存する必要がありません。残っているグラスの数は、目標からこれまでに飲んだグラスの数を引いたものです。ゲッターを使うと、尋ねるたびに計算できます。
class WaterLog {
int glasses = 0;
int goal = 8;
int get left => goal - glasses;
bool get done => glasses >= goal;
}ゲッターには型、getという語、名前があり、括弧はありません。=>は「結果は〜です」という意味です。フィールドと同じように、log.leftと書いて参照します。log.left()とは書きません。
フィールドの場合、値を設定した時点の数が保持されます。ゲッターは読み取るたびに再計算されるため、古い値になることはありません。グラスを1杯飲めば、次のビルドでlog.leftは1つ少なくなります。
チャレンジ
簡単ページが自分で計算し、目標を達成すると数がゼロを下回ります。ルールを WaterLog に移しましょう。
- ゲッター
leftを追加します。目標からグラスの数を引いた値です。 - ゲッター
doneを追加します。グラスの数が目標に達したらtrueになります。 log.doneの場合はGoal reached!を表示し、それ以外の場合はlog.leftに応じて8 to go、7 to goなどを表示します。
自分で試してみよう
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class WaterLog {
int glasses = 0;
int goal = 8;
void drink() {
glasses = glasses + 1;
}
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final log = WaterLog();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Water')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'${log.goal - log.glasses} to go',
style: const TextStyle(fontSize: 32),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
setState(() {
log.drink();
});
},
child: const Text('Drink a glass'),
),
],
),
),
);
}
}
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
状態管理のすべてのレッスン
自分で練習してみよう: Flutterオンラインコンパイラ