Làm cách nào để loại bỏ bàn phím ảo?

Tôi đang thu thập thông tin nhập của người dùng bằng a TextFormFieldvà khi người dùng nhấn vào FloatingActionButtondấu cho biết họ đã hoàn tất, tôi muốn loại bỏ bàn phím ảo.

Làm cách nào để làm cho bàn phím tự động biến mất?

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.send),
        onPressed: () {
          setState(() {
            // send message
            // dismiss on screen keyboard here
            _controller.clear();
          });
        },
      ),
      body: new Container(
        alignment: FractionalOffset.center,
        padding: new EdgeInsets.all(20.0),
        child: new TextFormField(
          controller: _controller,
          decoration: new InputDecoration(labelText: 'Example Text'),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

void main() {
  runApp(new MyApp());
}

Kể từ Flutter v1.7.8 + hotfix.2, cách để thực hiện là:

FocusScope.of(context).unfocus()

Bình luận về PR về điều đó:

Bây giờ, # 31909 (be75fb3) đã hạ cánh, bạn nên sử dụng FocusScope.of(context).unfocus()thay vì FocusScope.of(context).requestFocus(FocusNode()), vì FocusNodes ChangeNotifiersvà nên được xử lý đúng cách.

-> KHÔNG sử dụng ̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶nữa.

 F̶o̶c̶u̶s̶S̶c̶o̶p̶e̶.̶o̶f̶(̶c̶o̶n̶t̶e̶x̶t̶)̶.̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶)̶;̶

Lưu ý: Câu trả lời này đã lỗi thời. Xem câu trả lời cho các phiên bản mới hơn của Flutter .

Bạn có thể loại bỏ bàn phím bằng cách lấy đi tiêu điểm của bàn phím TextFormFieldvà đưa nó cho một bàn phím không sử dụng FocusNode:

FocusScope.of(context).requestFocus(FocusNode());

Giải pháp với FocusScope không phù hợp với tôi. Tôi đã tìm thấy một cái khác:

import 'package:flutter/services.dart';

SystemChannels.textInput.invokeMethod('TextInput.hide');

Nó đã giải quyết vấn đề của tôi.

Đối với Flutter 1.17.3 (kênh ổn định kể từ tháng 6 năm 2020), hãy sử dụng

FocusManager.instance.primaryFocus.unfocus();

Không có giải pháp nào ở trên không hiệu quả với tôi.

Flutter gợi ý điều này - Đặt tiện ích của bạn vào bên trong GestureDetector () mới, trên đó chạm sẽ ẩn bàn phím và onTap sử dụng FocusScope.of (context) .requestFocus (new FocusNode ())

class Home extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    var widget = new MaterialApp(
        home: new Scaffold(
            body: new Container(
                height:500.0,
                child: new GestureDetector(
                    onTap: () {
                        FocusScope.of(context).requestFocus(new FocusNode());
                    },
                    child: new Container(
                        color: Colors.white,
                        child:  new Column(
                            mainAxisAlignment:  MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,

                            children: [
                                new TextField( ),
                                new Text("Test"),                                
                            ],
                        )
                    )
                )
            )
        ),
    );

    return widget;
}}

Mã sau đã giúp tôi ẩn bàn phím

   void initState() {
   SystemChannels.textInput.invokeMethod('TextInput.hide');
   super.initState();
   }

Ví dụ về triển khai .unfocus () để tự động ẩn bàn phím khi cuộn danh sách

FocusScope.of(context).unfocus();

bạn có thể tìm thấy tại

https://github.com/flutter/flutter/issues/36869#issuecomment-518118441

Cảm ơn szotp

GestureDetector(
          onTap: () {
            FocusScope.of(context).unfocus();
          },
          child:Container(
    alignment: FractionalOffset.center,
    padding: new EdgeInsets.all(20.0),
    child: new TextFormField(
      controller: _controller,
      decoration: new InputDecoration(labelText: 'Example Text'),
    ),
  ), })

thử cử chỉ này khi chạm

Vì trong Flutter, mọi thứ đều là một tiện ích, tôi quyết định kết SystemChannels.textInput.invokeMethod('TextInput.hide');hợpFocusScope.of(context).requestFocus(FocusNode()); cách tiếp cận trong một mô-đun tiện ích ngắn với một widget và một mixin trong đó.

