Flutter键盘隐藏插件dissmisskeyboard的使用

Flutter键盘隐藏插件dissmisskeyboard的使用

这个插件会简单地包装您的小部件，如果您点击任何地方，键盘将会被隐藏。这对于需要用户输入的小部件非常有用，比如：文本框等。

功能

这个插件会在点击子小部件时隐藏键盘。

使用方法

DismissKeyboard(child: Container(width: 300, height: 500, child: TextField()),);

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // useMaterial3: true,
      ),
      home: const MyHomePage(title: '示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DismissKeyboard(
      child: Scaffold(
        appBar: AppBar(title: const Text("DissmissKeyboard 示例")),
        body: const Center(
          child: TextField(),
        ),
      ),
    );
  }
}

更多关于Flutter键盘隐藏插件dissmisskeyboard的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter键盘隐藏插件dissmisskeyboard的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，要隐藏键盘通常可以通过使用FocusScope或FocusNode来实现。虽然没有一个专门的插件叫dismisskeyboard，但你可以通过以下几种方式来实现隐藏键盘的功能。

方法一：使用FocusScope

你可以使用FocusScope.of(context).unfocus()来隐藏键盘。这种方法通常用于点击屏幕其他区域时隐藏键盘。

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 隐藏键盘
        FocusScope.of(context).unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('Hide Keyboard Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: 'Enter something',
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 隐藏键盘
                  FocusScope.of(context).unfocus();
                },
                child: Text('Hide Keyboard'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

方法二：使用FocusNode

你可以使用FocusNode来控制键盘的显示和隐藏。

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = FocusNode();

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hide Keyboard Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              focusNode: _focusNode,
              decoration: InputDecoration(
                labelText: 'Enter something',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 隐藏键盘
                _focusNode.unfocus();
              },
              child: Text('Hide Keyboard'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

方法三：使用dismiss_keyboard插件

如果你确实想要使用一个插件，可以使用dismiss_keyboard插件来简化操作。

  1. 添加依赖： 在pubspec.yaml文件中添加以下依赖：

    dependencies:
  flutter:
    sdk: flutter
  dismiss_keyboard: ^1.0.0

  2. 使用插件： 在你的代码中使用DismissKeyboard widget来包裹整个应用或特定的部分。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DismissKeyboard(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Hide Keyboard Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: 'Enter something',
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 无需手动隐藏键盘，DismissKeyboard会自动处理
                },
                child: Text('Hide Keyboard'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}
回到顶部