当你在为嵌套问题苦恼的时候,可以尝试一下用 widget_chain 链式调用来部分替换代码中的嵌套。
先来看看这段代码:
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Demo'),),
body: Container(
child: Offstage(
offstage: false,
child: ListView(
children: <Widget>[
Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.phone),
Text("amy"),
],
),
),
Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.phone),
Text("billy"),
],
),
),
],
),
),
),
);
}
}
用 widget_chain 后的效果:
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Demo'),),
body: ["amy", "billy"]
.buildAllAsWidget((name) =>
WidgetChain
.addNeighbor(Icon(Icons.phone))
.addNeighbor(Text(name))
.intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
.intoContainer(color: Colors.white, padding: EdgeInsets.all(20),)
)
.intoListView()
.intoOffstage(offstage: false)
.intoContainer()
);
}
}
详细介绍请看这篇文章
1
locoz 2020-01-05 12:40:23 +08:00 via Android
稍微好了一点,但是还是看得脑壳疼…
|
2
daimubai 2020-01-05 12:41:11 +08:00 via iPhone
头皮发麻
|
3
winterbells 2020-01-05 12:46:28 +08:00
好奇一件事,AS 4.0 加了 jetpack compose 功能,还有之前 jetbrains 出的 anko (好像凉了)
都和 flutter 一样代码画页面,以后的趋势是什么样的?哪天谷歌又要推 jetpack compose 写跨平台吗 =。= |
4
dremy 2020-01-05 12:48:56 +08:00 via iPhone
强行把声明式写成了命令式,脑壳更疼了……
|
5
murmur 2020-01-05 12:50:46 +08:00
和 jsx 比还是头疼,jsx 一下就能看出层次结构,flutter 原来恶心也就是嵌套恶心,你这个改完之后我更迷茫了
|
6
ArJun 2020-01-05 12:54:42 +08:00
本来很直观的代码,被这框架一搞好像是高级了,其实还是一个样···
|
7
IGJacklove 2020-01-05 12:57:34 +08:00
模仿又不丢人。。就不能搞个 flx 吗?有种当 bz 立牌坊的感觉
|
8
DOLLOR 2020-01-05 13:22:39 +08:00 via Android
@IGJacklove
他们会跟你说,XML 落伍了,都 2020 年了还用啥 XML,你们先接触的 XML 和 HTML 才会觉得 JSX 好用的遗老遗少。🙄 |
9
IGJacklove 2020-01-05 13:27:27 +08:00
@DOLLOR 我有点理解 dart 为什么干不过 typescript 了。。
|
10
hoyixi 2020-01-05 13:42:19 +08:00
Flutter 的发明者应该是个 Java 程序员
|
11
mxT52CRuqR6o5 2020-01-05 18:53:49 +08:00 via Android
@IGJacklove 要实现 flx,要么大改所有组件的 api,要么实现出来的 flx 和 xml 会差很多
|
12
hyy1995 2020-01-05 21:22:08 +08:00
看哭了。。。我还是 rn 好了
|
13
lzm956902416 2020-01-06 04:29:12 +08:00 via iPhone
嵌套 —
可读性 — |
14
wanguorui123 2020-01-06 08:23:28 +08:00 via iPhone
这语法和 QT 的布局器语法有什么区别?
|
15
IGJacklove 2020-01-06 09:36:04 +08:00
@mxT52CRuqR6o5 flutter 没有虚拟 dom 吗?有虚拟 dom 应该对 api 不会有什么影响吧,就像 rn 的 jsx 和 React.createElement
|
16
mxT52CRuqR6o5 2020-01-06 12:16:21 +08:00
@IGJacklove
在 jsx 写法中的组件 content,是传给 props.children 的 在 flutter,有些组件的 content 只能是一个元素传给 child 或者是传给第一个入参,有些组件的 content 可以是多个参数传给 children,这咋处理呢 |
17
mxT52CRuqR6o5 2020-01-06 12:19:06 +08:00
@lzm956902416
这种面条代码仿佛回到了 jquery 时代 |