ฉันจะปิดแป้นพิมพ์บนหน้าจอได้อย่างไร

ฉันกำลังรวบรวมข้อมูลของผู้ใช้ด้วย a TextFormFieldและเมื่อผู้ใช้กดที่FloatingActionButtonระบุว่าเสร็จแล้วฉันต้องการปิดแป้นพิมพ์บนหน้าจอ

ฉันจะทำให้คีย์บอร์ดหายไปโดยอัตโนมัติได้อย่างไร

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());
}

ในขณะที่ Flutter v1.7.8 + hotfix.2 วิธีที่จะไปคือ:

FocusScope.of(context).unfocus()

แสดงความคิดเห็นเกี่ยวกับการประชาสัมพันธ์ว่า:

ตอนนี้ # 31909 (be75fb3) มาถึงแล้วคุณควรใช้ FocusScope.of(context).unfocus()แทน FocusScope.of(context).requestFocus(FocusNode())เนื่องจากFocusNodeมี ChangeNotifiersและควรกำจัดอย่างเหมาะสม

-> ห้ามใช̶้r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶อีกต่อไป

 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̶(̶)̶)̶;̶

หมายเหตุ:คำตอบนี้ล้าสมัย ดูคำตอบสำหรับรุ่นใหม่ของกระพือ

คุณสามารถปิดแป้นพิมพ์ได้โดยละทิ้งโฟกัสของแป้นพิมพ์TextFormFieldและมอบให้กับสิ่งที่ไม่ได้ใช้FocusNode:

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

วิธีแก้ไขด้วย FocusScope ไม่ได้ผลสำหรับฉัน ฉันพบอีก:

import 'package:flutter/services.dart';

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

มันช่วยแก้ปัญหาของฉันได้

สำหรับ Flutter 1.17.3 (ช่องสัญญาณเสถียร ณ เดือนมิถุนายน 2020) ให้ใช้

FocusManager.instance.primaryFocus.unfocus();

ตัวอย่างการนำไปใช้. unfocus () เพื่อซ่อนแป้นพิมพ์อัตโนมัติเมื่อเลื่อนรายการ

FocusScope.of(context).unfocus();

คุณสามารถค้นหาได้ที่

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

ขอบคุณข้อมูล szotp

ไม่มีวิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน

Flutter แนะนำสิ่งนี้ - วางวิดเจ็ตของคุณไว้ในGestureDetector () ใหม่ซึ่งการแตะจะซ่อนแป้นพิมพ์และ onTap ใช้FocusScope.of (บริบท) .requestFocus (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;
}}

รหัสต่อไปนี้ช่วยฉันซ่อนแป้นพิมพ์

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

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'),
    ),
  ), })

ลองใช้ท่าทางสัมผัส

เช่นเดียวกับใน Flutter ทุกอย่างเป็นวิดเจ็ตฉันตัดสินใจที่จะSystemChannels.textInput.invokeMethod('TextInput.hide');รวมไฟล์FocusScope.of(context).requestFocus(FocusNode());แนวทางในโมดูลยูทิลิตี้สั้น ๆ พร้อมวิดเจ็ตและมิกซ์อิน

ด้วยวิดเจ็ตคุณสามารถรวมวิดเจ็ตใด ๆ (สะดวกมากเมื่อใช้การสนับสนุน IDE ที่ดี) ด้วยKeyboardHiderวิดเจ็ต:

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(),
    );
  }
}

ด้วยการมิกซ์อินคุณสามารถเรียกใช้การซ่อนแป้นพิมพ์จากสถานะหรือวิดเจ็ตใด ๆ เมื่อมีการโต้ตอบ:

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, ...
      },
    );
  }
}

เพียงสร้างkeyboard_hider.dartไฟล์และวิดเจ็ตและมิกซ์อินก็พร้อมใช้งาน:

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,
    );
  }
}

คุณสามารถใช้unfocus()วิธีการจากFocusNodeชั้นเรียน

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());
}

ดูเหมือนแนวทางที่แตกต่างกันสำหรับเวอร์ชันต่างๆ ฉันใช้ Flutter v1.17.1 และด้านล่างใช้ได้ผลสำหรับฉัน

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>[/*...*/],
    ),
    ),
 );
}

ลองใช้ตัวควบคุมการแก้ไขข้อความ ที่จุดเริ่มต้น,

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

และในงานแถลงข่าว

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

สิ่งนี้จะปิดคีย์บอร์

สรุปได้ว่านี่คือโซลูชันที่ใช้งานได้สำหรับ Flutter 1.17:

ห่อวิดเจ็ตของคุณดังนี้:

GestureDetector(
        onTap: FocusScope.of(context).unfocus,
        child: YourWidget(),
);