Flutter Widget 之Autocomplete

你知道的，没有人喜欢打字。所以当表单输入可以完成你的句子时那就太好了。

这是一个常见的UI模式，你可以使用一个布局构造器，一个堆栈，在用户输入时在下面的一些列表磁铁以及…

Flutter中有一个小部件是为其量身打造的，Autocomplete为您的用户提供现成的自动填充的体验。

将任何文本输入部件都换成自动填充部件并提供一个optionsBuilder。

optionsBuilder是一个方法，它从文本书睿中获取最新的textEditingValue属性，并返回一个可迭代的匹配。这些匹配可以是字符串或自定义类型

// TextField()

Autocomplete<String>(
    optionsBuilder: (textEditingValue) {
        return data.filter(
            (entry) => entry.contains(textEditingValue.text),
        );
    }
)

Autocomplete<MyCustomType>(
    optionsBuilder: (textEditingValue) {
        return myObjects.filter(
            (obj) => obj.name.contains(
                textEditingValuue.text
            ),
        );
    },
)

你可以用displayStringForOption参数将其变成字符串

Autocomplete<MyCustomType>(
    optionsBuilder: (...) {},
    displayStringForOption: (MyCustomType obj) => obj.name,
)

为了控制这些显示匹配的外观，使用optionsViewBuilder回调

Autocomplete<MyCustomType>(
    optionsBuilder: (...) {},
    displayStringForOption: (MyCustomType obj) => obj.name,
    optionsViewBuilder: (
        context,
        onSelected,
        options,
    ) => ListView.builder(
        itemCount: options.length,
        itemBuilder: (context, index) {
            return Widgets(options[i]);
        },
    ),
)

为了知道你的用户何时点击其中一个匹配，提供一个onSelected函数

Autocomplete<MyCustomType>(
    optionsBuidler: (...) {},
    displayStringForOption: (...) {},
    optionsViewBuilder: (...) {},
    onSelected: (MyCustomType obj) {
        stateManagement.toggle(obj);
    },
)

最后，如果你原来的文本输入很时尚，而autocomplete提供的文本输入相比之下很无聊，请使用fieldViewBuilder参数，来保持对输入的完全控制

Autocomplete<MyCustomType>(
    optionsBuilder: (...) {},
    displayStringForOption: (...) {},
    optionsViewBuilder: (...) {},
    onSelected: (...) {},
    fieldViewBuilder: (
        context,
        textEditingController,
        focusNode,
        oonFieldSubmitted,
    ) => MyFancyTextInput(...),
)

如果想了解有关Autocomplete的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址