flutter - 以编程方式打开 Flutter 下拉菜单

Question

我正在尝试构建一个可搜索的下拉列表，它将在每次单击按钮时从服务中加载值。因此，为此我在 Stack Widget 中封装了 DropDownButton 和 TextField。

在按键上，我们从 api 得到响应，到目前为止一切顺利。但是从 api 下拉列表获取数据后没有打开。深入研究后，我发现它没有打开，因为我们需要手动点击它才能打开，但由于它在堆栈中并且第二个子项是 TextField，所以我无法点击它。

但是以编程方式打开 DropDownButton 按钮是不可能的。所以我尝试了 https://stackoverflow.com/a/59499191/10423593 中的第二种解决方案但它没有用。

下面是我的代码，没有来自 stackoverflow 的解决方案。

import 'package:flutter/material.dart';
import 'package:giphy/services/gifs_service.dart';
import 'package:giphy/shared/autocomplete.dart';

class TestDropDown extends StatefulWidget {
  // const TestDropDown({Key? key}) : super(key: key);
  @override
  _TestDropDownState createState() => _TestDropDownState();
}

class _TestDropDownState extends State<TestDropDown> {
  final GifyService _service = GifyService();

  final TextEditingController _gifSearchController = TextEditingController();

  List<SearchData> _dropDownResult = <SearchData>[];

  GlobalKey key = GlobalKey();

  // T? _findChildWidgetFromKey<T extends Widget>(
  //     BuildContext? context, T childWidget) {
  //   T? detector;
  //   context!.visitChildElements((element) {
  //     if (element.widget == childWidget) {
  //       detector = element.widget as T;
  //     }
  //   });

  //   return detector;
  // }

  Widget _buildDropDown(List<SearchData> searchData) => DropdownButton<String>(
        isExpanded: true,
        key: key,
        onChanged: (String? value) {},
        items: searchData
            .map(
              (e) => DropdownMenuItem<String>(
                child: Text(e.name ?? ''),
                value: e.name ?? '',
              ),
            )
            .toList(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          _buildDropDown(_dropDownResult),
          Container(child: () {
            if (_dropDownResult.length > 0) {
              _buildDropDown(_dropDownResult);
            }
          }()),
          TextField(
            controller: _gifSearchController,
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderSide: BorderSide(width: 0.5),
                borderRadius: BorderRadius.circular(21),
              ),
            ),
            onChanged: (String value) async {
              AutoComplete result = await _service.getSearchKeywords(value);
              setState(() {
                _dropDownResult = result.data;
              });
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

如果您希望自动完成文本字段，那么您可以使用 autocomplete_textfield包。

或者如果您想自己构建它，那么您可以尝试使用容器而不是下拉菜单的不同方法。