首页 > 其他分享 >Flutter中如何实现手机键盘右下角完成键搜索

Flutter中如何实现手机键盘右下角完成键搜索

时间:2023-08-10 19:06:47浏览次数:28  
标签:searchController 右下角 键盘 搜索 按钮 TextInputAction Flutter

要实现在手机键盘右下角显示“完成”键作为搜索按钮,可以使用TextInputAction属性来控制键盘的行为。将textInputAction属性设置为TextInputAction.search即可将键盘右下角的按钮改为“完成”按钮,并且点击该按钮时会触发提交(搜索)操作。

下面是一个示例代码:

import 'package:flutter/material.dart';

class SearchScreen extends StatefulWidget {
  @override
  _SearchScreenState createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  TextEditingController _searchController = TextEditingController();

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

  void _submitSearch() {
    String keyword = _searchController.text;
    // 在这里执行搜索逻辑
    print('搜索关键词:$keyword');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索页面'),
      ),
      body: Column(
        children: [
          TextField(
            controller: _searchController,
            decoration: InputDecoration(
              hintText: '输入搜索内容',
            ),
            textInputAction: TextInputAction.search, // 设置为搜索操作
            onSubmitted: (_) => _submitSearch(), // 提交(搜索)操作回调函数
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: SearchScreen()));
}

在上述示例中,我们首先创建了一个TextEditingController对象_searchController来管理搜索框的文本。

然后,在TextField中,我们将controller属性设置为_searchController以便管理搜索框的文本。

接下来,通过设置textInputAction属性为TextInputAction.search,我们将键盘右下角的按钮改为“完成”按钮,同时点击该按钮时会触发onSubmitted回调函数。

最后,我们编写了_submitSearch()方法来处理搜索操作。在这个方法中,可以获取搜索关键词,并执行实际的搜索逻辑(这里只是简单地打印关键词)。

使用以上代码,在搜索框中输入内容后,点击键盘上的“完成”按钮即可触发搜索操作。

标签:searchController,右下角,键盘,搜索,按钮,TextInputAction,Flutter
From: https://blog.51cto.com/u_15997490/7038451

相关文章

  • 13.键盘监听事件
    packageGUI;importjava.awt.*;importjava.awt.event.KeyAdapter;importjava.awt.event.KeyEvent;publicclassTest13_Key{publicstaticvoidmain(String[]args){newKeyFrame();}}classKeyFrameextendsFrame{publicKeyFrame()......
  • Flutter实现将变量保存到本地,之后调用它
    1、首先,在pubspec.yaml文件中添加shared_preferences依赖:dependencies:flutter:sdk:fluttershared_preferences:^2.0.9这里的版本你需要自己到官网选择下载:Dartpackage2、运行flutterpubget命令来获取依赖包。3、在需要保存变量的地方,导入相关库:import'package:fl......
  • Flutter中的弹框,按钮
    一、在Flutter应用程序中,你可以使用不同类型的弹框提示来向用户提供信息、确认操作或警告。以下是一些常见的弹框提示类型:AlertDialog(对话框):通常用于显示重要的信息或需要用户确认的操作。SimpleDialog(简单对话框):用于从一系列选项中选择一个选项。BottomSheet(底部弹框):从屏幕底部弹......
  • 键盘事件
         ......
  • [oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CS
    光标位置回忆上次内容上次了解了新的转义模式\033逃逸控制字符escape这个字符让字符串退出标准输出流进行控制信息的设置可以设置光标输出的位置ASR33中的ALTMODE是今天的ESC键吗????......
  • python教程 入门学习笔记 第7天 打印字符串拼接数值 其它类型转布尔值bool 模拟用户键
    想打印字符串拼接数值例如张三666怎么做?print("张三"+str(666))#直接将数值666转换为字符串,不用赋值也可以3)其它类型转布尔值bool布尔转换规则:所有表示空意义的数据,将被转换成False,其它数据将被转换成Truea=7 #整型数值b="nihao" #字符串c=0 #空值print(boo......
  • 键盘快捷键映射方式总结
    因为经常在电脑上打字,以及之前使用笔记本的历史原因,我喜欢使用fn+left=home,fn+right=end,fn挨着左边的ctrl键。这两个快捷键在编辑文字时非常方便跳转。ctrl+方向键逐个单词跳转,fn+方向键直接跳转到行首和行尾。后来换成了标准配列的键盘,原来fn的位置为win键,为了......
  • Flutter开发之——IOS通信MethodChannel
     https://blog.csdn.net/Calvin_zhou/article/details/119042778 开始我新建的纯flutter项目,在研究flutter与原生交互时,按照上面代码操作后,报错UnhandledException:MissingPluginException(NoimplementationfoundformethodsendDataonchannelcom.example.flutteri......
  • Flutter开发之——iOS原生项目导入Flutter
     https://blog.csdn.net/Calvin_zhou/article/details/118926285Flutter开发之——IOS启动Flutterhttps://blog.csdn.net/Calvin_zhou/article/details/118958119 ......
  • 笔记本电脑小键盘数字键的光标作用
    我的笔记本平时要使用home,end功能时,由于键位太小不好找,且要结合fn+键位的按法,非常麻烦如图通过NumLock切换小键盘数字键实现光标功能......