一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何时时得到输入框的值 二.快速创建自定义组件 vscode中使用快捷键stl快速生成一个无状态组件, class CreateMyInput extends StatelessWidget { @override Widget build(BuildContext context) { return Container( );

<style scoped lang="less"> .keyboard { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; user-select: none; font-size: 16p

------------恢复内容开始------------ Flutter - 自定义Dialog弹窗 应用场景:app系统版本升级弹窗,系统退出登录弹窗,首页广告弹窗,消息中心弹窗,删除文件弹窗等等各种应用场景中,我们开发中都会遇到此情形. 废话不多话,先看效果图如下:(以上场景中代码逻辑都差不多,源代码自行修改即可!!!)------这里仅展示退出登录场景 逻辑其实很简单,重写Dialog类即可. 逻辑代码如下: import 'package:flutter/material.dart'

前言 上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List的使用,我们先总结本地图片的引用.今天这篇文章的具体的UI效果如下: 引用本地图片 我们没有使用到的我们暂时先不提,等后面慢慢补充进去,比如说网络图片的显示等等,我们现总结一下关于本地图片的使用,具体的我们需要下面几步: 1.创建文件导入资源 Flutter的文件资源需要我们创建一个文件去管理,我们

drawRect的工作原理:首先苹果是不推荐我们直接使用drawRect进行工作的,直接调用他也是没有任何效果的.苹果要求我们调用UIView类中的setNeedsDisplay方法,则程序会自动调用drawRect方法进行重绘.(调用setNeedsDisplay会自动调用drawRect). 在UIView中,重写drawRect: (CGRect) aRect方法,可以自己定义想要画的图案.且此方法一般情况下只会画一次.也就是说这个drawRect方法一般情况下只会被调用一次.当某些情况下

1. 定义local_srorage.dart文件 使用Flutter第三方插件shared_preferences实现存储键值对信息 相关shared_preferences插件可参考: flutter 本地存储 (shared_preferences) import 'dart:convert'; import 'package:shared_preferences/shared_preferences.dart'; class LocalStorage { static Future ge

自定义路由翻转,渐变,左右滑动 方法如下: 首先继承 PageRouteBuilder ,重写方法 将MaterialPageRoute改为showSearch import 'package:flutter/material.dart'; class animation_route extends PageRouteBuilder { final Widget widget; animation_route(this.widget) : super( transitionDuration: c

TextFiled组件的API 先来看一下TextFiled的构造方法: const TextField({ Key key, this.controller, this.focusNode, this.decoration = const InputDecoration(), TextInputType keyboardType, this.textInputAction, this.textCapitalization = TextCapitalization.none, this.styl

开始 在Android中我们要实现一个布局需要继承ViewGroup, 重写其中的onLayout和onMeasure方法. 其中onLayout负责给子控件设置布局区域, onMeaseure度量子控件大小和自身大小. 今天我们就研究下Flutter是如何实现布局的. Flutter布局 首先我们挑选一个Flutter控件去看源码, 我们就选Stack, 因为它足够简单. 从表象上讲它只要重叠摆放一组子控件即可. 先看下Stack的源码: class Stack extends MultiCh

App在很多情况下由于各种需求需要自定义标题栏,而在能够构建Android和IOS应用的Flutter中,如果不在Scaffold中使用AppBar会发现默认是沉浸式. 猜想:我们使用自定义标题栏好像需要知道状态栏的高度,我看到网上很多人想要自定义标题栏,却老是去找怎么获取状态栏的高度 解惑:其实并不用获取状态栏的高度,你想AppBar也是状态栏,它也需要知道状态栏的高度,它需要说明Flutter已经帮我们获取到了 接下来一步一步来看 一.怎么自定义标题栏 轻车熟路的就直接看第二步 自定义MAp

MyDialog.dart import 'dart:async'; import 'package:flutter/material.dart'; class MyDialog extends Dialog { String title; String content; MyDialog({this.title="",this.content=""}); _showTimer(context){ var timer; timer=Timer.periodic( D

Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. title:标题,通常显示为当前界面的标题文字,可以放组件 actions:通常使用IconButton来表示,可以放按钮组 bottom:通常放tabBar,标题下面显示一个Tab导航栏 backgroundColor:导航背景颜色 iconTheme:图标样式 textTheme:文字样式 cen

在 Flutter 中自定义 View 有两种方式: 组合已有控件 自定义绘制 如何自定义绘制 有两个类做这件事情: CustomPaint :会在绘制阶段提供一个 Canvas 画布 CustomPainter : 具体的画笔, 可配置画笔的颜色,路径等 CustomPaint( painter: Sky(), child: Center( child: Text( 'Once upon a time...', style: const TextStyle( fontSize: 40.0, f

CustomPainter Flutter 中实现绘制的主要是CustomPainter类. 我们一般继承这个类,来使用它: class MyPainter extends CustomPainter{ @override void paint(Canvas canvas, Size size) { } @override bool shouldRepaint(CustomPainter oldDelegate) { return null; } }复制代码 然后放在父控件的child里用Cus

flutter 自带的tabbar BottomNavigationBar有长按水波纹效果,不可以添加背景图片功能,如果有这方面的需求,就需要自定义tabbar了 自定义图片 我们使用BottomAppBar 设定宽高,内部的UI就可以完全自定义 测试了一下,基本能达到想要的效果 废话不多了,直接上代码了 import 'package:flutter/material.dart'; import 'home.dart'; import 'category.dart'; import 'acti

画布canvas 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像的方法,结合这些方法我们可以绘制出千变万化的画面. 虽然,画布可以画这些东西,但是决定这些图形颜色.粗细表现的还是画笔.画笔Paint Paint非常好理解,就是我们用来画图形的工具,我们可以设置画笔的颜色.粗细.是否抗锯齿.笔触形状以及作画风格. 通过这些属性我们可以很方便的来定制自己的UI效果,当然我们在“作画”的过程中可以定义多个画笔,这样更方便

以前搞ionic1~4的开发中 和react-native   flutter中的机制完全不同, 在flutter 中 当前页面如果存在元素被软键盘挡住 的情况 页面元素的最外层肯定得嵌套一层   SingleChildScrollView body: Container( //SingleChildScrollView 的父级元素得有高度 最外层Container默认 填充全部 child: SingleChildScrollView( ........ ) ) SingleChildScro

这里有个工作示例 import 'dart:async'; import 'package:flutter/material.dart'; import 'package:rxdart/subjects.dart'; double ourMap(v, start1, stop1, start2, stop2) { return (v - start1) / (stop1 - start1) * (stop2 - start2) + start2; } void main() => runApp(

UIAlertController极大的灵活性意味着您不必拘泥于内置样式.以前我们只能在默认视图.文本框视图.密码框视图.登录和密码输入框视图中选择,现在我们可以向对话框中添加任意数目的UITextField对象,并且可以使用所有的UITextField特性.当向对话框控制器中添加文本框时,需要指定一个用来配置文本框的代码块. UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"文本

UIAlertController极大的灵活性意味着您不必拘泥于内置样式.以前我们只能在默认视图.文本框视图.密码框视图.登录和密码输入框视图中选择,现在我们可以向对话框中添加任意数目的UITextField对象,并且可以使用所有的UITextField特性.当向对话框控制器中添加文本框时,需要指定一个用来配置文本框的代码块. UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"文本