flutter - 在 Flutter 中自定义 AutoComplete 小部件

Question

我是 Flutter 的新手。

我需要在一个页面中有几个自动完成字段，以接收用户输入（重新或从附加到每个自动完成字段的下拉列表中选择）。

当用户点击页面底部的按钮时，来自所有自动完成字段的此类输入需要传递给变量并最终提交到数据库（ObjectBox）。

我的要求是这样的；我需要一个简单的语句，而不是每个自动完成字段写大约 25 行，例如；

return Column(
    children: [
         MyAutocomplete (someList, someLabel, someHint);  

         SizedBox(width: 10.00,),

         MyAutocomplete (anotherList, anotherLabel, anotherHint);

         SizedBox(width: 10.00,),

        //several more MyAutocomplete fields

        // the ElevatedButton comes here


])

并且，将用户输入收集到每个字段的专用变量中。

我的问题是；如何在一个地方构建上述自定义的 MyAutocomplete 小部件，以及如何在 UI 代码中调用并将参数传递给它，如上图所示？

非常感谢您在这方面的帮助。

下面附加了带有默认自动完成小部件的详细版本的示例代码（只有两个字段！）。

提前谢谢你，

Widget twoAutoCompleteBoxes() {

    const List<String> _kOptions = <String>['aardvark', 'bobcat', 'chameleon'];

 return Column(
     children: [
       Autocomplete<String>(
           optionsBuilder: (TextEditingValue textEditingValue) {
             if (textEditingValue.text == '') {
               return const Iterable<String>.empty();
             }
             return _kOptions.where((String option) {
               return option.contains(textEditingValue.text.toLowerCase());
             });
           },
           fieldViewBuilder: (BuildContext context,
               TextEditingController textEditingController,
               FocusNode focusNode, VoidCallback onFieldSubmitted) {
             return TextFormField(
               controller: textEditingController,
               decoration: myTextFieldDecoration(topLabel: "First Input", hintText: "Type or 
                      select from list"),
               focusNode: focusNode,
               onFieldSubmitted: (String value) {
                 onFieldSubmitted();
                  print('You just typed a new entry  $value');
               },
             );
           },
        onSelected: (String selection) {
          print('You just selected $selection');
        },
      ),

    SizedBox(
      width: 10.00,
    ),

      Autocomplete<String>(
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text == '') {
            return const Iterable<String>.empty();
          }
          return _kOptions.where((String option) {
            return option.contains(textEditingValue.text.toLowerCase());
          });
        },
        fieldViewBuilder: (BuildContext context,
            TextEditingController textEditingController,
            FocusNode focusNode, VoidCallback onFieldSubmitted) {
          return TextFormField(
            controller: textEditingController,
            decoration: myTextFieldDecoration(topLabel: "Another Input", hintText: "Type or select from list"),
            focusNode: focusNode,
            onFieldSubmitted: (String value) {
              onFieldSubmitted();
              print('You just typed a new entry  $value');
            },
          );
        },
        onSelected: (String selection) {
          print('You just selected $selection');
        },
      ),
   ],
 );
} // END OF "Widget twoAutoCompleteBoxes()"

另外，我的自定义装饰（只是为了完成；您可以忽略此代码）：-

   // a common decoration for all types of text input fields, passed as the decoration 
     parameter
   InputDecoration myTextFieldDecoration(
      {String topLabel = "",
       String hintText = "",
       double cornerRadius = 5.0,
        Icon? icon}) {
     return InputDecoration(
       labelText: topLabel,
       hintText: hintText,
       icon: icon,
       border: OutlineInputBorder(
       borderRadius: BorderRadius.all(Radius.circular(cornerRadius)),
    ),
  );
}

标签： flutterautocomplete

Answer 1

声明一个名为 MyAutocomplete 的 statefulWidget 并返回你想要的 Autocomplete。

class MyAutocomplete extends StatefulWidget {
  final List<String> someList;

  const MyAutocomplete({
    Key? key,
    required this.someList,
  }) : super(key: key);

  @override
  State<MyAutocomplete> createState() =>
      _MyAutocompleteState();
}

class _MyAutocompleteState
    extends State<MyAutocomplete> {

  @override
  Widget build(BuildContext context) {
    return Autocomplete<AutocompletePrediction>(
      ... widget.someList ...
    );
  }
}