flutter使用obs检测页面数据变化,不用使用StatefulWidget和setState方法

105 阅读1分钟

flutter使用obs检测页面数据变化,不用使用StatefulWidget和setState方法

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart'; // 导入 CounterController

//用getX作为数据的管理
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: CounterPage(num: 0),
    );
  }
}

class CounterPage extends StatelessWidget {
  final int num; //页面编号
  var count = 0.obs ; // 声明一个可观察的变量来存储计数器的值
  void increase(){
    count++;
  }
  void decrease(){
    count--;
  }
  CounterPage({super.key, required this.num});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX Counter Example $num'),
        actions: [
          IconButton(
              onPressed: () {
                // Get.to(CounterPage());
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
                  return CounterPage(num: num+1,);
                }));
              },
              icon: const Icon(Icons.add_reaction_rounded)),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text('Count: ${count}',
                style: TextStyle(fontSize: 24.0))),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () => increase(),// 调用增加方法
              child: Text('Increment'),
            ),
            ElevatedButton(
              onPressed: () => decrease(), // 调用减少方法
              child: Text('Decrement'),
            )
          ],
        ),
      ),
    );
  }
}