在Flutter App中使用GetX时,如何响应屏幕方向的更改?

fnatzsnv  于 2023-04-07  发布在  Flutter
关注(0)|答案(2)|浏览(173)

在Flutter App中使用GetX时,如何响应屏幕方向的更改?
OrientationBuilder不工作,即使 Package 在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++;
  }
}
pbwdgjma

pbwdgjma1#

你可以通过以下方式做到这一点:

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
    ....
    ));
oknrviil

oknrviil2#

您可以使用GetResponsiveView代替GetView。这将给予您可以访问不同的布局扩展,例如screen
然后你有不同的选项来做你想做的事情。一个是使用mobile()phone()tablet()desktop()覆盖,但你也可以使用builder()方法来做。

class HomeView extends GetResponsiveView< StoreController > {
          HomeView({Key? key})
              : super(
                  key: key,
                  alwaysUseBuilder: false, // This is needed to use the mobile(), phone(), tablet() and desktop() overrides
                );
        
          @override
          Widget? phone() => const HomePhoneView();
        
          @override
          Widget? tablet() => screen.context.isLandscape
              ? const HomeDesktopView()
              : const HomeTabletView();
        
          @override
          Widget? desktop() => const HomeDesktopView();
        }

相关问题