常用操作

Flutter/Dart List去重, 去除重复列表项

Monday, Jul 20, 2020

有时我们需要过滤掉重复的列表项, 本篇文章就来介绍下Flutter/Dart 如何进行 List去重, 去除重复列表项. 实战开始 方法一: List与Set互转 基于Set集合的不可重复特性, 我们利用该特性可轻松解决: void main() { // 声明一个集合 var ids = [1, 1, 4, 4, 5, 6, 6]; // 进行去重, 存储去重后的集合 var distinctIds = ids.toSet().toList(); } 当然, 基于该思路还有更牛逼的写法: var distinctIds = [...{...ids}]; [epcl_box type=“success”]这也许是最优雅的解决方案.[/epcl_box] 方法二: List与Set互转(保留顺序) 方案一虽然优雅, 但也不是完美的. 它无法保留顺序. 如果我们的需求对顺序有绝对的要求时, 就需要以下方法了: import 'dart:collection'; void main() { // 声明一个集合 List arr = ["a", "a", "b", "c", "b", "d"]; // 进行去重, 存储去重后的集合 List result = LinkedHashSet.

Flutter 指定TextField输入框(文本框)初始值(初始文字)

Thursday, Jul 2, 2020

输入框也许是最常用的表单项了. 添加数据时我们直接使用空的输入框就可以了. 编辑的时候, 我们需要把旧的数据预先放在输入框内. 那么如何为其指定初始值呢? 本篇文章就来记录下Flutter如何指定TextField输入框(文本框)初始值(初始文字). 效果 有图有真相, 先来看一下我们的最终效果: [epcl_box type=“information”]老规矩. 速度快的同学直接看下方的核心代码![/epcl_box] 应用场景 编辑数据使用的输入框 输入框提供默认数据 实战开始 方法一: TextField 创建一个dart文件, 内容为以下代码: `import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: '为输入框提供初始值'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.

Flutter根据屏幕尺寸(宽度/高度)的百分比设定元素(小部件/组件/Widget)尺寸

Tuesday, Jun 30, 2020

最让前端开发人员头疼的问题之一就是屏幕尺寸兼容性问题了. Web端开发人员经常会对测试人员说: “换个浏览器试一下”.😂 虽然现在的主流的屏幕大小非常相似, 但是我们也要事先处理好. 本篇文章就来记录Flutter如何根据屏幕尺寸(宽度/高度)的百分比设定元素(小部件/组件/Widget)尺寸. 效果 有图有真相, 先来看一下效果: 需具备的条件 你掌握Flutter基础. 你了解基础的Flutter布局. 本篇文章的开发环境: [epcl_box type=“information”]老规矩, 速度快的同学直接看最下方的核心代码![/epcl_box] 实战开始 准备工作 创建一个Flutter项目, 替换main.dart为: `import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: '屏幕百分比设定元素尺寸'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.

Flutter 隐藏/显示某widget组件、切换显示状态

Thursday, Jun 25, 2020

在进行Flutter开发时, 我们需要对某个widget进行显示与隐藏状态的切换. 这个需求还是蛮常见的. 本篇文章就来记录下Flutter如何隐藏/显示某widget组件、切换显示状态. 效果 有图有真相, 先来看下我们要实现的最终效果: 隐藏Widget 隐藏且不影响布局 需具备的条件 你已经掌握Flutter基础 本篇文章环境: [epcl_box type=“information”]老规矩, 速度快的同学直接去看核心代码![/epcl_box] 实战开始 准备工作 创建一个Flutter项目, 替换文件./lib/main.dart为: `import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Show Hide widget', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Show & Hide Widget'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { // 存储"是否显示"状态 bool _isShow = true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.

Flutter 隐藏/移除导航栏的默认返回按钮

Friday, Jun 19, 2020

在实际项目开发中, 我们在进行页面跳转时, 偶尔会跳到不可返回的页面(比如退出登录后). 本篇文章就来记录下 Flutter 如何隐藏/移除导航栏的默认返回按钮. 效果 有图有真相, 先来看下实际效果: 应用场景 移除导航栏的默认返回按钮适用于: 退出登录后禁止返回 跳转至一个全新的页面, 不可返回 禁止返回的任何页面 需具备的条件 掌握Flutter基础 掌握Flutter页面跳转的基本操作 本篇文章的环境: 环境 版本 Flutter 1.19.0-2.0.pre 实战开始 准备工作 创建新文件./lib/main.dart(或者其他你想要的文件名): import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Remove back button', home: FirstPage(), ); } } class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("First Page"), ), body: Center( child: RaisedButton( child: Text("跳转到下一页"), onPressed: () { Navigator.

Flutter 禁用按钮/禁止按钮点击

Tuesday, Jun 16, 2020

某些情况下我们需要禁用某个按钮的点击事件. 通过灵活的按钮禁止状态切换可以实现很多实际需求. 本篇文章就来记录下Flutter如何禁用按钮以及禁止按钮点击. 效果 有图有真相, 先来看下我们的最终效果: 应用场景 用户权限不足, 禁止某些按钮点击. 用户表单未填完, 禁止下一步. 用户阅读相关条款至少X秒, 倒数结束前锁定按钮. 需具备的条件 你了解Flutter基础 本篇文章的环境: 环境 版本 Windows 10 Android Studio 3.5 Flutter 1.19.0-2.0.pre 实战开始 准备工作 创建一个空项目. 删除./test目录. 替换./lib/main.dart为: import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Disable Button', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Disable Button'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.

Flutter为widget添加border边框、下划线

Monday, Jun 15, 2020

有时我们需要为Flutter的widget小部件添加各式各样的边框. 但是并不是所有widget都提供了边框的属性, 本篇文章就来记录下如何为Flutter 的 widget 添加border边框、下划线. 效果 有图有真相, 先来看下我们要实现的最终效果: 需具备的条件 你已经掌握Flutter基础 本篇文章的开发环境: 环境 版本 操作系统 Windows 10 Flutter 1.19.0-2.0.pre IDE Android Studio 3.5 [epcl_box type=“information”]速度快的同学直接复制下方的"全部源码"自行研究! 稳一点的同学请按照教程一步一步来! [/epcl_box] 实战开始 创建项目&清理代码 为了便于演示, 阿航在这里创建一个空项目. 创建完成后, 删除./test目录. 因为我们的demo无需测试类. 替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Awesome Border', theme: ThemeData(primarySwatch: Colors.blue), home: MyHomePage(title: 'My Awesome Border'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.

Flutter Clipboard 剪贴板操作: 复制到剪贴板 / 从剪贴板中获取

Saturday, May 30, 2020

我们在使用Flutter进行开发时, 有时会使用类似"复制本段文字"的功能. 为了提升用户体验, 我们不希望用户长按文字, 再自行复制, 我们希望提供一个按钮直接点击复制, 甚至自动复制! 反之从剪贴板获取也一样. 效果 有图有真相, 不说废话, 直接展示最终效果: 复制到剪贴板 从剪贴板获取(粘贴) [epcl_box type=“information”]如果你了解阿航的技术小站, 应该会知悉每篇文章都会提供相当详细且完整的源码. [/epcl_box] 应用场景 复制到剪贴板 生成了运单号, 需要用户进行保存; 某些微商APP需要复制文案, 发布朋友圈; 文学类APP中, 发现一段非常好的句子, 想发给好友. 从剪贴板中获取 直接填入用户复制的短信验证码. 淘宝分享的东西, 复制后打开淘宝APP. [epcl_box type=“information”]当然, 以上只是举了几种例子, 还有更多可以提升用户操作体验的实例在此不过多举例了, 直接开始.[/epcl_box] 实战开始 初始化Flutter项目 创建Flutter项目, 清理一下./lib/main.dart: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter剪贴板操作', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter剪贴板操作'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.