2020年07月_青蛙不吃草～

原创 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 848

原创 Flutter布局：Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth

这里写目录标题Baseline(基准线布局)属性FractionallySizedBox属性IntrinsicHeight（固定高度）IntrinsicWidth（固定宽度）属性Baseline(基准线布局)Baseline基准线是指将所有的元素都统一的放在一条水平线上。Baseline是根据child的baseline定位的child的小部件，即使在不同的child都处在规定的基准线位置，特别是多用文字排版中的时候，就算是不同大小的文字处于同一水平线上。文字排版中的baseline属性

2020-07-31 17:21:57 588

原创 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 541

原创 Flutter导航：Navigator&router

NavigatorNavigatorflutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。构建路由Push到下一个界面（不带参数），并接收返回数据Pop回上一个界面并返回参数push下个界面（带参数）命名路由简单使用界面跳转传参命名路由封装创建路由管理类（app_routes.dart）初始化路由并跳转子界面，不传参数（main.dart）初始化路由并跳转子界面，传参数并返回值给父试图(secondPage.dart)接收父界面传递参数(threePage.dart)遇到的坑路由(Rou

2020-07-30 17:52:15 805

原创 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 1045

原创 Flutter基础控件:ListView、ListTile、Scrollbar

ListView属性scrollDirectionreversecontrollerprimaryphysicsshrinkWrappaddingitemExtentaddAutomaticKeepAlivesaddRepaintBoundariesaddSemanticIndexescacheExtentchildrensemanticChildCountdragStartBehavior方法ListTile属性scrollDirection滑动的方向。默认Axis.vertical为垂直方向滑动

2020-07-29 14:53:51 1330

原创 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 2187

原创 Flutter基础控件：BottomNavigationBar

BottomNavigationBar属性onTapcurrentIndexelevationtypefixedColorbackgroundColoriconSizeselectedItemColorunselectedItemColorselectedIconThemeunselectedIconThemeselectedFontSizeunselectedFontSizeselectedLabelStyleunselectedLabelStyleshowSelectedLabelsshowUnsele

2020-07-27 18:03:34 433

原创 Flutter生命周期

生命周期Widget 的生命周期StatelessWidget 的生命周期StatefulWidget 的生命周期App 的生命周期Flutter 的生命周期分为两个部分：Widget 的生命周期App 的生命周期Widget 的生命周期Flutter 里的 Widget 分为 StatelessWidget 和 StatefulWidget 两种，这两种 Widget 的生命周期是不一样的，我们接下来具体来看。StatelessWidget 的生命周期StatelessWidget 的生

2020-07-27 16:31:17 221

原创 Flutter线程

事件循环Isolate事件循环Isolate可以把它理解为Dart中的线程。但它又不同于线程，更恰当的说应该是微线程，或者说是协程。它与线程最大的区别就是不能共享内存，因此也不存在锁竞争问题，两个Isolate完全是两条独立的执行线，且每个Isolate都有自己的事件循环，它们之间只能通过发送消息通信，所以它的资源开销低于线程。Flutter 程序由一个或多个 isolate 组成。我们的代码默认都在 Main isolate中执行.。每个 isolate 中有一个Looper，但存在两个Queue:

2020-07-27 15:39:08 1080

原创 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 326

原创 Flutter基础控件：TextField

TextFieldTextField属性controllerfocusNodedecorationkeyboardTypetextInputActionstylestrutStyletextAligntextAlignVerticaltextDirectionreadOnlytoolbarOptionsshowCursorautofocusobscureTextautocorrectenableSuggestionsmaxLinesminLinesexpandsmaxLengthmaxLengthEnfor

2020-07-25 18:23:04 1606

原创 Flutter基础控件：Appbar

@TOCAppbar类似iOS导航栏，但有一定区别Appbar属性leading在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。automaticallyImplyLeading如果没有leading，automaticallyImplyLeading为true，就会默认返回箭头如果没有leading 且为false，空间留给title如果有leading，这个参数就无效了title标题actions导航栏右侧按钮数组fle

2020-07-25 16:40:39 414

原创 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 718

原创 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 685

原创 Flutter基础控件：Text

@TOCText单一格式文本属性style文本样式，类型是TextStylestrutStyleStrut是一项允许设置最小线高的功能。效果就像该段落的每一行的开头都包含一个零宽度的空间。textAlign文本的对齐方式，类型是TextAligncenter: 文本居中对齐left: 文本左对齐right: 文本右对齐start: 文本开始位置对齐，类似左对齐end: 文本结束位置对齐，类似右对齐justify: 文本两端对齐textDirection文本方向

2020-07-24 18:12:52 300

原创 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 307

原创 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 349

原创 Flutter基础控件：Container

@TOCContainer：容器Container，容器顾名思义就是用来承载其它widget组件的控件，其作用在于给其child组件绘制、定位和调整子组件大小！属性alignment对齐方式padding内间距。color容器背景色。值为一个 Color 对象，不能与 decoration 属性同时设置。decoration绘制在 child 之下的装饰，也就是会被 child 覆盖设置了decoration的话，就不能设置color属性，否则会报错foregroundDecorat

2020-07-24 12:09:18 220

原创 Dart中一些概念

Dart重要概念任何保存在变量中的都是一个对象，并且所有的对象都是对应一个类的实例。无论是数字，函数和 null 都是对象。所有对象继承自Object 类。尽管 Dart 是强类型的，但是 Dart 可以推断类型，所以类型注释是可选的。在上面的代码中， number 被推断为 int 类型。如果要明确说明不需要任何类型，需要使用特殊类型 dynamic 。Dart 支持泛型，如 List （整数列表）或 List （任何类型的对象列表）默认值未初始化的变量默认值是 nu

2020-07-21 16:43:29 235

原创 Dart：函数123

@TOCDart：函数普通函数Dart中一切皆为对象，函数也是一个对象可以做为一个变量所有函数都会返回一个值。如果没有明确指定返回值，函数体会被隐式添加 “return null;”语句表达式：返回值函数名(参数1，参数2，…){函数体return 返回值;}实例：int stringToInt(String str){ var one = int.parse(str);// String -> int return one;}无返回值时，“返回值”可不写

2020-07-21 15:22:40 121

青蛙不吃草