在 Pythonista 3 中创建自动完成的 TextField

Question

我想创建一个自动完成的 TextField。

我的意思是 - 当您在字段中键入内容并看到下面的提示列表时。提示列表是一个包含可能值的数组。最好的解释方法是显示类似的图片。

我已经有一些 Pythonista 3 的经验，但这不是 UI 编程经验。

我知道这很复杂，也许我应该使用额外的视图和委托机制，但我不知道如何开始。我已经花了几天时间在 Google 中寻找解决方案，但在 Pythonista 的上下文中我不能。

有人做过吗？或者有人可以提供有用的阅读链接吗？

Answer 1

可以使用 TableView 在 Pythonista 中创建一个 drop-down 列表。 TableView 实际上只是 single-column 列表，它们不仅仅用于表格。

所以步骤是：

创建一个表视图。
将其与您的文本字段对齐。
在开始输入之前隐藏表格视图。
每当键入更改时，使用 auto-completion 选项更新 tableview 的项目列表。
可能会在输入结束时再次隐藏 tableview。

您可以通过将其 .hidden 属性设置为 True 来隐藏任何视图。

在 TextField 中开始键入时，您可以通过创建实现 textfield_did_change.

的委托对象来执行操作

您可以通过为 TableView 提供 data_source 来设置 TableView 以包含项目列表，可能是 ui.ListDataSource 的实现。每当数据源上的 items 属性改变时，选项列表也会自动改变。

您可以通过在 TableView 的 delegate 上设置 action 来响应用户从 TableView 中选择一个选项。

TableView、TextField、ListDataSource、委托和操作的文档可以在 Pythonista 的 Native GUI for iOS 文档中找到。

这是一个基本示例：

# documentation at http://omz-software.com/pythonista/docs/ios/ui.html
import ui

# the phoneField delegate will respond whenever there is typing
# the delegate object will combine phoneField delegate, tableview delegate, and data source, so that it can share data
class AutoCompleter(ui.ListDataSource):
    def textfield_did_change(self, textfield):
        dropDown.hidden = False
        # an arbitrary list of autocomplete options
        # you will have a function that creates this list
        options = [textfield.text + x for x in textfield.text]

        # setting the items property automatically updates the list
        self.items = options
        # size the dropdown for up to five options
        dropDown.height = min(dropDown.row_height * len(options), 5*dropDown.row_height)

    def textfield_did_end_editing(self, textfield):
        #done editing, so hide and clear the dropdown
        dropDown.hidden = True
        self.items = []

        # this is also where you might act on the entered data
        pass

    def optionWasSelected(self, sender):
        phoneField.text = self.items[self.selected_row]
        phoneField.end_editing()

autocompleter = AutoCompleter(items=[])
autocompleter.action = autocompleter.optionWasSelected

# a TextField for phone number input
phoneField = ui.TextField()
phoneField.delegate = autocompleter
phoneField.keyboard_type = ui.KEYBOARD_PHONE_PAD
phoneField.clear_button_mode = 'while_editing'

# the drop-down menu is basically a list of items, which in Pythonista is a TableView
dropDown = ui.TableView()
dropDown.delegate = autocompleter
dropDown.data_source = autocompleter
# hide the dropdown until typing starts
dropDown.hidden = True

# create interface
mainView = ui.View()
mainView.add_subview(phoneField)
mainView.add_subview(dropDown)

# present the interface before aligning fields, so as to have the window size available
mainView.present()

# center text field
phoneField.width = mainView.width*.67
phoneField.height = 40

phoneField.x = mainView.width/2 - phoneField.width/2
phoneField.y = mainView.height/3 - phoneField.height/2

# align the dropdown with the phoneField
dropDown.x = phoneField.x
dropDown.y = phoneField.y + phoneField.height
dropDown.width = phoneField.width
dropDown.row_height = phoneField.height

在我的 iPhone 上，这段代码创建了一个如下所示的界面：

在 Pythonista 3 中创建自动完成的 TextField

Create auto-complete TextField in Pythonista 3

python

pythonista