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

Comments

Comments