在Flutter中使用Pug和Sass与Flutter-view

尽管我很喜欢 Flutter，但当我第一次从 Web 开发领域接触到它时，我对它的结构感到有点不安。逻辑、样式和标记都在一个地方，并混合在大量的括号和逗号中。现在我发现了 flutter-view，它立即成为我使用 Flutter 时的主要工具之一。

flutter-view 不是 Dart 的替代品，也不是完全让我们在 Flutter 中使用 Pug 和 Sass。通过让我们隔离视图并以更清洁的方式开发它，它是对我们工作流程的补充。我们得到了 Pug 和 Sass（或 HTML 和 CSS）的语法，带有缩进、混合、循环和其他好东西，但我们仍然受限于我们正在使用的小部件的限制。应该牢记这一点，因为至少对我来说，仍然很容易获得 CSS 允许的东西，并想知道为什么没有任何效果，例如使用 CSS Grid 或向列小部件添加宽度。

如果你对 Pug 不熟悉或者有点生疏，你可以在这里刷一下，或者仔细阅读 Sass 会让你在这里做的一些令人惊奇的事情。

安装和设置

flutter-view 仍然是一个相当新的包，所以我建议查看最新版本和文档以了解任何更改。

$ flutter create flutter_view_example

包.yml

dependencies:
  flutter:
    sdk: flutter
  flutter_view_widgets: ^1.0.6

现在您需要打开两个终端，一个用于运行 flutter-view，另一个用于您的应用程序。它所需要的只是我们要编译的代码的位置，通常是 lib 文件夹和监视标志。

$ flutter-view -w lib

哈巴狗/HTML

我们的文件结构与您在 React 或 Angular 中看到的类似，每个屏幕和组件都在我们的 Pug 和 Sass 文件所在的文件夹中。 flutter-view 会自动生成一个基于它们的新 Dart 文件。

* lib 📂 
  * screens 📂 
    * loader 📂
      * loader.pug 
      * loader.sass 
  * main.dart

一旦我们导入了 flutter-view 包，我们就可以开始使用 Pug 语法创建 Flutter 小部件。我们可以通过添加一个标签并传递它 (flutter-view) 来创建一个新的无状态小部件。

现在所有的小部件都是小写的，单词用连字符分隔，所以 appBar 变成了 app-bar。创建一个新类将生成一个空容器，我们可以在 Sass 文件中引用它。我们还可以使用 as 属性控制它在其父窗口小部件中的标记。

家.pug

home(flutter-view)
    scaffold
        app-bar(as='appBar')
            .siteName(as='title') Welcome

当你保存它时，应该已经生成了一个新的 home.dart 文件，如果我们看一看，我们会发现一些很酷的东西。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_view_widgets/flutter_view_widgets.dart';

Scaffold Home() {
  return Scaffold( // project://lib\home\home.pug#4,2
    appBar: AppBar( // project://lib\home\home.pug#5,3
      title: 
      //-- TITLE ----------------------------------------------------------
      Container( // project://lib\home\home.pug#6,4
        child: Text( 
          'Alligator.io',
        ),
      ),
    ),
  );
}

flutter-view 甚至可以注释所有内容，以便在调试时轻松找到某些内容。

如果编译器无缘无故地开始对缩进感到不满，请重新启动您的编辑器，有时会这样。

我们需要为小部件声明的任何属性都可以作为普通参数传入，遵循与小部件相同的命名格式。如果你需要对函数做任何事情，你可以在前面加上 @ 以将其包裹在括号中，或者 :^ 按原样输出，这最适合用于箭头函数。

家.pug

import(package='flutter_view_widgets/flutter_view_widgets.dart')

loader(flutter-view)
    scaffold
        app-bar(as='appBar' center-title=true).bar
            .siteName(as='title') Alligator.io 
        .bg(as='body') 
            column: array(as='children')
                .logo 
                .slogan Front-End Web Development, Chewed Up
                .subSlogan Angular 2+, Vue.js, React, Svelte JavaScript, CSS, Node.js...
                .btnText: button(:^on-pressed="() => print('Hello World')") See all posts

萨斯

遗憾的是，这不是你所知道的 CSS，只是语法。我们没有 CSS Grid，没有 Flexbox，甚至没有任何 rems 或百分比。我们仅限于每个特定小部件上已经可用的属性。

我们可以直接选择我们的容器或使用它们的类/ID。

全球.sass

$solorized-light: #073642
$solorized-dark: #002b36

app-bar
    background-color: $solorized-light

.bg  
    background-color: $solorized-dark
    width: 500

对于某些属性，有一些修改会影响生成的内容，因此现在 background-image 可以采用 url() 或 asset() 来使用本地或外部源。您可以在此处找到修改后属性的完整列表。

主页.sass

@import '../global.sass'

.logo 
    background-image: url("https://aws1.discourse-cdn.com/netlify/original/2X/3/3c2117abab23d3cb409b49f75ca0ef8f46bb005c.png")
    height: 300
    width: 300
.slogan 
    color: #fff
    font-size: 30
    text-align: center

.subSlogan 
    @extend .slogan 
    margin-top: 15
    font-size: 15
    width: 300

.btnText 
    margin-top: 40
    font-size: 25
    width: 200
    height: 50
    border-radius: 40
    button 
        color: $solorized-light
        text-color: white

一旦你习惯了这个过程，创建这样的东西将很容易花费标准 Dart 一半的时间。

额外配置

flutter-view 为我们提供了对生成文件的大量控制。您只需要在项目的根目录中有一个 flutter-view.json 文件，就可以开始了。

在这里，我们只是告诉它默认将 Flutter-view 包添加到生成的文件中，并且我们将 button 从 RaisedButton 重新映射到 FlatButton。

颤振视图.json

{
    "imports": [
        "package:flutter_view_widgets/flutter_view_widgets.dart"
    ],
    "tagClasses": {
        "button": "FlatButton"
    }
}

结束的想法

只需几行代码，我们就可以轻松生成 2-3 倍的 Dart 代码，而不必担心单个括号或类型错误。此外，拥有创建 mixin、循环和条件的简洁方式使开发变得更快、更愉快。

Flutter-view 很快成为我所有个人项目的首选，我希望它也适合你。