声明

本文源自21天开源鸿蒙跨平台训练营活动-第七篇博客

一、 回复上篇提到的flag

1.1实时预览项目的定义的真正定义与解决方法

        当时提到要解决自己提到的flag：找到实时预览项目内容的方法。我在官网文档找到了相关的描述，提到了相关描述，官方文档中说：目前只能在 Android Studio / IntelliJ 里完成代码静态编写阶段下的“可视化布局编辑器” （这也是我描述的实时预览项目内容）

        那样，不运行 App 也能在侧边栏或面板里直接看到界面预览。
        在 VS Code 的 Flutter 插件里，目前没有这种 纯静态、不运行设备 的 “Design View / Preview” 功能。页面里提到的：

                                 Flutter Inspector → 必须 debug​ 运行起来以后才生效；

                                 Property Editor → 也是基于运行中的 Inspector，不能空预览；

1.2解决方案

        因此，如果想像 Android Studio 那样 拖控件、实时出图，目前只能在 Android Studio / IntelliJ 里完成；VS Code 侧暂无此能力，官方 issue 里也长期标记为 “not planned”。

        最近的我的 Flutter 项目都在 VScode 完成，后续面向大型项目会改为 Android Studio 或者IntelliJ ，后续会推出相关应用教程，希望可以帮到大家。
       

tips：等搞定 Networking and data 后，发布为博客后，就转向 Android Studio！

二、本次项目—fh_touch

2.1知识预览

官方任务清单（from 引言段落）

                        1.识别用户输入类型

                        2.处理输入并更新 UI

                        3.提供视觉反馈

表1 代码讲解

2.2总结

总的来说我用 TextFormField / RadioListTile / SwitchListTile + TextEditingController + setState + validator + SnackBar 这 6 个 API，把官方引言里要求的“识别-处理-反馈”完整跑通，并且全部放在可点按的示例页面里，直接对应文档的教学目标。

2.3项目目录如下

2.4 DevEco 编译运行情况

2.4.1每个组件功能效果

三、AtomGit | GitCode 项目地址

4.1 HTTPS

        https://gitcode.com/xj654/new_f_h.git

git clone https://gitcode.com/xj654/new_f_h.git

4.2 SSH

git@gitcode.com:xj654/new_f_h.git

4.3仓库如图，本项目fh_touch

四、总结寄语

4.1总结

通过本文学习，你已经了解了

        1.代码静态编写阶段 就能像 Android Studio 的 “可视化布局编辑器”出现场合

        2.了解 flutter 项目 【用户处理输入】教程

        3.清楚我的 git 仓库

通过几篇的学习本人以及分享一些做应用的基础希望大家可以把知识串一遍，这样利于后续学习！

4.2寄语

下篇将推出网络相关的内容，让程序不在只是本地链接网络是作应用很重要的因素，出完网络教程后，我将不在使用 VScode 进行 Flutter 项目编写，转战为Android Studio，给大家证明实验可视化布局编辑器”出现场合，从而提高开发效率，当然也会做出好看的页面出来，网络教程后就给大家看到一个修饰过后的项目出来，让大家更好的学习 flutter！