当我点击TextFormField内部的suffixIcon时，防止TextFormField的聚焦

Question

当我按下按钮，TextFormField就会聚焦，键盘就会出现。如何解决这个问题？

代码如下：

TextFormField(
              controller: code,
              focusNode: codeFocus,
              decoration: InputDecoration(
                labelText: 'verify code',
                prefixIcon: Icon(Icons.sms),
                suffixIcon: FlatButton(
                  onPressed:(){}
                  child: Text('send sms'),
                  textTheme: ButtonTextTheme.primary,
                ),
              ),
              keyboardType: TextInputType.number,
            ),
            focusNode: codeFocus,
          )

Answer 1

你可以像这样使用堆栈。

Stack(
  alignment: Alignment.centerRight,
  children: <Widget>[
    TextFormField(
      decoration: InputDecoration(
        labelText: 'verify code',
        prefixIcon: Icon(Icons.sms),
      ),
      keyboardType: TextInputType.number,
    ),
    FlatButton(
      onPressed: () {},
      textTheme: ButtonTextTheme.primary,
      child: Text('send sms'),
    ),
  ],
)

顺便说一句The same question was asked few days ago ..。

Answer 2

当你点击你的suffixIcon时使用这个函数。

() {
  // This will help to wait for TextField to get focus before
  // we unfocus but it will happen fast so that you won't notice.
  Future.delayed(Duration.zero, () {
    _yourInputFocusNode.unfocus();
    // Your implementation to run when tap suffixIcon in TextField
  });
},

示例

TextFormField(
  focusNode: _phoneNumberFocusNode,
  decoration: InputDecoration(
    suffixIcon: IconButton(
      icon: Icon(Icons.contacts),
      onPressed: () {
        Future.delayed(Duration.zero, () {
          _phoneNumberTwoFocusNode.unfocus();
          Navigator.pushNamed(context, 'Contacts');
        });
      },
    ),
  ),
),