使用Anvil构建一个简单的键盘

Anvil是一个免费和开源的拖放式网络应用程序构建器。它相当于Gradio这样的应用程序。该框架只使用Python编程语言。没有HTML，没有CSS，也没有Javascript。

本教程将利用这个框架建立一个类似于你电脑上的键盘的功能。

前提条件

要继续学习本教程，你需要熟悉。

Python编程语言。
HTML、CSS和Javascript编程语言。

用Anvil创建一个网页

为了开始，我们将首先导航到Anvil网站。在网页的右上角，你会看到一个Start Building 按钮。点击它。你会被提示在开始构建之前创建一个账户。这个注册过程是免费的。

一封验证邮件将被发送到你的邮箱，以完成注册过程。一旦你完成验证过程，你应该被重定向到登录页面，并出现以下网页。

Main Page

选择New Blank App 选项。由于我们计划从头开始，创建一个自定义的HTML页面，我们将选择Custom HTML 选项。此外，我们还可以选择Blank Panel 选项。在这一点上，你的网页应该看起来像这样。

Blank Page

现在，我们可以开始设计我们的界面了。

创建键盘所需的组件

通过Anvil，我们可以拖入我们想在界面本身使用的任何组件。例如，如果我们想添加一个Date Picker 组件，我们将从侧边栏拖放Date Picker 组件到我们的界面。你还可以通过在侧边栏上向下滚动，直到看到properties 选项，来设置这个组件的一些基本属性。

键盘最重要的组件之一是输入栏。为此，我们将拖放TextBox 组件。然后，我们将把它拖到带有我们标志的图像组件下面。

接下来，我们将添加我们的按钮。一个键盘有几个按钮。对它们进行编码比拖放所有这些按钮更有意义。

创建一个面板来复制键盘的显示方式

我们的主界面上有Design 和Code 两个选项。选择Code 选项。你会看到网络应用程序生成器已经为你写好的一些基本命令。你会看到一个带有init 方法的类来初始化网络应用程序。我们将在这个代码的基础上进行开发。

Design Code

我们将首先创建一个字符列表来代表我们的按钮，并将其存储在一个称为chars 的变量中。接下来，我们将把这个变量分配给一个字符串列表，在这个列表中，我们将这些字符串按照我们希望看到按钮出现在页面上的相同顺序排列。

如下图所示。

 chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 
        ",", ".", "/", "-", "=", "+", "<--", "*", "Clr",     
        "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", 
        "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M" 
]

这个简单的键盘设计由大写字母、数字和标点符号组成。它还包括+, -, *, / 符号来进行算术。第一行，"1", "2", "3", "4", "5", "6", "7", "8", "9", "0" 代表键盘上的第一行，以此类推。

下一步涉及到在这些字符串上进行循环，并使用它们来创建按钮组件。首先，我们将需要创建一个空的字典来存储这些按钮。我们将这个字典称为self.btn 。然后，我们将把它分配给一组大括号，如图所示，这是一个空字典。

self.btn = {}

此外，由于我们想将这些按钮按行和列排列，我们需要一个网格。因此，我们将创建一个GridPanel ，并将其分配给一个叫做gridp 的变量，如图所示。

gridp = GridPanel()

现在，我们可以在这个面板内放置我们的按钮。

for i in chars:
    self.btn[i] = Button(text=i)
    gridp.add_component(self.btn[i], row = 'A', col_xs = 1, width_xs = 1)

self.add_component(gridp)

字母i ，代表不同的按钮。

我们现在可以继续运行这段代码。你可以在网页最上面的部分找到Run 按钮。你会被提示给你的应用程序指定一个名字。给它指定任何你想要的名字。我们把我们的Simple_Keyboard 。创建的网页现在应该出现了。

Simple keyboard

在这一点上，组件应该显示在屏幕上。但是它们到处都是。它们没有被安排好。我们将需要很好地安排它们。我们稍后会这样做。现在，让我们来处理它们的功能。

实现不同的按钮回调

