在 Flutter App 中使用 GetX 时如何响应屏幕方向的变化？答案

【问题标题】：How do I respond to screen orientation changes when using GetX in a Flutter App?在 Flutter App 中使用 GetX 时如何响应屏幕方向的变化？
【发布时间】：2022-10-30 19:45:04
【问题描述】：

在 Flutter App 中使用 GetX 时如何响应屏幕方向的变化？

OrientationBuilder 不起作用，即使包裹在 Obs 中并使用 Get.context.isLandscape 等。

在测试应用程序中，我尝试了以下方法无济于事：

class Home extends GetView<StoreController> {
  Home({Key? key}) : super(key: key) {
    Get.put(StoreController());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Orientation Test"),

        // Does not work
        leading: OrientationBuilder(
          builder: (ctx, or) {
            return Get.context?.isLandscape ?? false 
                ? const Icon(Icons.menu) 
                : const Icon(Icons.add);
          },
        ),

        // Does not work
        leading: OrientationBuilder(
          builder: (ctx, orientation) {
            return orientation == Orientation.landscape
                ? const Icon(Icons.menu)
                : const Icon(Icons.add);
          },
        ),

        // Does not work (error: improper use of Obs())
        leading: Obx(() {
          //controller.counter.value++;
          return OrientationBuilder(
            builder: (ctx, orientation) {
              return orientation == Orientation.landscape 
                  ? const Icon(Icons.menu) 
                  : const Icon(Icons.add);
            },
          );
        }),


      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Obx(() => Text('${controller.counter.value}', style: Theme.of(context).textTheme.headline4)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: controller.incCounter, tooltip: 'Increment', child: const Icon(Icons.add)),
    );
  }
}

简单控制器：

class StoreController extends GetxController {
  final counter = 0.obs;

  void incCounter() {
    counter.value++;
  }
}

【问题讨论】：

我目前正在Android模拟器上进行测试。该应用程序将在生产中的所有平台上运行。

标签： android flutter orientation screen-orientation flutter-getx

【解决方案1】：

您可以通过以下方式执行此操作：

class MyClass extends StatefulWidget {
  MyClass({Key? key}) : super(key: key);

  @override
  State<MyClass> createState() => _MyClassState();
  }

class _MyClassState extends State<MyClass> {
  RxBool isLandscape = false.obs;          // To check the orientation
  ....
  @override
  Widget build(BuildContext context) {
    isLandscape.value = context.isLandscape;  // to Update the value continuously on any change.
    return Scaffold(
      body: allImages(),
    }
  }

Obx allImages() => Obx(() => GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: isLandscape.value ? 5 : 2)   // To Update the UI
    ....
    ));

【讨论】：