移动教程：使用Web浏览器组件（iOS和Android）

转到移动教程：移动应用程序开发（iOS和Android）

FireMonkey将Web浏览器组件包装为TWebBrowser（网络浏览器）组件。你可以使用TWebBrowser（网络浏览器）在桌面应用程序和移动应用程序中，但本主题描述了如何为iOS和Android平台创建简单的FireMonkey Web浏览器应用程序。

设计用户界面

1. 选择其中之一：
   • 文件>新建>多设备应用程序-Delphi>空白应用程序
   • 文件>新建>多设备应用程序-C++Builder>空白应用程序
2. 选择T工具栏中的组件工具选项板，并将其放在表单设计器.

   要查找T工具栏，在搜索工具选项板的框：

   
   
   

3. 放下组件后，可以看到T工具栏组件。以下是在Form Designer中设置iOS样式后的屏幕截图：

   
   
   

4. 选择按钮控件组件，并将其放置在T工具栏.
5. 选择按钮控件组件，然后在对象检查器，设置样式查找属性到优先工具按钮.
   • 这个优先工具按钮的样式查找值按钮控件添加“后退”按钮标签。在iOS设备上，标签与下图相似：
   • 有关在多设备应用程序中选择样式的更多详细信息，请参阅移动教程：使用不同样式的按钮组件（iOS和Android）.
6. 选择T编辑组件，并将其放置在T工具栏。请确保Edit控件的大小足够宽，以填充T工具栏:

   
   
   

7. 选择表单设计器上的“编辑”框，然后在对象检查器，设置返回键类型属性到多恩，的键盘类型属性到统一资源定位地址、和KillFocusByReturn（按返回）属性到真的.

   有关在移动平台中选择最合适的虚拟键盘类型的更多信息，请参阅为Web浏览器应用程序选择合适的虚拟键盘.

8. 选择TWebBrowser（网络浏览器）组件，并将其放到表单上。
9. 选择表单设计器上的Web浏览器组件，转到对象检查器并选择顾客对于排列属性。

   完成这些步骤后，表单应类似于下图：

   
   
   

编写事件处理程序以在用户更改编辑控件中的URL时打开网页

与桌面平台不同，移动平台使用虚拟键盘输入文本，如下图所示。用户可以通过单击“完成”完成操作。

网间网操作系统	安卓
iPad平板电脑	安卓系统（LG-E612

FireMonkey提供了多种类型的事件处理程序来涵盖用户采取的大多数操作。选择“完成”按钮后，FireMonkey框架发送OnChange（更改时）事件发送到TEdit控件。另一方面，“后退”按钮没有特定事件。在本节中，您将实现支持这两种场景的事件处理程序。

实现一种打开网页的通用方法

在实现事件处理程序之前，首先实现一个基于文本Edit控件的属性。

1. 在TForm1类的私有部分中，声明打开URL方法：

   德尔福:

     私有的
       {私有声明}
       程序 打开URL;
   

   C++生成器：
   

   私有的:        //用户声明
     空隙 __快速呼叫 打开URL();
   

2. 实施打开URL方法如下：
   

   德尔福：
   

   程序 T形1.打开URL;
   开始
     网络浏览器1.导航(编辑1.文本);
   结束;
   

   
   

   C++生成器：
   

    空隙 __快速呼叫 T形1时间：打开URL()
     {
         网络浏览器1->导航(编辑1->文本);
     }
   

实现OnChange事件的事件处理程序

1. 通过选择编辑组件，然后双击OnChange（更改时）事件（在对象检查器的事件选项卡）。

   对象检查器创建一个名为编辑1更改:

   
   
   

2. 通过添加以下代码来完成事件处理程序：
   

   德尔福：
   

   程序 T形1.编辑1更改(发件人: TObject（目标）):
   开始
     打开URL;
   结束;
   

   C++生成器：
   

   空隙 __快速呼叫 T形1时间：编辑1更改(TObject（目标） *发件人)
   {
       打开URL();
   }
   

实现后退按钮的事件处理程序

要实现后退按钮，您只需调用返回Web浏览器组件上的方法：

德尔福：

程序 T形1.按钮1单击(发件人: TObject（目标）);
开始
  网络浏览器1.返回;
结束;

C++生成器：

空隙 __快速呼叫 T形1时间：按钮1单击(TObject（目标） *发件人)
{
   网络浏览器1->返回();
}

现在，此Web浏览器应用程序实现了基本行为。尝试在Android设备或iOS设备上运行应用程序。

为Web浏览器应用程序选择合适的虚拟键盘

在运行第一个Web浏览器应用程序后，您可能会发现虚拟键盘没有优化。

iOS提供以下几种虚拟键盘：

字母表：	违约：	电子邮件地址：	姓名电话Pad：
数字键盘：	数字和标点符号：	电话Pad：	网址：

Android提供以下几个虚拟键盘：

字母表：	违约：	电子邮件地址：	姓名电话Pad：
数字键盘：	数字和标点符号：	电话Pad：	网址：

Web浏览器组件最合适的虚拟键盘类型是统一资源定位地址。正如我们在中所讨论的设计用户界面，以下步骤设置统一资源定位地址作为本例中Web浏览器组件的虚拟键盘类型。选择表单设计器上的“编辑”框，然后在对象检查器，设置键盘类型属性到统一资源定位地址.

WebBrowser移动代码段

这个控件中的项目移动代码段演示了本教程中描述的功能。

你可以找到控件项目位于：

• 开始|程序| Embarcadero RAD Studio Athens |示例并导航到\对象Pascal\Mobile Snippets\WebBrowser
• 子版本存储库：
  • 您可以在中找到Delphi代码示例。根据您的RAD Studio版本按名称搜索样本存储库。

另请参阅

• 移动教程：使用组合框组件从列表中选择项目（iOS和Android）
• 移动教程：使用选项卡组件显示页面（iOS和Android）
• FMX公司。键盘类型示例
• TWebBrowser（网络浏览器）
• T工具栏
• 按钮控件
• T编辑
• 键盘类型
• 样式查找