
flutter
小小苏的小小苏
变帅程序员
展开
-
Flutter 路由跳转和传值
首先新建两个路由方式一:pushNavigator.push(context, MaterialPageRoute(builder: (context) { return SecondApp(); }));void main() => runApp(MainApp());class MainApp extends StatefulWidget { @override State<StatefulWidget&...原创 2020-10-12 13:04:08 · 1861 阅读 · 1 评论 -
Flutter组件学习(22)导航返回拦截(WillPopScope)
简介Flutter中可以通过WillPopScope来实现返回按钮拦截onWillPop是一个WillPopScope的回调函数,当用户点击返回按钮时被调用WillPopScope必须包含child,否则会报错实现双击返退出APPimport 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:fluttertoast/fluttertoast.dart'原创 2020-06-28 13:26:22 · 1452 阅读 · 0 评论 -
Flutter常用方法
DateTime初始化DateTime time=DateTime.now();基础属性 time.year 当前年 time.month 当前月 time.day 当前日 time.hour 当前时 time.minute 当前分 time.second 当前秒 time.millisecond 当前毫秒 time.microsecond 当前微秒 time.milliseconds...原创 2020-06-19 18:17:30 · 738 阅读 · 0 评论 -
Flutter组件学习(21)实现app首页
Step 1:新建工程,添加导航栏import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main(){ runApp(MyApp());}class MyApp extends StatefulWidget{ @override State<StatefulWidget> createState() { return AppWidget();原创 2020-06-18 15:58:18 · 630 阅读 · 0 评论 -
Flutter组件学习(20)可滚动组件以及ScrollController监听
介绍ScrollController间接继承自Listenable,我们可以根据ScrollController来监听滚动事件,可以用ScrollController来控制可滚动组件的滚动位置offset 可滚动组件 当前的滚动位置 jumpTo animateTo 跳转到指定的位置, 它们不同之处在于,后者在跳转时会执行一个动画,而前者不会 dispose 为了避免内存泄露,需要调用 controller.dispos原创 2020-06-18 11:38:43 · 8294 阅读 · 0 评论 -
Flutter组件学习(19)GridView
介绍GridView和ListView的大多数参数都是相同的,它们的含义也都相同,唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout)Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtentSliverGridDele原创 2020-06-11 18:03:25 · 2361 阅读 · 0 评论 -
Flutter组件学习(18)ListView
介绍itemExtent:该参数如果不为null,则会强制children的“长度”为itemExtent的值;这里的“长度”是指滚动方向上子组件的长度,也就是说如果滚动方向是垂直方向,则itemExtent代表子组件的高度;如果滚动方向为水平方向,则itemExtent就代表子组件的宽度。在ListView中,指定itemExtent比让子组件自己决定自身长度会更高效,这是因为指定itemExtent后,滚动系统可以提前知道列表的长度,而无需每次构建子组件时都去再计算一下,尤其是在滚动位置频繁变化时原创 2020-06-11 15:16:14 · 979 阅读 · 0 评论 -
Flutter组件学习(17)SingleChildScrollView
介绍ScrollbarScrollbar是一个Material风格的滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需将Scrollbar作为可滚动组件的任意一个父级组件即可,如:Scrollbar( child: SingleChildScrollView( ... ),);CupertinoScrollbarCupertinoScrollbar是iOS风格的滚动条,如果你使用的是Scrollbar,那么在iOS平台它会自动切换为CupertinoScr原创 2020-06-11 13:42:10 · 5754 阅读 · 0 评论 -
Flutter实现商品列表图文混排
效果如图代码import 'dart:io';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Mater.原创 2020-06-11 11:08:26 · 1731 阅读 · 0 评论 -
Flutter组件学习(16)Clip
介绍Flutter中提供了一些剪裁函数,用于对组件进行剪裁。剪裁Widget 作用 ClipOval 子组件为正方形时剪裁为内贴圆形,为矩形时,剪裁为内贴椭圆 ClipRRect 将子组件剪裁为圆角矩形 ClipRect 剪裁子组件到实际占用的矩形大小(溢出部分剪裁) CustomClipper 剪裁子组件的特定区域 Demoimport 'package:flutter/cupertino.dart';impor..原创 2020-06-10 15:20:06 · 276 阅读 · 0 评论 -
Flutter组件学习(15)常用容器类组件
PaddingEdgeInsets我们看看EdgeInsets提供的便捷方法:fromLTRB(double left, double top, double right, double bottom):分别指定四个方向的填充。 all(double value): 所有方向均使用相同数值的填充。 only({left, top, right ,bottom }):可以设置具体某个方向的填充(可以同时指定多个方向)。 symmetric({ vertical, horizontal }.翻译 2020-06-10 14:11:37 · 433 阅读 · 0 评论 -
Flutter组件学习(14)相对布局Align
原创 2020-06-10 10:54:26 · 552 阅读 · 0 评论 -
Flutter组件学习(13)层叠布局Stack、Positioned
介绍层叠布局和Web中的绝对定位、Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来(按照代码中声明的顺序) Stack alignment 决定如何去对齐没有定位(没有使用Positioned)或部分定位的子组件。 所谓部分定位,在这里特指没有在某一个轴上定位:left、right为横轴,top、bottom为纵轴, 只要包含某个轴上的一个定位属性就算在该轴上有定位原创 2020-06-10 10:50:09 · 522 阅读 · 0 评论 -
Flutter组件学习(12)流式布局
Wrap介绍spacing 水平方向设置各个控件的间距 runSpacing 纵向方向设置各个控件的间距 alignment 主轴(横轴水平)的对齐方式 runAlignment 纵轴方向的对齐方式 import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp ex原创 2020-06-09 16:45:32 · 244 阅读 · 0 评论 -
Flutter组件学习(11)弹性布局Flex
介绍弹性布局允许子组件按照一定比例来分配父容器空间,Flex组件可以沿着水平或垂直方向排列子组件 Expanded 可以按比例“扩伸” direction Axis.horizontal设置横向或者vertical纵向 flex flex: 1占比1flex: 2占比2 demoimport 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';..原创 2020-06-09 14:41:50 · 304 阅读 · 0 评论 -
Flutter组件学习(10)线性布局
Row和Column基础属性 Row和Column属性基本上一样,只是方向上不同 textDirection 水平方向子组件的布局顺序(是从左往右还是从右往左) mainAxisSize 水平方向占用的空间,默认是MainAxisSize.max,表示尽可能多的占用水平方向的空间, 此时无论子widgets实际占用多少水平空间,Row的宽度始终等于水平方向的最大宽度; 而MainAxisSize.min表示尽可能少的占用水平空间,当子组件没有占原创 2020-06-09 13:58:58 · 258 阅读 · 0 评论 -
Flutter组件学习(9)进度条
介绍Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指示。精确进度通常用于任务进度可以计算和预估的情况,比如文件下载;而模糊进度则用户任务进度无法准确获得的情况,如下拉刷新,数据提交等。LinearProgressIndicator和CircularProgressIndicator常用属性value 表示当前的进度,取值范围为[原创 2020-06-09 11:35:29 · 1384 阅读 · 0 评论 -
Flutter组件学习(8)表单Form
Form介绍实际业务中,在正式向服务器提交数据前,都会对各个输入框数据进行合法性校验,但是对每一个TextField都分别进行校验将会是一件很麻烦的事。还有,如果用户想清除一组TextField的内容,除了一个一个清除有没有什么更好的办法呢?为此,Flutter提供了一个Form组件,它可以对输入框进行分组,然后进行一些统一操作,如输入内容校验、输入框重置以及输入内容保存。Form继承自StatefulWidget对象,它对应的状态类为FormStateautovalidate:是否自动校验.原创 2020-06-08 17:59:54 · 1026 阅读 · 0 评论 -
Flutter组件学习(6)单选按钮Switch和复选按钮Checkbox
介绍它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。当Switch或Checkbox被点击时,会触发它们的onChanged回调,我们可以在此回调中处理选中状态改变逻辑Checkbox的大小是固定的,无法自定义,而Switch只能定义宽度,高度也是固定的。值得一提的是Checkbox有一个属性tristate,表示是否为三态,其默认值为false,这时Checkbox有两种状态即“选中”和“不选中”,对应的value值为true和fal..原创 2020-06-04 18:52:24 · 993 阅读 · 0 评论 -
Flutter组件学习(5)按钮Button
介绍Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面统一介绍这些属性。另外,所有Material 库中的按钮都有如下相同点:按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。原创 2020-06-04 15:08:08 · 533 阅读 · 0 评论 -
Flutter组件学习(4)图片Image
介绍关于Flutter图片的加载有多种形式方法 释义 Image() 从ImageProvider中获取图片,从本质上看,下面的几个方法都是他的具体实现。 Image.asset(String name) 从AssetBundler中获取图片 Image.network(String src) 显示网络图片 Image.file(File file) 从File中获取图片 Image.memory(Uint8List bytes) 从U...原创 2020-06-03 17:27:49 · 1351 阅读 · 0 评论 -
Flutter组件学习(3)容器Container
介绍Container作为Flutter中的用来布局的Widget,可以对子widget进行绘制(painting)、定位(positioning)、调整大小(sizing)操作。常用属性 decoration: BoxDecoration( border: Border.all(width: 2.0,color: Colors.blue), color: Colors.yellow, ..原创 2020-06-03 13:14:42 · 307 阅读 · 0 评论 -
Flutter组件学习(2)文本控件Text
回顾上一篇0901博客里介绍了导航栏,要基于MaterialApp和Scaffold,并且在Scaffold父容器里添加了导航栏,接下来,还是基于Scaffold容器,添加body属性原创 2020-06-02 18:21:16 · 373 阅读 · 0 评论 -
Flutter组件学习(1)导航栏
初识Flutter工程页面我用的是windows电脑,所以目前基于Android studio开发,后期会介绍ios,工程搭建完成以后,我们先来认识一下目录结构这里主要介绍着两个文件,我们所有的代码都写在lib文件中,创建文件以dart结束,标志为flutter文件;其次下面的yaml文件是我们后期配置一些第三方库,或者资源文件的时候要用到,这里暂不做解释;程序入口当我们新建工程之后,会默认生成main.dart文件,main方法是全工程的入口,只有一个,为了更好的学习,我们删原创 2020-06-02 13:07:24 · 291 阅读 · 0 评论 -
Flutter入门-Dart知识点整理
目录基本概念Dart变量定义和数据类型Dart中的私有变量Dart基础语句表达式Dart三种集合常用方法介绍ListMapSet函数普通函数位置可选参数命名可选参数匿名函数方法作为参数传递箭头函数闭包类构造函数与命名构造函数抽象继承封装和多态接口mixinsmixins的概念mixins的应用基本概念在dart中,能够放在变量中的所有内容都是对象,每个对象都是一个类的实例。甚至于数字、函数和nu...原创 2020-05-06 13:59:36 · 686 阅读 · 1 评论