有没有办法在 Flutter（Dart）中用类 JSX 语法编写代码？

[Leon6868]

本人以前用 React Native ，JSX 代码结构简单明了，可读性强，学习难度低，简直不要太舒服。

现在切换到 Flutter ， 其他都好说，就是这 UI 代码真让人头大，一个在 React Native 上十几行就能搞定的功能在 Flutter 中可能要几十行甚至上百行，代码结构也异常混乱。

回首编写 React Native 的时光，真是怀念啊……因此突发奇想，如果能在 Flutter （ Dart ）中使用类似 JSX 的语法编写 UI 该多好……

请教各位大神，如果想要实现这个功能，需要从哪些方面入手呢？

[w568w]

> 本人以前用 React Native ，JSX 代码结构简单明了，可读性强，学习难度低，简直不要太舒服。

出于什么考虑换 Flutter ？

> 一个在 React Native 上十几行就能搞定的功能在 Flutter 中可能要几十行甚至上百行，代码结构也异常混乱

结构混乱更可能是把所有东西都内联在 build() 里了，建议抽取子控件和方法（例如 onTap 等回调）。


> 如果想要实现这个功能，需要从哪些方面入手呢？

据我所知，Dart 不支持 DSL…

[witcat]

是公司要用的吧。
其实 flutter 不是压倒性的比 RN 方案更好，不知道为什么很多公司逃跑似的都不用 RN 了。

[Leon6868]

@w568w 感谢回复！

> 出于什么考虑换 Flutter ？

第一点是工作原因，这也是感受到“代码结构异常混乱”的直接原因 :(

第二点是看重 Flutter 真正的全端兼容能力，这点比 React Native Windows 好太多，至少 Flutter 编译出来的是真正的 Win32

> 结构混乱更可能是把所有东西都内联在 build() 里了

是这样的，我自己写 Flutter 也会通过这些方法减少复杂性，可惜有很多同事就硬写，真的很难受，硬写就算了，children 还放在一堆参数中间 :( 看着这参差不齐的两三百行代码简直是折磨

有这些痛苦的经历，所以我才会怀念 JSX

> Dart 不支持 DSL

那有没有其他方式的实现方法呢？比如在编译过程中加入一个 filter 把 xml 格式的代码转换成 dart 的代码？

据我所知 flutter 社区对于这个问题也挺分裂的……

[Leon6868]

@witcat 我们公司看重 flutter 主要是因为它确实有很多代码能在生产环境多端复用，这对小公司是非常友好的，如果使用 React Native 那桌面端还要专门分一组人来做 win32 ，而 flutter 大部分时候只要 UI 上改改就能用，核心功能几乎不用动

[mxT52CRuqR6o5]

flutter 没有框架级别统一的 children 抽象，没法在不引入 breaking change 的情况下设计出 jsx 这样的东西

[Leon6868]

@mxT52CRuqR6o5 你是指 children 和 child 吗？