vscode-flutter.xml-layout

Flutter 的 XML 布局。将 Angular 的风格带入 Flutter！

想象一下，你可以做到这一点

<Container width="50 | widthPercent"
           height="50 | heightPercent"
           color="blue"
           :text="'Hello world!'"
           :opacity=".9"
           :center
           :if="ctrl.textVisible | behavior" />

而不是这样做

    final size = MediaQuery.of(context).size;
    final __widget = StreamBuilder(
      initialData: ctrl.textVisible.value,
      stream: ctrl.textVisible,
      builder: (BuildContext context, snapshot) {
        if (snapshot.data) {
          return Opacity(
            opacity: .9,
            child: Center(
              child: Container(
                color: Colors.blue,
                height: (size.height * 50) / 100.0,
                width: (size.width * 50) / 100.0,
                child: Text(
                  'Hello world!'
                )
              )
            )
          );
        }
        else {
          return Container(width: 0, height: 0);
        }
      }
    );
    return __widget;

大约需要20行代码，如果你只是更新了:text属性来使用流变量:text="ctrl.myTextStream | stream"，这还需要另外4行代码用于StreamBuilder。

扩展功能

  • 将UI代码（小部件及其状态）与业务逻辑分离。
  • 带来一些Angular的特性，如管道、条件等...
  • 提供内置属性和管道，使编码更加容易。
  • 根据json文件生成本地化代码。
  • 表单和动画变得简单。
  • 可自定义！因此，开发人员可以添加自己的属性并修改某些功能。
  • 支持代码补全、悬停信息、转到定义、诊断和代码操作。

示例

这是一个工作示例

开始使用

  1. 从vscode marketplace安装扩展
  2. 创建一个新的Flutter项目
  3. 安装先决软件包 
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  provider: ^3.0.0+1
  flutter_xmllayout_helpers: ^0.0.9
  1. 执行以下步骤之一
    • 清除所有main.dart内容，然后使用fxml_app代码片段创建应用程序。
    • 修改main.dart以使用provider包中的MultiProvider
      • 将PipeProvider（来自flutter_xmllayout_helpers包）注册为提供程序。
      • 注册RouteObserver<Route>作为提供程序（仅当您想在小部件的控制器中使用RouteAware事件时）。

本地化

  1. 在lib文件夹内创建一个名为i18n的文件夹，并添加以区域设置代码命名的JSON文件，例如en.json。
  2. 在主文件中导入i18n/gen/delegate.dart。
  3. 在MaterialApp的localizationsDelegates参数中注册AppLocalizationsDelegate()。
  4. 要在UI中使用本地化文本，请参阅管道文档。

XML布局

  1. 创建一个新文件夹，并将其命名为您的页面/小部件名称，例如home。
  2. 然后，在home文件夹内创建一个home.xml文件。
  3. 使用fxml_widget代码片段创建入门布局，根据需要进行修改并保存。该扩展将生成一个名为home.xml.dart的文件，其中包含UI代码，以及一个名为home.ctrl.dart的文件（如果不存在），其中包含控制器类，您可以将代码放在这里（仅在添加controller属性时生成）。

示例

<HomePage controller="HomeController" routeAware
    xmlns:cupertino="package:flutter/cupertino.dart">

  <Scaffold>

    <appBar>
      <AppBar>
        <title>
          <Text text="'Home'" />
        </title>
      </AppBar>
    </appBar>

    <body>
      <Column mainAxisAlignment="center" crossAxisAlignment="center">
        <Image :use="asset" source="'assets/my_logo.png'" />
        <Text text="'Hello world!'" />
        <Icon icon="CupertinoIcons.home" />
      </Column>
    </body>
  </Scaffold>
</HomePage>

HomePage（根元素）是您小部件的名称。
controller一个可选属性，您想要生成的控制器名称。
routeAware一个可选属性，用于生成导航事件（didPush()、didPop()、didPushNext()和didPopNext()）。
xmlns:*一个或多个可选属性，用于导入要在HomePage类中使用的包和文件。（在此示例中，我们导入了cupertino.dart以使用CupertinoIcons）。

控制器

如果您向小部件添加了controller属性，那么它将被生成（如果不存在），文件看起来像这样

import 'package:flutter/widgets.dart';
import 'home.xml.dart';

class HomeController extends HomeControllerBase {

  //
  // here you can add you own logic and call the variables and methods
  // within the XML file. e.g. <Text text="ctrl.myText" />
  //

  @override
  void didLoad(BuildContext context) {
  }

  @override
  void onBuild(BuildContext context) {
  }

  @override
  void afterFirstBuild(BuildContext context) {
  }

  @override
  void dispose() {
    super.dispose();
  }
}

GitHub

https://github.com/waseemdev/vscode-flutter.xml-layout