在应用栏中的文本字段小部件上按搜索图标和 Select 时如何使键盘出现？

Question

我该如何实施？ 我是 flutter 的新手.......

我正在制作一个具有搜索栏的AppBar ，我想在触摸搜索图标并准备输入TextField时自动弹出键盘，而无需 select Textfield 。

我实现的应用程序栏是只有当我按下搜索图标并按下 TextField 时才会弹出键盘，然后才会弹出键盘。 我想自动做到这一点，我只需要按搜索图标。

AppBar(
  
  backgroundColor: Colors.transparent,
  elevation: 0,
  flexibleSpace: Center(
    child: isLoading
        ? Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  child: Padding(
                    padding: const EdgeInsets.all(30.0),
                    child: Icon(Icons.search),
                  ),
                ),
              ),
              Expanded(
                flex: 9,
                child: TextField(
                  onChanged: (value) {
                    _selectedNames(value);

                    widget.controller2.add(1);
                  },
                  style: TextStyle(color: Colors.blue),
                  decoration: InputDecoration(
                      icon: Icon(
                        Icons.search,
                        color: Colors.white,
                      ),
                      hintText: "Search Here",
                      hintStyle: TextStyle(color: Colors.blue)),
                ),
              ),
              Expanded(
                flex: 1,
                child: GestureDetector(
                  child: Icon(Icons.cancel),
                  onTap: () {
                    setState(() {
                      isLoading = false;
                      selectedNamesForLaw = names;
                      print(isLoading);
                    });
                  },
                ),
              ),
            ],
          )
        : Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: IconButton(
                      icon: Icon(Icons.format_size),
                      onPressed: () {
                        getFontSizeDialog();
                      })),
              Padding(
                padding: const EdgeInsets.only(top: 20.0),
                child: Text(
                  widget.text,
                  style: TextStyle(fontSize: 30, color: Colors.blueAccent),
                ),
              ),
              Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {
                        setState(() {
                          isLoading = true;
                        });
                      })),
            ],
          ),
  ),
  automaticallyImplyLeading: false,
);

Answer 1

在您的 class 中，您需要定义 FocusNode，您可以使用以下代码执行此操作：

FocusNode focusNode;

如果您使用的是有状态小部件，请确保在 initState 中初始化 FocusNode：

@override
  void initState() {
    super.initState();
    focusNode = FocusNode();
  }

TextField 有一个名为focusNode的参数，您可以将其传入新初始化的 FocusNode：

TextField(
      focusNode: focusNode,
    )

然后，像这样更改您的代码：

Container(
   child: Padding(
   padding: const EdgeInsets.all(30.0),
   child: GestureDetector(
      child: Icon(Icons.search),
      onTap: () => focusNode.requestFocus()
      ),
   ),
)

Answer 2

每当按下搜索图标时，将焦点设置为 TextField 并弹出键盘。

将焦点滑动到 Flutter 中的 TextField