Với tiện ích này, bạn có thể bọc bất kỳ tiện ích nào (rất thuận tiện khi sử dụng hỗ trợ IDE tốt) với KeyboardHidertiện ích:

class SimpleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardHider(
      /* Here comes a widget tree that eventually opens the keyboard,
       * but the widget that opened the keyboard doesn't necessarily
       * takes care of hiding it, so we wrap everything in a
       * KeyboardHider widget */
      child: Container(),
    );
  }
}

Với mixin, bạn có thể kích hoạt ẩn bàn phím khỏi bất kỳ trạng thái hoặc tiện ích nào sau bất kỳ tương tác nào:

class SimpleWidget extends StatefulWidget {
  @override
  _SimpleWidgetState createState() => _SimpleWidgetState();
}

class _SimpleWidgetState extends State<SimpleWidget> with KeyboardHiderMixin {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        // Hide the keyboard:
        hideKeyboard();
        // Do other stuff, for example:
        // Update the state, make an HTTP request, ...
      },
    );
  }
}

Chỉ cần tạo một keyboard_hider.darttệp và tiện ích con và mixin đã sẵn sàng để sử dụng:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// Mixin that enables hiding the keyboard easily upon any interaction or logic
/// from any class.
abstract class KeyboardHiderMixin {
  void hideKeyboard({
    BuildContext context,
    bool hideTextInput = true,
    bool requestFocusNode = true,
  }) {
    if (hideTextInput) {
      SystemChannels.textInput.invokeMethod('TextInput.hide');
    }
    if (context != null && requestFocusNode) {
      FocusScope.of(context).requestFocus(FocusNode());
    }
  }
}

/// A widget that can be used to hide the text input that are opened by text
/// fields automatically on tap.
///
/// Delegates to [KeyboardHiderMixin] for hiding the keyboard on tap.
class KeyboardHider extends StatelessWidget with KeyboardHiderMixin {
  final Widget child;

  /// Decide whether to use
  /// `SystemChannels.textInput.invokeMethod('TextInput.hide');`
  /// to hide the keyboard
  final bool hideTextInput;
  final bool requestFocusNode;

  /// One of hideTextInput or requestFocusNode must be true, otherwise using the
  /// widget is pointless as it will not even try to hide the keyboard.
  const KeyboardHider({
    Key key,
    @required this.child,
    this.hideTextInput = true,
    this.requestFocusNode = true,
  })  : assert(child != null),
        assert(hideTextInput || requestFocusNode),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        hideKeyboard(
          context: context,
          hideTextInput: hideTextInput,
          requestFocusNode: requestFocusNode,
        );
      },
      child: child,
    );
  }
}

Bạn có thể sử dụng unfocus()phương thức từ FocusNodelớp.

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = new TextEditingController();
  FocusNode _focusNode = new FocusNode(); //1 - declare and initialize variable

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.send),
        onPressed: () {
            _focusNode.unfocus(); //3 - call this method here
        },
      ),
      body: new Container(
        alignment: FractionalOffset.center,
        padding: new EdgeInsets.all(20.0),
        child: new TextFormField(
          controller: _controller,
          focusNode: _focusNode, //2 - assign it to your TextFormField
          decoration: new InputDecoration(labelText: 'Example Text'),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

void main() {
  runApp(new MyApp());
}

Có vẻ như các cách tiếp cận khác nhau cho phiên bản khác nhau. Tôi đang sử dụng Flutter v1.17.1 và phần bên dưới phù hợp với tôi.

onTap: () {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
       currentFocus.focusedChild.unfocus();
    }
}

_dismissKeyboard(BuildContext context) {
   FocusScope.of(context).requestFocus(new FocusNode());
}

@override
Widget build(BuildContext context) {

return new GestureDetector(
    onTap: () {
    this._dismissKeyboard(context);
    },
    child: new Container(
    color: Colors.white,
    child: new Column(
        children: <Widget>[/*...*/],
    ),
    ),
 );
}

thử sử dụng bộ điều khiển chỉnh sửa văn bản. lúc đầu,

    final myController = TextEditingController();
     @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

và trong sự kiện báo chí trực tuyến,

onPressed: () {
            commentController.clear();}

điều này sẽ loại bỏ keybord.