Flutter 中点击输入框之外的区域，进行失焦，收起键盘

Zh-jie2024-06-16 11:59

首先引用 FocusNode()

复制代码

FocusNode focusNode = FocusNode();

然后在输入框组件中调用即可

Dart 复制代码

TextField(
                        controller: _textController,
                        textAlign: TextAlign.start,
                        focusNode: focusNode,
                        onTapOutside: (e) => {focusNode.unfocus()},
                        onEditingComplete: () {
                          FocusScope.of(context).requestFocus(focusNode);
                        },
                        decoration: InputDecoration(
                          contentPadding:
                              const EdgeInsets.symmetric(horizontal: 0),
                          hintText: hitText,
                          hintStyle: const TextStyle(color: Colors.grey),
                         
                          focusedBorder: const UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                            borderRadius: BorderRadius.horizontal(),
                          ),
                        ),
                        cursorColor: Colors.white,
                        style: greyTextStyle,
                        onChanged: (value) {
                          setState(() {
                            titleValue = value;
                          });
                        },
                        autofocus: false,
                      ),

下方的代码就是起到点击输入框之外的区域，进行失焦，收起键盘的作用

Dart 复制代码

onTapOutside: (e) => {focusNode.unfocus()},
                        onEditingComplete: () {
                          FocusScope.of(context).requestFocus(focusNode);
                        },