Provider1
這個代碼示例演示了如何使用Provider包裝計數器並在Flutter應用程序中共享狀態。
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// 定義一個CounterProvider類別,用於管理計數器的狀態
class CounterProvider with ChangeNotifier {
int _count = 0;
// 返回當前計數器的值
int get count => _count;
// 將計數器值增加1,並通知監聽器數據已更改
void increment() {
_count++;
notifyListeners();
}
// 將計數器值減少1,並通知監聽器數據已更改
void decrement() {
_count--;
notifyListeners();
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 在應用程序的根部署CounterProvider
return ChangeNotifierProvider(
create: (context) => CounterProvider(),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
// 使用context.read來獲取CounterProvider實例
child: Consumer<CounterProvider>(
builder: (context, counterProvider, _) {
// 顯示計數器的當前值
return Text(
'Count: ${counterProvider.count}',
style: TextStyle(fontSize: 24.0),
);
},
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () {
// 使用context.read來獲取CounterProvider實例並調用increment函數
context.read<CounterProvider>().increment();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
SizedBox(height: 16.0),
FloatingActionButton(
onPressed: () {
// 使用context.read來獲取CounterProvider實例並調用decrement函數
context.read<CounterProvider>().decrement();
},
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
],
),
);
}
}
Last update :
13 novembre 2024
Created : 13 novembre 2024
Created : 13 novembre 2024