Rad

Rad 是一个使用 Dart 构建快速、交互式网站的前端框架。它受 Flutter 启发，并共享相同的编程范例。它拥有 Flutter 的所有优点（StatefulWidgets、Builders），并允许您在应用程序中使用 Web 技术（HTML 和 CSS）。

快速链接

• 入门
• API 参考

示例

让我们来看一个使用 Rad 编写的示例

class HomePage extends StatelessWidget
{
  @override
  build(context) {
    return Text("hello world");
  }
}

怎么样？如果您熟悉 Flutter，甚至不需要解释。但在开始使用 Rad 之前，还有一些区别需要讨论，

区别

1. 首先，我们不使用渲染引擎来渲染 widget 或其他任何东西。Widget 会被映射到 HTML 标签，并按照您描述的方式组合在一起。这意味着每个 widget 在 DOM 中都有一个对应的 HTML 标签，您的应用程序可以完全访问文档（DOM）。

2. Rad 的 widget 不会每秒重建多次，这意味着对于动画，您必须转向 CSS。

3. 要设计一个界面，您必须使用 HTML。您猜怎么着？这里有一些 widget 可以做到这一点。

   我们来看这个 HTML 片段

   <span class="heading big">
     <strong>
       hellow
     </strong>
   </span>

   下面是用 widget 编写的等效代码

   Span(
     classAttribute: "heading big",
     children: [
       Strong(innerText: "hellow"),
     ],
   );

   更进一步谈论 UI，没有像 Flutter 中的 Container 和 Stack widget 那样的布局/样式专用 widget。您只需想一想？我们并不真正需要它们，因为大部分事情都可以通过 HTML 标签和 CSS 来完成。

   仅举例说明，假设您想要一个 Stack widget，

   1. 创建 Stack 条目

      Widget StackEntry(Widget widget)
      {
        return Division( 
            style: "position:absolute;top:0;left:0;",
            children: [widget],
          );
      
        // Division = HTML's div
      }

   2. 创建 Stack 容器

      Widget Stack({required List<Widget> children})
      {
        return Division(
            style: "position:relative;",
            children: entries,
          );
      }

   3. 做得好！这是我们新创建的 Stack widget

      Stack(
        children: [
          StackEntry(Text("hellow 1")),
          StackEntry(Text("hellow 2")),
        ]
      )

   这只是一个例子，您不需要这类 widget，因为您可以使用您选择的 CSS 框架。

Widget 索引

下面是此框架中可用 widget 的列表。

有些 widget 的命名与 Flutter widget 相同，因为它们要么工作方式完全相同，要么可以用于以不同的方式（或多或少）实现相同的功能。所有这些 widget 都根据它们的相似度级别进行了标记。

标记

• 精确：精确语法，语义相似。
• 相同：精确语法，但有少量例外，语义相似。
• 不同：语法不同，语义不同。
• 实验性：—

请注意，这些标记仅基于我对 Flutter widget/src 的理解。如果您发现任何重大差异，请告诉我。

Main

• RadApp

导航器/路由

• Navigator [不同]
• Route [不同]

抽象

• InheritedWidget [精确]
• StatelessWidget [精确]
• StatefulWidget [精确]

构建器

• FutureBuilder [精确]
• StreamBuilder [精确]
• ValueListenableBuilder [精确]
• ListView.builder [相同]

元素

• Text [不同]
• RawMarkUp
• ListView [相同]
• GestureDetector [实验性]

HTML

• 头部

• 页脚

• 导航

• Span

• Small

• Strong

• Idiomatic

• SubScript

• SuperScript

• Division

• Anchor

• Blockquote

• HorizontalRule

• Label

• Legend

• IFrame

• BreakLine

• Image

• 画布

• Paragraph

• 进度

• UnOrderedList

• ListItem

• 按钮

• 选择

• 选项

• Form

• FieldSet

• InputText

• InputCheckBox

• InputRadio

• InputFile

• InputSubmit

• TextArea

• Heading(1-6)

为什么选择 Dart？

我之前尝试用 TypeScript 来写这个。虽然我们可以在 TS 中做很棒的类型相关的事情，但它也继承了 JS 的一些怪异之处（必须绑定 'this'，使用箭头函数，以及更多类似的事情）。后来我决定尝试 Dart，并很快意识到 Dart 是一种被低估的语言。你不必相信我的话。我用 Flutter 写了很多 Dart 代码，但当初我选择 TS 这一事实充分说明了 Dart 被低估的程度。我深信 Dart 是一种了不起的语言，我感谢所有帮助创建 Dart 和/或以各种方式为之做出贡献的人。

GitHub

查看 Github