在Flutter App中如何采取正确优雅的姿势取消键盘?

在Flutter App中如何采取正确优雅的姿势取消键盘?

题外话

lz第一次做取消键盘的操作,是使用了一个插件 keyboard_actions (借鉴了deer大佬的demo),有一说一,还是不错的。然后lz偶然的一次查阅别的问题,突然灵机一动,春光灿烂。

检测点击区域

我们需要做的第一件事是检测用户何时点击了当前焦点文本字段之外的内容。这必须得亏有GestureDetector老哥帮忙,它使检测诸如点击、拖动、按住等交互变得超级简单。
在这里插入图片描述

怎么使用呢,放哪?

lz是直接包裹在整个MaterialApp上的。
在这里插入图片描述
其实看需求而定,也可以在你觉得需要的页面进行包裹就行了,我这样虽然省事,但是后面不知道会不会出现其他问题。对了,Flutter App使用 Scaffold 做为页面的根Widget时,可以设置resizeToAvoidBottomInset = false,来阻止因为唤起键盘而导致把底部的Widgets弹起,避免尴尬哈。
在onTap房里,执行取消焦点操作即可大功告急。
附上图片
在这里插入图片描述

取消键盘的方法

对于取消键盘,网上给出了另一个方法,

FocusScope.of(context).requestFocus(new FocusNode());,那为什么lz要用上面那串常常的代码呢?
不要问,问就给出官方解释权:

While this does technically work, it’s not recommended as FocusNode is a ChangeNotifier and therefore needs to be disposed of properly. With the above method, a FocusNode is created and then thrown into the abyss never to be seen again.

对于英语跛脚的我们,直接看下面:
虽然这在技术上是可行的,但并不推荐使用它,因为FocusNode是一个ChangeNotifier,因此需要正确地处理它。使用上面的方法,可以创建一个FocusNode,然后把它扔进深渊,再也看不到它了。

煽情一幕

感谢唯鹿大佬的指教。
原文出处:https://flutterigniter.com/dismiss-keyboard-form-lose-focus/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter,可以使用以下步骤来实现启动广告页: 1. 在pubspec.yaml文件添加flutter_svg插件,以便加载SVG图片: dependencies: flutter_svg: ^0.22.0 2. 创建一个新的类,例如SplashScreen,来显示启动广告页。在这个类,可以使用Stack Widget来叠加一个Image或SVG图片和一个倒计时Widget。 import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class SplashScreen extends StatefulWidget { @override _SplashScreenState createState() => _SplashScreenState(); } class _SplashScreenState extends State<SplashScreen> { int _countdown = 3; @override void initState() { super.initState(); startTimer(); } void startTimer() { Timer.periodic(Duration(seconds: 1), (timer) { setState(() { if (_countdown > 1) { _countdown--; } else { timer.cancel(); // 跳转到主页 } }); }); } @override Widget build(BuildContext context) { return Scaffold( body: Stack( fit: StackFit.expand, children: [ SvgPicture.asset( 'assets/images/splash_screen.svg', fit: BoxFit.cover, ), Positioned( top: 40, right: 40, child: GestureDetector( onTap: () { // 跳过广告,直接跳转到主页 }, child: Container( padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5), decoration: BoxDecoration( color: Colors.black54, borderRadius: BorderRadius.circular(20), ), child: Text( '跳过 $_countdown', style: TextStyle( color: Colors.white, fontSize: 16, ), ), ), ), ), ], ), ); } } 3. 在主Flutter应用程序,将SplashScreen作为Navigator的第一个页面,以便在启动时显示。 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'MyApp', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: SplashScreen(), // 启动广告页 ); } } 通过上述步骤,即可在Flutter实现启动广告页。可以根据具体需求,调整广告图片、倒计时时间和跳过广告的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值