手机APP开发之MIT Appinventor详细实战教程（九），工具箱的设计和MIT的基础知识讲解

 （一）APP功能介绍

这次我给大家介绍一个关于工具箱的App ，这个APP在逻辑方面较为简单。但是他的设计过程中包含了很多相关的知识，通过这篇文章，可以让大家很具体有直观的了解到这个编程软件的使用方法，以及编程的思维和过程。我们先看一看APP的功能是什么？

 App分为三个界面：分别是初始界面，登录界面以及功能界面。初始界面用来让使用者了解相关的信息。

登录界面让使用者进行登录，而功能界面则是一个网站的集合体。

你可以通过功能界面中的按钮，来搜索自己想要的东西。

 App稍后发给大家，大家可以按照APP的功能和使用方法，来一步一步的了解它的编程思路和使用方法。

（二）APP的设计过程

 这是APP的初始界面

这是界面中所包含的所有组件合集，应用名称就是我们APP安装到手机之后下方的文字。图标就是我们APP的图标。这个图标可以根据自己的需求随意设置，也可以加入本地的图片。最下方则是对这个屏幕的大小以及位置进行的设置。 

  

 这是屏幕背后的逻辑设计， 这个逻辑设置主要包含三个部分。分别是按钮，对话框和文本。其中黄色部分表示按钮功能。紫色部分表示对话框功能。深红色部分表示文本功能。

第1个逻辑功能的意思就是：当在线登录这个按钮被点击的时候，我们调用对话框显示“暂时不可用，请随时查看更新的内容”。 较为简单，不多解释。  大家如果想详细了解可以登录这个网站。进行实际操作一下，在网页上直接搜索wxbIt就可以了。

 这是第2个界面的设计，是一个较为简单的登录界面。其功能组件包含有文本输入框，密码输入框以及按钮。 文本输入框用来输入你的账号。密码输入框原来输入密码。而按钮用来确认登录。

其中账号的字体是用标签确定的，登录这个按钮上文字是可以通过右方的组件属性进行修改的。他原来的字体应该是按钮1， 总的来说，就是说左边部分是图形界面。而右边部分则是对这些组件的详细设计，包括它的字体颜色 位置的相关设计。 

 这是第2个界面内部的逻辑结构 ，这个逻辑结构只是一个初步设计，并不是特别的完善。当初的设想是通过数据库来完整的实现一个账号与密码之间的相互对应关系。但由于时间紧迫，这个功能尚未实现。我们下周敬请期待。

这个逻辑功能唯一值得大家了解的就是跳转屏幕的功能，当确认登录这个按钮被点击后直接打开第3个屏幕。

好，我们之间来看第3个屏幕。

 这就是第3个屏幕的功能界面。 其所含的组件有标签、按钮、页面布局、网页显示框。 

 这里让你讲的知识点就是一个页面布局，我们在最左方可以看到页面布局设置。里面包括水平布局，垂直布局等多种布局。用来使整个界面更加的优美和完善。

给大家举一个简单的例子，就是这个大框框里面的第1列。是一个垂直布局。以此类推，第2列，第3列也是垂直布局。而这三个垂直布局又由一个大框框水平布局所包含，所以就呈现为这样的样子。 

 这是其内部的逻辑设计。逻辑设计所包含的问题无非有两个： 

第1个问题就是在第3个界面初始化的时候，不要产生返回的那个按钮。这个就需要通过按钮时候显示的真假逻辑值来进行实现了，相对过程较为简单。也就是当页面初始化的时候，我们让这个按钮是否显示为假，它就不会显示了。

  第2个问题便是其他功能的按钮被点击时，其他的按钮应该消失。因为功能按钮是由一个很大的垂直布局包含的，所以我们同样设置为假就可以。

这个页面要学习的知识点，就是它打开网页的功能。当我们点击一个按钮的时候，让它打开一个网页，其实是一个相对简单的事情。我们只需要调用网页浏览器的功能组件，让其打开文本框内的网页就可以了。

  这个其实是可以随便设计的。就如上面红色的组件中的网页一样。如果我们输入百度的网页，那么你点击按钮后就会产生百度的网页相对简单。

 这个APP稍后发给大家，大家可以根据APP来进一步测试和了解今天所讲的东西。由于是大家第一次接触，所以逻辑方面讲的较为简单，着重给大家讲解其基础知识和对他的了解。我们下周着重从逻辑功能这方面给大家详细的介绍一下。 



 ​