11Flutter 写 UI 的方式 —— 声明式.pdfVIP

Flutter 写 UI 的⽅式 —— 声明 式 Flutter 采⽤了⼀种新的⽅式来写 UI，这种⽅式就是声明式，刚开始 你可能会不适应，但⽤过之后你就会 现它⾮常好⽤。 Android 、iOS 的 UI 布局的写法 在讲如何写 Flutter UI 之前，⾸先我们回顾⼀下 Android 和 iOS 的 是如何布局的： Androoid ：XML Android 中，通过 XML 来写布局。 Android ：代码 代码以 命令式 的⽅法来写布局 iOS ：Storyboard 使⽤ Storyboard 来组织视图和设置约束。 iOS ：代码 可以在 ViewController 中以 命令式 的编程⽅式设置约束。 在 Android 中通常使⽤ XML 来写 UI，XML 也是⼀种声明式，但使 ⽤ XML 写 UI，是不能在代码⾥直接操作 UI，还需要⼀步 findViewById 的步骤；在 iOS 中通常使⽤ 命令式 的代码来写 UI ， 命令式 可以直接在代码⾥操作 UI，但是要写复杂的界⾯的时候，就 会很痛苦。 Flutter UI 布局的写法 Flutter 写 UI 布局： 1. 只能⽤代码来写 UI 2. ⽽且 Flutter ⽤代码写 UI 的⽅式是声明式的，和其他平台⽤代 码来写 UI 的命令式不同。 为了看出 Flutter 声明式和其他平台命令式的不同，接下来举⼀个例 ⼦说明。 命令式 VS 声明式 假设要实现⼀个下⾯的界⾯： 使⽤命令式实现 如果⽤命令式的代码来实现，那么代码就会是这样⼦的 （）： // 分别实现各个view ViewA a = new ViewA(...) ViewB b = new ViewB(...) ViewC c1 = new ViewC(...) ViewC c2 = New ViewC(...) // 然后将⼦view 添加到容器中 a.add(b) b.add(c1) b.add(c2) 你⾸先要通过 View 的构造函数创建 View 的实例，然后在组织 View 的层级。 使⽤声明式实现 ⽤ Flutter 声明式 的代码实现就是这样的： Widget build(BuildContext context) { return ViewA{ c ild: ViewB{ color: yellow , c ildren: [ ViewC(...), ViewC(...) ] } } } 这种⽅式写 UI，有点类似于 Android 的 XML，声明了 UI 元素之间 的关系和嵌套层次，但却是⽤代码实现的，所以少了 XML 解析的步 骤，也使 Flutter UI 构建的效率更⾼。 Flutter 写 UI 在看之前创建的 Flutter ⼯程⾥，⽤来写 UI 的 代码： Widget build(BuildContext context) { return MaterialApp( title: Flutter Demo, t eme: T emeData( primarySwatc : Colors.blue, ), ome: Scaffold( body : Center( c ild: GestureDetector( c ild: Text(widget.content), onTap: increment, ) ), ) ); } ⽤代码来写 UI，同时也表现出了 UI 的层级: