首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter实现代码提示功能

Flutter实现代码提示功能

作者头像
rhyme_lph
发布于 2021-07-29 08:00:10
发布于 2021-07-29 08:00:10
1.8K00
代码可运行
举报
文章被收录于专栏:Flutter&DartFlutter&Dart
运行总次数:0
代码可运行

1.简介

在实现代码提示功能前,我们先来看看什么是代码提示,当我输入关键字String 时,如果输入到 Stri 的时候,编辑器会为我找出所有包含 Stri 的代码关键词,这个时候,我们只要选中需要输入的关键字,它就会为我补充剩余的单词,这个就是代码提示功能,那么在Flutter 中如何实现这一功能呢?

2.RawAutocomplete

Flutter 为我们提供了这一个Widget, 在名字看来,是可以自动完成填充代码的Widget,我们来看看它的参数

类型

属性

介绍

AutocompleteOptionsViewBuilder<T>

optionsViewBuilder

构建选项框视图

AutocompleteOptionToString<T>

displayStringForOption

默认是(T)t.toString() , 取T的其中一个字段显示

AutocompleteOptionsBuilder<T>

optionsBuilder

查找符合的提示选项

AutocompleteFieldViewBuilder?

fieldViewBuilder

构建输入框视图

FocusNode?

focusNode

控制输入框焦点

AutocompleteOnSelected<T>?

onSelected

当选中选项时,会调用

3.示例代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  List<String> options = [
    'int',
    'double',
    'String',
    'num',
    'void',
    'extends',
    'class',
    'Widget',
    'StatefulWidget',
    'StatelessWidget',
    'abstract',
    'BuildContext',
  ];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RawAutocomplete<String>(
        onSelected: (s) {
          print('$s');
        },
        optionsViewBuilder: (
          BuildContext context,
          AutocompleteOnSelected<String> onSelected,
          Iterable<String> options,
        ) {
          return Align(
            alignment: Alignment.topLeft,
            child: Material(
              elevation: 0.0,
              child: Container(
                color: Theme.of(context).cardColor,
                constraints: BoxConstraints(maxHeight: 360),
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    String text = options.elementAt(index);
                    return ListTile(
                      onTap: () {
                        onSelected.call(text);
                      },
                      title: Text(text),
                    );
                  },
                  itemCount: options.length,
                ),
              ),
            ),
          );
        },
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text.isEmpty) return [];
          String text = textEditingValue.text;
          if (text.contains(' ')) {
            text = text.split(' ').last;
          }
          return options
              .where((element) => RegExp('(.*)$text(.*)', caseSensitive: false)
                  .hasMatch(element))
              .toList();
        },
        fieldViewBuilder: (BuildContext context,
            TextEditingController textEditingController,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted) {
          return TextFormField(
            controller: textEditingController,
            focusNode: focusNode,
            onFieldSubmitted: (String value) {
              onFieldSubmitted();
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

4.效果如下

image.png

5.更多内容

关于我的更多插件

  • r_router路由跳转,可实现路由拦截,路由注册,无Context 跳转、弹对话框
  • r_logger日志打印,突破控制台输出最大字数限制
  • r_upgrade应用升级,Android可实现通知栏下载进度,热更新,增量更新,跳转到应用商店,跳转网页功能,IOS实现跳转App Store,跳转网页
  • r_scan 二维码/条形码扫码,可自定义扫码窗口
  • r_calendar 可完全自定义的日历插件,支持多选,连选,单选,切换同步,周/月视图切换等功能
  • r_dotted_line_border 可简单实现虚线边框,直接在Container使用
  • r_album 实现简单同步相片到Android/IOS相册
  • fluct 通过命令行生成资源文件引用等

文章首次发布于:https://rhyme95.cn/archives/611.html

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Flutter Lesson 3:Flutter组件(widget)前篇
介绍完Flutter开发环境的搭建以及Dart基础语法,我们就可以着手进行开发了。一般我们开始学习一门技术或者是一门语言的时候,都会写一个Hello World的Demo。所以,撸起袖子开始干。不过在职之前,我们先来看看Flutter项目的默认文件以及目录结构。
踏浪
2019/07/31
9660
Flutter Lesson 3:Flutter组件(widget)前篇
小荷才露尖尖角,和Flutter应用说你好
当按钮点击,就调用这个函数,改变状态会使用setState方法,这个和React的类组件汇总改变状态的方式很像
用户6256742
2024/06/13
1450
Flutter中的状态管理
Flutter作为出自Google的一个跨平台(iOS,Android)应用开发方案。布局方式上和React或者说React Native非常相似——组件(Widget)化。写起来非常的高效,却有着React Native所不具有的优势: 一套代码到处运行,原生渲染,原生调用,不需要像RN需要桥接。
小刀c
2022/08/16
1.4K0
Flutter中的状态管理
【Flutter 工程】003-钩子函数:Flutter Hooks
Hooks 是 React 框架中引入的一项特性,用来分离状态逻辑和视图逻辑。如今,这个概念已经不仅限于 React,其他前端框架也在学习和借鉴。在 Flutter 开发中,业务逻辑和视图逻辑的耦合一直是一个比较突出的痛点,这也是各大前端框架常遇到的一个共性难题。为了解决这个问题,前端社区提出了许多方案,如MVP、MVVM、React 的Mixin、高阶组件(HOC),以及Hooks。在Flutter中,开发者可能对Mixin比较熟悉。但是,Mixin的应用也存在一定的局限性:
訾博ZiBo
2025/01/06
2730
【Flutter 工程】003-钩子函数:Flutter Hooks
动手编写你的第一个 Flutter 应用
我将带领大家尝试编写一个 Flutter 应用,感受一下 Flutter 开发的语法特点和运行效率。
CSDN技术头条
2020/02/26
1.1K0
推荐一种简单的在Flutter中分离View与Model的方法
我们在做Flutter开发的时候主要会在State中加入很多自己的业务逻辑,例如网络请求,数据处理等等,如果你的业务逻辑比较复杂的话会面对着一个越来越膨胀的State。代码的可读性下降,日后维护也越来越困难。这和我们在开发Android的时候遇到巨无霸Activity是同样的问题。解决办法就是分层解耦。Android从MVC进化到MVP/MVVM。Flutter 也有开发者把MVP引入到Flutter来解决这个问题。这里我们来看另一种比较简单的方法。
HowHardCanItBe
2020/09/15
1.6K0
「 flutter 必知必会 」详细解析数据共享 InheritedWidget 完整使用
「 flutter 必知必会 」贴心解析:状态管理与数据共享 InheritedWidget 完整使用方案,为你铺平大前端学习之路
圆号本昊
2021/09/24
8460
「 flutter 必知必会 」详细解析数据共享 InheritedWidget 完整使用
01-HelloFlutter
https://gitee.com/andli/hello-flutter.git
专注APP开发
2019/11/07
4110
[- Flutter 数据&状态篇 -] InheritedWidget
一个界面是由众多组件拼组而成。经常需要将一个组件进行封装,但此时有一个问题,如何让多个组件去共享一些值。 比如下面在一个_State中使用了WidgetA组件,传入_incrementCount
张风捷特烈
2020/04/30
3880
[- Flutter 数据&状态篇 -]  InheritedWidget
flutter系列之:widgets,构成flutter的基石
flutter中所有的组件都是由widgets组成的,flutter中有各种各样的widgets,这些widgets构成了flutter这个大厦。
程序那些事
2022/08/18
7660
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
Flutter 开发中 , 组件可以是一个 Button 按钮 , Text 文本 , 也可以是封装好的一大块区域 ; 组件由 Widget 组成 ;
韩曙亮
2023/03/29
2.1K0
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
在 image_picker 插件主页 有关于该 Flutter 插件如何使用的代码示例 ;
韩曙亮
2023/03/29
1.1K0
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
Flutter入门三部曲(2) - 界面开发基础
上一节我们熟悉了初始化后的flutter的界面。这一节,我们就来重点了解一下这部分的内容。
deep_sadness
2018/08/17
2.8K0
Flutter入门三部曲(2) - 界面开发基础
Flutter的两种本地存储方式之 SharedPreferences(1)
缓存少量的键值对信息(比如记录用户是否阅读了公告,或是简单的计数),可以使用 SharedPreferences。
徐建国
2021/08/06
1.4K0
Flutter AppBar入门使用
实现效果图 [1240] 主要代码 class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: new Icon(Icons.arrow_back_ios), title: new Text(widget.title),
易寒
2022/01/15
5940
Riverpod - flutter 状态管理的应用
Riverpod 是 Flutter 下知名度较高的状态管理依赖,同样出自 Provider 的开发者 rrousselGit 之手。
xcsoft
2024/07/31
4181
flutter基础布局代码
骨灰级别的基础代码,只是做个简单的记录,方便以后看 都是用dart写的,都在flutter项目下的lib文件夹下 import 'package:flutter/material.dart'; import './tomFont.dart'; void main() { runApp( MaterialApp( theme: ThemeData( primarySwatch: Colors.yellow, ), home: Scaffold(
Tom2Code
2023/02/14
7680
flutter基础布局代码
原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统中Flutter的魅力!
通过Android Studio创建的Flutter应用模板,了解Flutter项目结构,分析Flutter工程与原生Android和iOS工程有哪些联系,体验一个有着基本功能的Flutter应用是如何运转的,从而加深你对构建Flutter应用的关键概念和技术的理解。
JavaEdge
2023/07/09
7540
原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统中Flutter的魅力!
[ - Flutter 状态篇 redux - ] StoreConnector还是StoreBuilder,让distinct把好关
张风捷特烈
2023/09/01
2650
[ - Flutter 状态篇 redux - ] StoreConnector还是StoreBuilder,让distinct把好关
Flutter的两种本地存储方式之数据库(2)
如果需要持久化大量格式化后的数据,并且这些数据还会以较高的频率更新,为了考虑进一步的扩展性,通常会选用 sqlite 数据库来应对这样的场景。
徐建国
2021/08/06
2.1K0
推荐阅读
相关推荐
Flutter Lesson 3:Flutter组件(widget)前篇
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档