Flutter
青蛙不吃草~
这个作者很懒,什么都没留下…
展开
-
flutter加入到现有iOS项目
1、创建 Flutter module在桌面创建project目录cd /Users/imac/Desktop/projectflutter create --template module my_flutter2、将iOS项目(CureFunNew)放入my_flutter同一级目录iOS项目(MyApp)放入后project目录结构/Users/imac/Desktop/project/├── my_flutter/│ └── .ios/│ └── Flutter/原创 2020-11-30 16:27:34 · 306 阅读 · 0 评论 -
Flutter: 单例
单例一般有这几个特征:隐藏类的构造函数提供一个方法获取该类的实例该实例只能被创建一次,内存中独一份,任何地方通过调用特征2中所述方法获取到的实例都应该是同一个实现单例class BluetoothWidgetIos { //通过私有的具造方法_internal()隐藏了构造方法 BluetoothWidgetIos._internal() { init(); } // static final修饰了_singleton,_singleton会在编译期被初始化,保证原创 2020-08-31 11:21:28 · 1362 阅读 · 0 评论 -
Flutter填坑
设置导航栏颜色透明需要同时设置Colors.transparent和elevationappBar: AppBar( backgroundColor: Colors.transparent, elevation: 0,//设置导航栏颜色透明),原创 2020-08-18 19:58:31 · 2361 阅读 · 0 评论 -
Flutter状态管理:StreamBuilder局部刷新
注册监听器///TODO1 初始化一个StreamController<可以是 int string... 一般是model> 监听器 final StreamController _streamController = StreamController();添加通知对象,并关联监听器材Container: StreamBuilder( stream: _streamController.stream, initialData: 1.0,原创 2020-08-13 19:32:06 · 740 阅读 · 0 评论 -
Flutter状态管理:Provider使用之ChangeNotifierProvider
Top1倒入provider库dependencies: flutter: sdk: flutter provider: ^4.3.1Top2注册通知:定义一个ChangeNotifier,管理需要监听状态的数据模型。///1:定义一个ChangeNotifier,来负责数据的变化通知class TextValueAvaliableNotifier extends ChangeNotifier { bool _textValueAvaliable1 = false原创 2020-08-11 16:21:46 · 5885 阅读 · 0 评论 -
Flutter线程
事件循环Isolate事件循环Isolate可以把它理解为Dart中的线程。但它又不同于线程,更恰当的说应该是微线程,或者说是协程。它与线程最大的区别就是不能共享内存,因此也不存在锁竞争问题,两个Isolate完全是两条独立的执行线,且每个Isolate都有自己的事件循环,它们之间只能通过发送消息通信,所以它的资源开销低于线程。Flutter 程序由一个或多个 isolate 组成。我们的代码默认都在 Main isolate中执行.。每个 isolate 中有一个Looper,但存在两个Queue:原创 2020-07-27 15:39:08 · 1067 阅读 · 0 评论 -
Flutter生命周期
生命周期Widget 的生命周期StatelessWidget 的生命周期StatefulWidget 的生命周期App 的生命周期Flutter 的生命周期分为两个部分:Widget 的生命周期App 的生命周期Widget 的生命周期Flutter 里的 Widget 分为 StatelessWidget 和 StatefulWidget 两种,这两种 Widget 的生命周期是不一样的,我们接下来具体来看。StatelessWidget 的生命周期StatelessWidget 的生原创 2020-07-27 16:31:17 · 203 阅读 · 0 评论 -
Flutter系统概述
框架图整个Flutter系统由三部分组成,由上至下依次为:Framwork(动态库),Engine(渲染引擎),Embedder(嵌入层)。Framwork(动态库)Framework 层全部使用Dart 编写,它实现了一套基础库,用于处理动画、绘图和手势,并且封装了一套UI组件库,并预写了Android(MaterialDesign)和 iOS的(Cupertino)风格的UI,这个纯Dart实现的SDK被封装为了一个叫作dart:ui的Dart库,极大方便了开发移动端。Material封原创 2020-07-26 19:39:46 · 304 阅读 · 0 评论 -
Flutter : TabBar ,TabBarView 实现标签导航栏
属性const TabBar({ Key key, @required this.tabs, // 顶部标签 Tab 组件列表 this.controller, // 顶部标签 Tab 控制器 this.isScrollable = false, // 标签 Tab 是否可滑动 this.indicatorColor, // 底部指示器颜色 this.indicatorWei原创 2020-08-22 11:02:27 · 479 阅读 · 0 评论 -
Flutter导航:Navigator&router
NavigatorNavigatorflutter中的默认导航分成两种,一种是命名的路由,一种是构建路由。构建路由Push到下一个界面(不带参数),并接收返回数据Pop回上一个界面并返回参数push下个界面(带参数)命名路由简单使用界面跳转传参命名路由封装创建路由管理类(app_routes.dart)初始化路由并跳转子界面,不传参数(main.dart)初始化路由并跳转子界面,传参数并返回值给父试图(secondPage.dart)接收父界面传递参数(threePage.dart)遇到的坑路由(Rou原创 2020-07-30 17:52:15 · 788 阅读 · 0 评论 -
Flutter布局:Stack、IndexedStack、GridView
这里写目录标题Stack(堆叠布局)属性IndexedStackGridView属性Stack(堆叠布局)可以允许其子widget简单的堆叠在一起属性 Stack({ Key key, this.alignment = AlignmentDirectional.topStart,//对齐方式 this.textDirection,//文本的方向 this.fit = StackFit.loose,//定义如何设置non-positioned节点尺寸,默认为loo原创 2020-08-01 16:37:09 · 305 阅读 · 0 评论 -
Flutter 布局: SizedOverflowBox、Transform、CustomSingleChildLayout
这里写目录标题SizedOverflowBox(控制大小和超出父view的盒子布局)-属性Transform(矩阵变换布局)CustomSingleChildLayoutSizedOverflowBox(控制大小和超出父view的盒子布局)SizedOverflowBox主要的布局行为有两点:尺寸部分。通过将自身的固定尺寸,传递给child,来达到控制child尺寸的目的;超出部分。可以突破父节点尺寸的限制,超出部分也可以被渲染显示,与OverflowBox类似。-属性const Sized原创 2020-08-01 14:40:47 · 413 阅读 · 0 评论 -
Flutter布局:LimitedBox、Offstage、OverflowBox、SizedBox
这里写目录标题LimitedBox(限定宽高布局)属性例子1例子2Offstage(显示隐藏布局)OverflowBox(溢出父view布局)属性SizedBox属性LimitedBox(限定宽高布局)LimitedBox是将child限制在其设定的最大宽高中的,但是这个限定是有条件的。当LimitedBox最大宽度不受限制时,child的宽度就会受到这个最大宽度的限制,同理高度。属性 const LimitedBox({ Key key, this.maxWidth = do原创 2020-07-31 17:50:50 · 699 阅读 · 0 评论 -
Flutter布局:Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth
这里写目录标题Baseline(基准线布局)属性FractionallySizedBox属性IntrinsicHeight(固定高度)IntrinsicWidth(固定宽度)属性Baseline(基准线布局)Baseline基准线是指将所有的元素都统一的放在一条水平线上。Baseline是根据child的baseline定位的child的小部件,即使在不同的child都处在规定的基准线位置,特别是多用文字排版中的时候,就算是不同大小的文字处于同一水平线上。文字排版中的baseline属性原创 2020-07-31 17:21:57 · 547 阅读 · 0 评论 -
Flutter布局:Padding、Align、Center、FittedBox、AspectRatio、ConstrainedBox、UnconstrainedBox
目录Padding(填充布局)Align(对齐布局)属性Center(居中布局)Padding(填充布局)一个widget, 会给其子widget添加指定的填充Padding的布局分为两种情况:当child为空的时候,view会无限大当child不为空的时候,Padding会将布局约束传递给child,根据设置的padding属性,缩小child的布局尺寸。然后Padding将自己调整到child设置了padding属性的尺寸,在child周围创建空白区域。import 'package:原创 2020-07-31 14:42:37 · 380 阅读 · 0 评论 -
Flutter :实现一个AlertView
效果如下代码import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:trade_app/base/baseColor.dart';import 'package:trade_app/base/baseSize.dart';import 'package:trade_app/base/原创 2020-08-21 15:17:24 · 635 阅读 · 0 评论 -
Flutter :拖拽排序 ReorderableListView
ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。使用:下面实现功能为:头部“新增收藏夹”不动,下面cell可以拖拽排序import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:trade_app/base/baseColor.dart';import 'package:trade_app/base/baseSize.d.原创 2020-08-20 15:15:34 · 2654 阅读 · 1 评论 -
Flutter: 自定义搜索框
效果实现方式import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:keduo/base/baseSize.dart';import 'package:keduo/utils/icon_utils.dart';class SearchBarWidget extends StatefulWidget { final ValueChanged<String> onch原创 2020-09-15 14:53:09 · 1850 阅读 · 1 评论 -
Flutter :添加点击事件
flutter中有三中方式添加点击事件InkWell InkWell( child: buildButtonColum(Icons.call, 'CALL'), onTap:(){ print('单击'); }, onDoubleTap: () { // 双击 }, onLongPress: () { // 长按 }),GestureDetector _onCli.原创 2020-08-19 14:51:06 · 3429 阅读 · 1 评论 -
Flutter基础控件:CustomScrollView
CustomScrollView属性属性 const CustomScrollView({ Key key, Axis scrollDirection = Axis.vertical,//滚动方向 vertical垂直滚动 bool reverse = false,//滚动开始方向,false从头开始滚动,true从尾开始滚动 ScrollController controller,//控制器 bool primary,// ScrollPhysics原创 2020-07-29 17:23:40 · 999 阅读 · 0 评论 -
Flutter基础控件:ListView、ListTile、Scrollbar
ListView属性scrollDirectionreversecontrollerprimaryphysicsshrinkWrappaddingitemExtentaddAutomaticKeepAlivesaddRepaintBoundariesaddSemanticIndexescacheExtentchildrensemanticChildCountdragStartBehavior方法ListTile属性scrollDirection滑动的方向。默认Axis.vertical为垂直方向滑动原创 2020-07-29 14:53:51 · 1066 阅读 · 0 评论 -
Flutter基础控件:TabBar、TabBarView
TabBar、TabBarViewTabBar属性TabBar属性const TabBar({ Key key, @required this.tabs,//必须实现的,设置需要展示的tabs,最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动,true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的原创 2020-07-29 11:55:54 · 2159 阅读 · 0 评论 -
Flutter基础控件:BottomNavigationBar
BottomNavigationBar属性onTapcurrentIndexelevationtypefixedColorbackgroundColoriconSizeselectedItemColorunselectedItemColorselectedIconThemeunselectedIconThemeselectedFontSizeunselectedFontSizeselectedLabelStyleunselectedLabelStyleshowSelectedLabelsshowUnsele原创 2020-07-27 18:03:34 · 208 阅读 · 0 评论 -
Flutter基础控件:TextField
TextFieldTextField属性controllerfocusNodedecorationkeyboardTypetextInputActionstylestrutStyletextAligntextAlignVerticaltextDirectionreadOnlytoolbarOptionsshowCursorautofocusobscureTextautocorrectenableSuggestionsmaxLinesminLinesexpandsmaxLengthmaxLengthEnfor原创 2020-07-25 18:23:04 · 996 阅读 · 0 评论 -
动态创建TextField
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:trade_app/base/baseColor.dart';import 'package:trade_app/base/baseSize.dart';import 'package:trade_app/base/baseTextS原创 2020-08-12 17:09:27 · 413 阅读 · 0 评论 -
Flutter基础控件:Appbar
@TOCAppbar类似iOS导航栏,但有一定区别Appbar属性leading在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮。automaticallyImplyLeading如果没有leading,automaticallyImplyLeading为true,就会默认返回箭头如果 没有leading 且为false,空间留给title如果有leading,这个参数就无效了title标题actions导航栏右侧按钮数组fle原创 2020-07-25 16:40:39 · 407 阅读 · 0 评论 -
Flutter基础控件:Scaffold
@TOCScaffoldScaffold属性appBar导航栏appBar: new AppBar( title: new Text('welcome to flutter'), leading: new Icon(Icons.home), actions: <Widget>[ new IconButton( icon: new Icon(Icons.add_alarm原创 2020-07-25 16:02:48 · 702 阅读 · 0 评论 -
Flutter基础控件:RaisedButton、 MaterialButton、 FloatingActionButton
@TOCRaisedButtonMaterial Design中的button, 一个凸起的材质矩形按钮属性onPressed点击事件。如果传递了 null 值,整个按钮是不可点击的,disabled 状态onLongPress长按事件onHighlightChanged水波纹高亮变化回调,按下返回true,抬起返回falsetextTheme按钮的主题enum ButtonTextTheme {/// Button text is black or white dep原创 2020-07-25 11:30:13 · 680 阅读 · 0 评论 -
Flutter基础控件:Text
@TOCText单一格式文本属性style文本样式,类型是TextStylestrutStyleStrut是一项允许设置最小线高的功能。 效果就像该段落的每一行的开头都包含一个零宽度的空间。textAlign文本的对齐方式,类型是TextAligncenter: 文本居中对齐left: 文本左对齐right: 文本右对齐start: 文本开始位置对齐,类似左对齐end: 文本结束位置对齐,类似右对齐justify: 文本两端对齐textDirection文本方向原创 2020-07-24 18:12:52 · 275 阅读 · 0 评论 -
Flutter基础控件:Image Icon
@TOCImage一个显示图片的widget构造方法new Image,用于从ImageProvider获得图像。new Image.asset,用于 使用键从AssetBundle获取图像。new Image.network,用于从URL获取图像。new Image.file,用于从File获取图像。new Image.memory,用于从Uint8List获取图像。属性frameBuilder可以使用这个构造函数添加动效(如淡入效果)或者占位符loadingBuilder用于原创 2020-07-24 16:34:26 · 283 阅读 · 0 评论 -
Flutter基础控件:Row,Column
@TOCRow行,以水平方式排列其内部children widget。若需要使其内部某个children widget填充满剩余空间,可使用Expanded包裹该组件。void main() => runApp(new MyApp());//StatelessWidget 无状态widgetclass MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //Materi原创 2020-07-24 15:02:57 · 340 阅读 · 0 评论 -
Flutter基础控件:Container
@TOCContainer:容器Container,容器顾名思义就是用来承载其它widget组件的控件,其作用在于给其child组件绘制、定位和调整子组件大小!属性alignment对齐方式padding内间距。color容器背景色。值为一个 Color 对象,不能与 decoration 属性同时设置。decoration绘制在 child 之下的装饰,也就是会被 child 覆盖设置了decoration的话,就不能设置color属性,否则会报错foregroundDecorat原创 2020-07-24 12:09:18 · 190 阅读 · 0 评论 -
Flutter Mac安装教程
安装教程Flutter MAC安装中文网站 https://flutterchina.club一:下载SDK 解压到“资源库”目录 /Library二:打开并编辑bash_profile文件vi ~/.bash_profile在~/.bash_profile设置环境变量如下export PATH=/Library/flutter/bin:$PATHexport PUB_HOSTED_URL=https://pub.flut原创 2020-10-28 16:59:27 · 578 阅读 · 0 评论