我们的目标是收集我们所点击的按钮的值。如图所示，我们可以使用一个tag 属性轻松地做到这一点。

self.btn[i].tag.name = i

之后，我们可以使用一个点击事件来访问它。让我们创建一个点击方法并把它连接到我们所有的按钮上。我们将把这个方法写在我们当前代码块的按钮处，在init 方法之外。

def click(self, **event_args):
    print(event_args.['sender'].tag.name)

我们暂时添加print() 方法来测试按键的输出。

就在我们将按钮添加到网格中之前，我们将添加以下命令来添加点击事件方法。

self.btn[i].set_event_handler('click', self.click)

点击Run ，检查一切是否正常运行，并显示一个按下的键作为输出。一切都应该完美运行。

请确保展开输出栏以查看信息。

一旦我们的按钮输出了正确的字符，我们就可以把它们串联到我们的文本框中。我们可以在点击方法中加入以下代码，代替在终端上打印结果，以打印到文本框中。

def click(self, **event_args):
    self.text_box_1.text += event_args['sender'].tag.name

当你点击一个按钮时，它现在应该显示在文本框上。它的工作原理和预期的一样。我们按的按钮越多，我们的文本框长度就越长。

我们有一些按钮有一些特殊的功能，特别是当我们处理数字和算术运算符时。例如，Clear 和Delete 符号。

让我们回到我们的代码中，添加这些特殊功能。

测试键盘的功能

为了使代码更简单易读，我们将在点击方法里面添加以下代码，一个新的变量叫做val 。

 def click(self, **event_args):
    val = event_args['sender'].tag.name
    
    if val == "=":
      self.text_box_1.text = eval(self.text_box_1.text)
    elif val == "Clr":
      self.text_box_1.text = ""
    elif val == "<--":
      self.text_box_1.text = self.text_box_1.text[:-1]
    else:
      self.text_box_1.text += val

完美！我们的特殊功能现在应该可以工作了。我们的特殊功能现在应该可以工作了。点击Run 按钮来试试。添加一些数字，然后点击等号来输出结果。另外，你可以按退格按钮逐个清除字符，按Clear 按钮删除文本框中的所有内容。

现在，我们的键盘功能正常了。让我们给它添加一些样式。

键盘的样式

我们首先把我们的按钮分成四行。我们将为这个构建计算九个按钮，然后跳到下一行。enumerate() 方法将帮助我们做到这一点。我们将把我们的字符列表传给它。Enumerate返回两个不同的值，而不是一个。所以我们将添加一个idx 来帮助计数。

让我们添加下面的代码块。

for idx, i in enumerate(chars):
      if idx < 9:
        row = 'A'
      elif 9 <= idx < 18:
        row = 'B'
      elif 18 <= idx < 27:
        row = 'C'
      elif 27 <= idx <36:
        row = 'D'
      else:
        row = 'E'

添加完这个新的代码块后，运行它，看看它是否工作。

Styling

我们将row = 'A' 中的A 值替换为row = row ，在代码中gridp.add_component(self.btn[i], row = 'A', col_xs = 1, width_xs = 1) ，这就是我们的局部变量。

我们还可以对我们的按钮进行样式设计，使其更加漂亮。例如，让我们添加下面的代码。

self.btn[i] = Button(text=i, bold = True)

我们也来添加下面的代码段。

self.space = Spacer(height=400)
self.add_component(self.space)

发布网络应用程序

一旦我们对我们的网络应用感到满意，我们就可以部署它了。我们需要按下Publish this app 按钮，用Anvil来做这件事。它将生成一个代码，你可以用它在浏览器上查看已发布的Web应用。

收尾工作

我们已经在线部署了我们的键盘。它非常漂亮，我们可以与我们喜欢的人分享它。我们使用了图形设计工具来创建我们的网络应用。但这并不是唯一的方法。我们还可以用代码将其添加到界面中，如本教程所示。请随意尝试自己创建一个。

学校使用Anvil构建一个简单的键盘