用Angular风格编写Flutter

最新推荐文章于 2022-11-03 13:34:38 发布

翻译最新推荐文章于 2022-11-03 13:34:38 发布 · 902 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://github.com/waseemdev/vscode-flutter.xml-layout

flutter 专栏收录该内容

6 篇文章

订阅专栏

介绍一个VSCode插件，允许开发者以类似Angular的XML风格编写Flutter应用，简化UI代码，支持业务逻辑分离、内置属性、管道及代码智能提示等功能。

Flutter的嵌套编码风格，让很多做web前端的同学感到很恶心，我看有人在github上向官方提问，官方表示并没有支持xml的计划。在github上搜索了一下，发现一个vscode-flutter.xml-layout库，其实现Angular风格编写Flutter。未做尝试，翻译其readme介绍，后续有空再尝试。其他同学有尝试过的，欢迎留言讨论。

想象一下你可以这样做：

<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文件生成本地化代码。
Forms & animation 更容易.
可定制，开发人员可以添加自己的属性并修改一些特性。
支持代码完成、悬停信息、转到定义、诊断和代码操作。

开始

从vscode marketplace安装XML Layout for Flutter扩展
创建flutter工程
安装必备软件包:

- flutter_xmllayout_helpers
- provider
- flutter_localizations

dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter provider: ^3.0.0+1 flutter_xmllayout_helpers: ^0.0.4

Apply one of the following steps:

- 清除所有main.dart内容，然后使用fxml_app snippet创建应用程序.
- 修改main.dart ，使用来自provider包的 MultiProvider：

- - 注册 PipeProvider (来自flutter_xmllayout_helpers包) 作为 provider.
  - 注册RouteObserver<Route> 作为一个 provider (只有你想在你的组件controllers中使用RouteAware 事件时才需要).

本地化:

在lib目录下创建i18n 文件夹，添加以地区命名的JSON 文件例如. en.json.
在main文件中导入Import i18n/gen/delegate.dart.
在MaterialApp 的localizationsDelegates参数注册 AppLocalizationsDelegate() 。
要在UI中使用本地化文本，请参见Pipes文档

XML 布局:

创建文件件如. home.
在home文件夹下创建 home.xml。
使用 fxml_widget snippet 创建一个初始布局, 修改成你需要的代码并保存.扩展会生成 home.xml.dart, home.ctrl.dart 文件(如果不存在) 包含 controller 类 which is the place you should put your code in (will be generated only if you added controller property).

例子:

<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 可选的属性, 生成controller 的名称.

routeAware 可选属性, 生成navigation 事(didPush(), didPop(), didPushNext() and didPopNext()).

xmlns:* 可选属性，用于引入在HomePage 类中用到的包和文件. (这个例子中，我们引入了 cupertino.dart ).

Controller:

如果你添加了 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
  // from 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();
  }
}

功能文档

1. Wrapper properties

2. Pipes

3. Custom properties

4. Injecting providers

5. Adding controllers to widgets

6. Adding mixin to widget's states

7. Localization

8. Developer customization