Flutter开发之——getX-获取视图的几种方式(13)

最新推荐文章于 2024-08-10 08:42:14 发布

PGzxc

最新推荐文章于 2024-08-10 08:42:14 发布

阅读量2.9k

点赞数 2

分类专栏： Flutter 文章标签： flutter getX 视图

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/124734226

版权

Flutter 专栏收录该内容

122 篇文章 43 订阅

订阅专栏

本文详细介绍了在Flutter中使用GetX库创建不同类型的视图，包括GetView、GetResponsiveView和GetWidget。每个类型的视图都有其特定的使用场景和特点，如GetView是最常用的视图，GetResponsiveView则提供了屏幕响应式布局的能力。示例中展示了如何绑定控制器、构建页面以及利用屏幕信息来定制视图内容。

摘要由CSDN通过智能技术生成

一概述

本文介绍在Flutter-getX中，获取视图的几种方式

GetView：最常用，是个const Stateless Widget，GetView<Controller>绑定控制器后可直接使用
GetResponsiveView：响应式视图，该视图包含screen属性，其中包含关于屏幕大小和类型的信息
GetWidget：使用较少，不是个const Stateless视图，它缓存了一个控制器

二 GetView示例

2.1 GetView-Controller控制器(控制器内容相同)

class AwesomeController extends GetxController {
  final String title = 'My Awesome View:';
  var count = 0.obs;
  increment() => count++;
}

2.2 GetWiew-Bindings页面绑定(绑定内容所做相同)

class AwesomeBindings implements Bindings
{
  @override
  void dependencies() {
  Get.lazyPut(() => AwesomeController());
  }
}

2.3 GetView-Page页面(构建使用方法为Widget build)

class AwesomeView extends GetView<AwesomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title:  Text('AwesomeView')),body: Container(
      padding: const EdgeInsets.all(20),
      child: Column(children: [
        Obx(()=>Text(controller.title+"${controller.count}")),
        RaisedButton(child: Text('increment'),onPressed: ()=>controller.increment())
      ],), // just call `controller.something`
    ));
  }
}

2.4 效果图

##三 GetResponsiveView示例

3.1 GetResponsiveView-Controller 控制器(控制器内容相同)

class GetResponsiveViewController extends GetxController{
  final String title = 'GetResponsiveView View:';
  var count = 0.obs;
  increment() => count++;

}

3.2 GetResponsiveView-bindings页面绑定(绑定内容所做相同)

class GetResponsiveViewBindings implements Bindings{
  @override
  void dependencies() {
    Get.lazyPut(() => GetResponsiveViewController());
  }
}

3.3 GetResponsiveView-Page 页面(构建使用方法是Widget builder())

class GetResponsiveViewSample extends GetResponsiveView<GetResponsiveViewController> {
  // GetResponsiveViewSample({Key? key})
  //     : super(
  //           key: key,
  //           settings: const ResponsiveScreenSettings(
  //               desktopChangePoint: 800,
  //               tabletChangePoint: 700,
  //               watchChangePoint: 600));

  @override
  Widget builder() {
    return Scaffold(
      appBar: AppBar(title: Text('GetResponsiveViewSample')),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: _buildWidgetPage(), // just call `controller.something`
      ),
    );
  }

  Widget _buildWidgetPage() {
    return Column(children: [
      Text("width:${screen.width},height:${screen.height},isPhone:${screen.isPhone}"),
      SizedBox(height: 20),
      Obx(() => Text(controller.title + "${controller.count}")),
      RaisedButton(child: Text('increment'), onPressed: () => controller.increment())
    ]);
  }
}

说明：此处的页面构建使用的是Widget builder()，其他页面构建使用的是Widget build(BuildContext context)

3.4 效果图

四 GetWidget示例

4.1 GetWidget-Controller控制器(控制器内容相同)

class GetWidgetController extends GetxController{
  final String title = 'GetWidget View:';
  var count = 0.obs;
  increment() => count++;
}

4.2 GetWidget-bindings页面绑定(绑定内容所做相同)

class GetWidgetBindings implements Bindings{
  @override
  void dependencies() {
   Get.lazyPut(() => GetWidgetController());
  }
}

4.3 GetWidget-Page页面(构建使用方法为Widget build(BuildContext context))

class GetWidgetSample extends GetWidget<GetWidgetController>{

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title:  Text('GetWidget')),body: Container(
      padding: const EdgeInsets.all(20),
      child: _buildWidetPage(), // just call `controller.something`
    ));
  }
  Widget _buildWidetPage(){
    return  Column(children: [
      Obx(()=>Text(controller.title+"${controller.count}")),
      RaisedButton(child: Text('increment'),onPressed: ()=>controller.increment())
    ]);
  }
}