如何从同一页上的材料按钮更新Flutter自动完成?

iecba09b  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(102)

下面的代码创建了一个自动完成字段和一个应一起工作的MaterialButton,但实际上却不是。

自动完成需要能够:

1.从键入或列表选择中直接获取用户输入
1.通过点击材料按钮进行更新

问题是我无法在同一个小部件中同时实现这两个功能。

当我设置TextFormField(控制器:field2TextEditingController,...)自动完成功能正确显示下拉categoryList,但材料按钮无法更新值
当我设置TextFormField(控制器:_category2Controller,...)材料按钮可以更新值,但自动完成不再显示下拉类别列表
你知道我怎么才能让这两样东西同时工作吗?
下面是我的代码:

dependencies:
      flutter_textfield_autocomplete: ^1.0.2
    
    
      String category2 = "";
    
      TextEditingController _category2Controller = TextEditingController();
    
      List<String> categoriesList = [];
      categoriesList = ["Breakfast", "Dessert", "Dinner", "Groceries", "Gas", "Insurance", "Lunch", "Vacation", "Vehicle Repair", "Wine"];
    
    
    Autocomplete<String>(
                            optionsBuilder: (TextEditingValue textEditingValue) {
                              return categoriesList
                                  .where((theString) => theString
                                  .toLowerCase()
                                  .startsWith(
                                  textEditingValue.text.toLowerCase()))
                                  .toList();
                            },
                            fieldViewBuilder: (BuildContext context,
                                TextEditingController field2TextEditingController,
                                FocusNode fieldFocusNode,
                                VoidCallback onFieldSubmitted) {
                              return TextFormField(
                                controller: _category2Controller,           // DOES NOT DISPLAY DROP DOWN LIST
                                // controller: field2TextEditingController,    // CANNOT ACCEPT VALUE FROM BUTTON
                                focusNode: fieldFocusNode,
                                decoration:
                                  const InputDecoration(labelText: 'Category 2'),
                                onChanged: (value) {
                                  category2 = value.toString();
                                  _category2Controller..text = value.toString()
                                    ..selection = TextSelection.collapsed(offset: _category2Controller.text.length);
                                },
                              );
                            },
                            displayStringForOption: (value) => value,
                            onSelected: (value) {
                              _category2Controller.text = value.toString();
                              category2 = value.toString();
                            },
                          ),
    
    
    MaterialButton(
                                padding: const EdgeInsets.all(10),
                                color: Colors.blueAccent,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5)),
                                child: const Text(
                                  "Zachary's Pizza - Dinner",
                                  style: TextStyle(color: Colors.white, fontSize: 15),
                                ),
                                onPressed: () {
                                                               _category2Controller.text = "Dinner";
                                  category2 = "Dinner";
                                },
                              ),

如有任何意见和/或建议,我们将不胜感激!

nfeuvbwi

nfeuvbwi1#

试试这样的方法:

TextEditingController? _categoryController;

MaterialButton(
  child: const Text('Groceries'),
  onPressed: () {
    _categoryController?.text = "Groceries";
    // Navigator.pop(context);
  },
),
Autocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    return categoriesList
        .where((theString) => theString
            .toLowerCase()
            .startsWith(textEditingValue.text.toLowerCase()))
        .toList();
  },
  fieldViewBuilder: (
    BuildContext context,
    TextEditingController fieldTextEditingController,
    FocusNode fieldFocusNode,
    VoidCallback onFieldSubmitted,
  ) {
    _categoryController ??= fieldTextEditingController; // initialize _categoryController if null
    return TextFormField(
      controller: _categoryController, // use _categoryController everywhere to update the TextFormField
      focusNode: fieldFocusNode,
      decoration: const InputDecoration(labelText: 'Category'),
    );
  },
  displayStringForOption: (value) => value,
)

相关问题