Flutter實現點選空白區域隱藏軟鍵盤

旺仔小小饅頭發表於2021-07-25

實現思路: 使用GestureDetector將最外層的MaterialApp包裹起來,監聽onTap點選事件,使用FocusSocpe相關的api來控制軟體的顯示和隱藏。當鍵盤顯示的時候,將鍵盤隱藏。

封裝Widget

/// 因為不需要保持狀態,所以這裡繼承的是StatelessWidget
class HideKeyboard extends StatelessWidget {
  final Widget child;

  const HideKeyboard({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: child,
      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus &&
            currentFocus.focusedChild != null) {
          /// 取消焦點,相當於關閉鍵盤
          FocusManager.instance.primaryFocus.unfocus();
        }
      },
    );
  }
}
複製程式碼

使用

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// 放在app最外層即可。
    return HideKeyboard(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("Hide soft keyboard demo"),
          ),
          body: Container(
            child: Text("hello,world"),
          ),
        ),
      ),
    );
  }
}
複製程式碼

相關文章