Flutter视图控制器插件flutter_view_controller的使用

Flutter视图控制器插件flutter_view_controller的使用

复杂界面无需费力即可实现。可重用组件具有完全控制其状态和布局的能力。父母与子之间双向通信变得容易。用户界面更新可以直接从您的业务逻辑中进行。所有这些功能以及更多功能，均采用优雅简洁的语法。

目录

• 层级
• 视图
• 控制器
• 通知器
  • 视图更新
  • 监听控制器内的更改
  • 连接通知器
  • 通知列表
  • 无值的通知器
• 屏幕尺寸适配
• 贡献

层级

控制器由子控制器组成，子控制器作为参数传递给相应的子视图。

app.dart

class AppController extends Controller {
  ChildController child = ChildController();

  [@override](/user/override)
  onInit() {}

  [@override](/user/override)
  onClose() {}
}

class AppView extends ViewOf<AppController> {
  const AppView({required super.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ChildView(controller: controller.child)
      )
    );
  }
}

child.dart

class ChildController extends Controller {
  [@override](/user/override)
  onInit() {}

  [@override](/user/override)
  onClose() {}
}

class ChildView extends ViewOf<ChildController> {
  const ChildView({required super.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text("Child");
  }
}

视图

视图部分负责构建布局。默认情况下，每个视图都是静态的。响应式通过通知器实现。

它可以用于整个页面或只是某个组件。每个视图都需要一个控制器，即使它不被使用。

view.dart

class ExampleView extends ViewOf<ExampleController> {
  const ExampleView({required super.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      width: 30,
      color: Colors.red,
      child: ...
    );
  }
}

控制器

Controller 类负责视图的行为。它包含视图的所有操作和属性，并且每个视图都有直接访问其对应控制器的方法。控制器包括方法和属性。

controller.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';

class ExampleController extends Controller {
  ButtonController _buttonController;
  int counter = 0;
  
  [@override](/user/override)
  onInit(){
    _configButtonController();
  }

  _configButtonController(){
    _buttonController.onClick.then(incrementCounter);
  }

  incrementCounter(){
    counter++;
  }

  [@override](/user/override)
  onClose(){}
}

通知器

通知器对于Flutter视图控制器组件的状态管理至关重要。它们负责通知视图关于属性的变化。如果您有会影响布局的数据，则需要使用通知器。

您需要在控制器中声明通知器，并且所有通知器都必须有一个类型。

视图更新

您可以使用 show 方法在其变化时进行监听。要改变通知器的值，只需将其设置为新值。

app.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';

class AppController extends Controller {

  Notifier<String> message = Notifier("Default Message");
  Notifier<int> number = Notifier(0);

  [@override](/user/override)
  onInit(){
    message.value = "New message";
    number.value++;
  }

  [@override](/user/override)
  onClose(){}
}

class AppView extends View<AppController> {
  AppView({required super.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(children:[
      Container(
        child: controller.message.show((snapshotMessage) => Text(snapshotMessage))
      ),
      Container(
        child: controller.number.show((snapshotNumber) => Text(snapshotNumber.toString()))
      ),
    ]);
  }
}

监听控制器内的更改

您还可以在控制器内监听更改。

controller.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';

class MessageController extends Controller {
  Notifier<String> message = Notifier('Default Message');

  [@override](/user/override)
  onInit(){
    message.listen((snapshotMessage) =>  print(snapshotMessage));
  }

  [@override](/user/override)
  onClose(){}
}

连接通知器

您也可以连接到另一个通知器以传播更改。这在您有复杂的结构时非常有用。

child.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';

class ChildController extends Controller {

  Notifier<String> message = Notifier("Default Message");

  [@override](/user/override)
  onInit(){
    // 这将在父消息更新时生效
    message.listen((newMessage) => print(newMessage));
  }

  [@override](/user/override)
  onClose(){}
}

parent.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';
import 'child.dart';

class ParentController extends Controller {
  ChildController child = ChildController();
  Notifier<String> message = Notifier("Default Message");

  [@override](/user/override)
  onInit(){
    message.connect(child.message);
    message.value = "New message";
  }

  [@override](/user/override)
  onClose(){}
}

通知列表

您还可以使用 NotifierList 在布局中创建反应式列表。NotifierList 目前仍处于早期阶段，但它已经具备了改变其反应性的必要方法。

app.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';

class AppController extends Controller {

  NotifierList<String> messages = NotifierList();

  [@override](/user/override)
  onInit(){}

  addMessage(){
    messages.add('Message');
  }

  [@override](/user/override)
  onClose(){}
}

class AppView extends View<AppController> {
  AppView({required super.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return controller.messages.show((messages) => 
      Column(
        children:[
          GestureDetector(
            onTap: controller.addMessage,
            child: Container(
                child: Text('Add message')
            ),
          ),
          ...messages.map((message) => Text(message))
          ]
        ),
    );
  }
}

注意，show 方法返回一个单个的 Widget，因为它始终返回一个 NotifierListener。因此，要在列表中使用它，您需要将整个列表包裹在其中。之后，您可以按需展开项目。

无值的通知器

如果您想在不改变任何值的情况下通知某些事件，可以使用 NotifierTicker。它可以通过所有通知器的功能生成脉冲。

然而，您不是向其添加新值，而是使用 tick() 方法触发它。此外，它的 show 方法不接受任何值。

app.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';

class AppController extends Controller {

  String message = 'Default Message';
  NotifierTicker ticker = NotifierTicker();

  [@override](/user/override)
  onInit(){}

  pulse(){
    message = 'New Message';
    ticker.tick();
  }

  [@override](/user/override)
  onClose(){}
}

class AppView extends View<AppController> {
  AppView({required AppController controller}) : super(controller: controller);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return controller.ticker.show(() => 
      GestureDetector(
        onTap: controller.pulse,
        child: Container(
            child: Text(controller.message)
        ),
      ),
    );
  }
}

NotifierTicker 用于内置的更新方法，该方法在所有受其控制的页面上刷新。

屏幕尺寸适配

为了简化小部件大小的计算，Flutter视图控制器在视图中带有一个内置属性。您可以随时访问屏幕宽度和高度，甚至可以根据视图计算百分比来调整组件的尺寸。

app.dart

import 'package:flutter_view_controller/flutter_view_controller.dart';

class AppView extends View<AppController> {
  AppView({required AppController controller}) : super(controller: controller);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: size.height(55.2),
      width: size.width(10),
      ...
    )
  }
}