Widget Tree
现在我们看看,从RecipeApp 的main()入口开始,整个APP的Widget的结构。
通过代码对照着上面的图,可以很好的理解整个APP的Widget结构,在我们构造更复杂的布局时,这种方法非常有效。
还可以通过Android Studio的View->Tool Windows->Flutter Inspector来查看当前界面的UI结构,但是开启Flutter Inspector时需要注意以下几点:
- 只有debug的时候才能展示。
- 程序正在运行时才能展示。
- Flutter inspector 卡在 “Installing DevTools”,最后提示Setting up DevTools failed。
按照提示重启开启Flutter inspector仍然失败,看输出提示
远程计算机拒绝网络连接。
(OS Error: 远程计算机拒绝网络连接。
, errno = 1225), address = storage.googleapis.com, port = 10251
pub finished with exit code 69
然后仍然失败。
在Android Studio 的控制台输入如下命令
flutter.bat pub global activate devtools
flutter.bat pub global run devtools
同样提示远程计算机拒绝网络连接
最后找到一种方法解决了这个问题:
File > Settings > Languages & Frameworks > Flutter 中把 Enable embedding DevTools in the Flutter Inspector tool window 选项取消选中状态
最终,我们可以通过Flutter Inspector直接查看界面中的UI结构: