在 Flutter 中自定义 AutoComplete 小部件

Question

我是颤振新手。

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

当用户点击页面底部的按钮时，所有自动完成字段中的此类输入都需要传递给变量，并最终提交到数据库 (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)),
    ),
  );
}

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 ...
    );
  }
}