flutter学习笔记

时间 2019-11-09

标签 flutter 学习笔记繁體版

原文原文链接

重要函数:

1.runApp函数接受一个给定的Widget并使其成为widget树的根html

void main() => runApp(MyApp());

2.android

无状态的widget: StatelessWidgetgit

有状态的widget: StatefulWidgetredux

3.buildapi

widge的主要工做是实现一个build函数，用以构建自身缓存

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white
      ),
      home: new RandomWords(),
    );
  }
}

4.Material组件aterial应用程序以Material widget开始性能优化

Navigator管理由字符串标识的Widge栈（页面路由栈）app

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white
      ),
      home: new RandomWords(),
    );
  }
}

5.GestureDetector监听手势框架

6.位置相似于flex布局less

crossAaisAlignment:子元素放置位置(十字轴)

mainAxisAlignment:子元素放置位置（主轴）

mainAxisSize:主轴占用多少空间

1.在Dart语言中使用下划线前缀表四符，会强制其变成私有的

2.i ~/ 2表示i除以2，但返回值是整型（向下取整）

经常使用类

1.Expanded:用于展开Row，Column或Flex的子项的窗口小部件

2.Scaffold:

appBar:水平栏，在程序的顶部

BottomAppBar:水平条，一般位于程序底部

3.appBar

actions:要在标题小部件后显示的小部件

4.Flutter之Offstage组件

* 控制child是否显示

当offstage为true，控件隐藏；当offstage为false，显示；

当Offstage不可见的时候，若是child有动画等，须要手动停掉，Offstage并不会停掉动画等操做。

const Offstage({ Key key, this.offstage = true, Widget child })

5.导航/路由

  Navigator.of(context).push(new MaterialPageRoute(builder: (context)      {
      //指定跳转的页面
      return new Demo1();
    },));

6.经常使用元素

（1）Wrap首先来看Wrap，Wrap是一个可使子控件自动换行的控件，默认的方向是水平的

Wrap({
    Key key,
    this.direction = Axis.horizontal,   //排列方向，默认水平方向排列
    this.alignment = WrapAlignment.start,  //子控件在主轴上的对齐方式
    this.spacing = 0.0,  //主轴上子控件中间的间距
    this.runAlignment = WrapAlignment.start,  //子控件在交叉轴上的对齐方式
    this.runSpacing = 0.0,  //交叉轴上子控件之间的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,   //交叉轴上子控件的对齐方式
    this.textDirection,   //textDirection水平方向上子控件的起始位置
    this.verticalDirection = VerticalDirection.down,  //垂直方向上子控件的其实位置
    List<Widget> children = const <Widget>[],   //要显示的子控件集合
  })

(2)SafeArea异形屏适配利器

 SafeArea(
      child: Align(
        alignment: Alignment(-1, -1),
        child: Container(
          child: Text(
            "Hello",
          ),
        ),
      ),
  );

7.文字超出省略号

 child: new Text(
        'Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?',
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontWeight: FontWeight.bold,fontSize: 48.0),
        maxLines: 2,
      ),

8.flutter 版本

git checckout v0.8.1  切换到某个版本
flutter upgrade  //同时更新Flutter SDK和你的依赖包

9.设置appBar的高度

使用脚手架Scaffold能够设置AppBar，想要设置高度，在AppBar外包一层PreferredSize，设置preferredSize的属性为想要的高度便可

   Scaffold( 
        appBar: PreferredSize(
        child: AppBar(
        ),
        preferredSize: Size.fromHeight(screenSize.height * 0.07))
);

10.获取widget的宽高

final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height;

注意：

MediaQuery.of(context) 要在WidgetsApp or MaterialApp 中，否则会报错


（在使用 MediaQuery.of(context)的地方并无一个 WidgetsApp or MaterialApp 来提供数据）

例：

import 'package:flutter/material.dart';


class GetWidgetWidthAndHeiget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;
    final height = size.height;
    print('width is $width; height is $height');
    return Scaffold(
      appBar: AppBar(
        title: Text('Width & Height'),
      ),
      body: Center(
        child: Container(
          color: Colors.redAccent,
          width: width / 2,
          height: height / 2,
        ),
      ),
    );
  }
}

11.手势控制GestureDetector

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
    title: "个人应用",
    home: new MyButton(),
  ));
}


class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //GestureDetector并不具备显示效果，而是检测由用户作出的手势(点击拖动和缩放)
    return new GestureDetector(
      //发生点击事件后回调
      onTap: () {
        print("hia");
      },
      //发生双击时间后回调
      onDoubleTap: (){
        print("hia hia");
      },
     // 长按事件
      onLongPress: (){
        print("hia hia hia........");
      },
      child: new Container(
        height: 36.0,
        padding: const EdgeInsets.all(8.0),
        //上下左右都偏移8像素边距
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        //symmetric的参数是可选的 水平方向
        // 背景装饰
        decoration: new BoxDecoration(
          //圆角和颜色
            borderRadius: new BorderRadius.circular(5.0),
            color: Colors.lightGreen[500]),
        child: new Center(child: new Text("点击监听")),
      ),
    );
  }

Flutter 颜色的表示方式

Color c = const Color(0xFF0099ff);//0x 后面开始 两位FF表示透明度16进制，
Color c = const Colors.red[100];
Color c = const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
Color c = const Color.fromARGB(255, 66, 165, 245);
Color c = const Color.fromRGBO(66, 165, 245, 1.0);//opacity：不透明度

TextField

const TextField({
    Key key,
    this.controller,            //控制器，控制TextField文字
    this.focusNode,
    this.decoration: const InputDecoration(),      //输入器装饰
    TextInputType keyboardType: TextInputType.text, //输入的类型
    this.style,
    this.textAlign: TextAlign.start, //文本对齐方式
    this.autofocus: false,    //是否自动对焦
    this.obscureText: false,  //是否隐藏输入
    this.autocorrect: true,   //是否自动更正
    this.maxLines: 1,         //最大行数
    this.maxLength,           //最大长度
    this.maxLengthEnforced: true,
    this.onChanged,            //文字改变触发
    this.onSubmitted,          //文字提交触发（键盘按键）
    this.onEditingComplete,  //当用户提交可编辑内容时调用
    this.inputFormatters,
    this.enabled,           //是否禁用
    
    this.cursorWidth = 2.0,//光标的样式
    this.cursorRadius,     //光标的样式
    this.cursorColor,      //光标的样式
    this.keyboardAppearance,
  })

Slider

Slider 各部分的术语是：

thumb - 用户拖动时水平滑动的形状。

track - 滑块拇指滑过的线。

value - 当用户拖动拇指指示所选值时弹出的形状。

active - 滑块的“活动”一侧是拇指和最小值之间的一侧。

inactive - 滑块的“非活动”侧是拇指和最大值之间的一侧。

Slider 有如下经常使用属性：

activeColor → Color - 激活时的颜色。

divisions → int - 离散部分的数量。

inactiveColor → Color - 滑块轨道的非活动部分的颜色。

label → String 滑块处于活动状态时显示在滑块上方的标签。

max → double - 用户能够选择的最大值。

min → double - 用户能够选择的最小值。

onChanged → ValueChanged - 改变时触发。

onChangeEnd → ValueChanged - 改变后触发。

onChangeStart → ValueChanged - 改变前触发。

value → double - 滑块的值。

Switch

Switch 有如下经常使用属性：
activeColor → Color - 激活时原点的颜色。
activeThumbImage → ImageProvider - 原点还支持图片，激活时的效果。
activeTrackColor → Color - 激活时横条的颜色。
inactiveThumbColor → Color - 非激活时原点的颜色。
inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
inactiveTrackColor → Color - 非激活时横条的颜色。
onChanged → ValueChanged - 改变时触发。
value → bool - 切换按钮的值。

SwitchListTile

value： 是否选中 是否打开
onChanged： 当打开关闭的时候的回调
activeColor： 选中时 滑块的颜色
activeTrackColor： 选中时 滑道的颜色
inactiveThumbColor： 未选中时 滑块的颜色
inactiveTrackColor： 未选中时 滑道的颜色
activeThumbImage： 选中时 滑块的图片
inactiveThumbImage： 未选中时 滑块的图片
title： 标题 典型的是 Text
subtitle： 副标题 在标题下面的 典型的是 Text
isThreeLine = false： 是否是三行， true 时： subtitle 不能为null， false时能够为 null
dense： 是否垂直密集居中
secondary： 左边的一个东西
selected = false： 若是为 true ，则 text 和 icon 都用 activeColor 时的color

Text

textAlign: TextAlign.center, //文本对齐方式  居中
textDirection: TextDirection.ltr, //文本方向
softWrap: false, //是否自动换行 false文字不考虑容器大小  单行显示   超出；屏幕部分将默认截断处理
overflow: TextOverflow
  .ellipsis, //文字超出屏幕以后的处理方式  TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
textScaleFactor: 2.0, //字体显示的赔率
maxLines: 10, //最大行数
style: new TextStyle(
decorationColor: const Color(0xffffffff), //线的颜色
decoration: TextDecoration
    .none, //none无文字装饰   lineThrough删除线   overline文字上面显示线    underline文字下面显示线
decorationStyle: TextDecorationStyle
    .solid, //文字装饰的风格  dashed,dotted虚线(简短间隔大小区分)  double三条线  solid两条线
wordSpacing: 0.0, //单词间隙(负值可让单词更紧凑)
letterSpacing: 0.0, //字母间隙(负值可让字母更紧凑)
fontStyle: FontStyle.italic, //文字样式，斜体和正常
fontSize: 20.0, //字体大小
fontWeight: FontWeight.w900, //字体粗细  粗体和正常
color: const Color(0xffffffff), //文字颜色

Button

RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton

FlatButton ：扁平化的按钮，继承自MaterialButton

OutlineButton ：带边框的按钮，继承自MaterialButton

IconButton ：图标按钮,继承自StatelessWidget

RaisedButton({
    Key key,
  //点击按钮的回调出发事件
    @required VoidCallback onPressed,
  //水波纹高亮变化回调
    ValueChanged<bool> onHighlightChanged,
  //按钮的样式（文字颜色、按钮的最小大小，内边距以及shape）[ Used with [ButtonTheme] and [ButtonThemeData] to define a button's base
//colors, and the defaults for the button's minimum size, internal padding,and shape.]
    ButtonTextTheme textTheme,
    //文字颜色
    Color textColor,
    //按钮被禁用时的文字颜色
    Color disabledTextColor,
    //按钮的颜色
    Color color,
    //按钮被禁用时的颜色  
    Color disabledColor,
    //按钮的水波纹亮起的颜色
    Color highlightColor,
    //水波纹的颜色
    Color splashColor,
    //按钮主题高亮
    Brightness colorBrightness,
    //按钮下面的阴影长度
    double elevation,
    //按钮高亮时的下面的阴影长度
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  }

FloatingActionButton({
    Key key,
    //  按钮上的组件，能够是Text、icon, etc.
    this.child,
    //长按提示
    this.tooltip,
    // child的颜色（尽在child没有设置颜色时生效）
    this.foregroundColor,
    //背景色，也就是悬浮按键的颜色
    this.backgroundColor,
    this.heroTag = const _DefaultHeroTag(),
    //阴影长度
    this.elevation = 6.0,
    //高亮时阴影长度
    this.highlightElevation = 12.0,
    //按下事件回调
    @required this.onPressed,
    //是小图标仍是大图标
    this.mini = false,
    //按钮的形状(例如：矩形Border，圆形图标CircleBorder)
    this.shape = const CircleBorder(),
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.isExtended = false,
  })

PopupMenuButton({
    Key key,
//构建弹出式列表数据
    PopupMenuItemBuilder<T> @required this.itemBuilder,
//初始值
   T initialValue,
//选中时的回调
 PopupMenuItemSelected<T> onSelected;,
//当未选中任何条目后弹窗消失时的回调
     final PopupMenuCanceled onCanceled;,
//
    this.tooltip,
//弹窗阴影高度
    this.elevation = 8.0,
//边距
    this.padding = const EdgeInsets.all(8.0),
//弹窗的位置显示的组件，默认为三个点...
    this.child,
//跟child效果一致
    this.icon,
//弹窗偏移位置
    this.offset = Offset.zero,
  })

Chip

Chip({
    Key key,
    this.avatar,//标签左侧Widget，通常为小图标
    @required this.label,//标签
    this.labelStyle,
    this.labelPadding,//padding
    this.deleteIcon//删除图标,
    this.onDeleted//删除回调，为空时不显示删除图标,
    this.deleteIconColor//删除图标的颜色,
    this.deleteButtonTooltipMessage//删除按钮的tip文字,
    this.shape//形状,
    this.clipBehavior = Clip.none,
    this.backgroundColor//背景颜色,
    this.padding,
    this.materialTapTargetSize//删除图标material点击区域大小,
  })

ScrollView

cacheExtent → double - 视口在可见区域以前和以后有一个区域，用于缓存用户滚动时即将可见的项目。
controller → ScrollController - 一个可用于控制滚动视图滚动到的位置的对象。
physics → ScrollPhysics - 滚动视图应如何响应用户输入。
primary → bool - 是不是与父级关联的主滚动视图。
reverse → bool - 滚动视图是否在阅读方向上滚动。
scrollDirection → Axis - 滚动视图滚动的轴。
shrinkWrap → bool - 应该根据正在查看的内容肯定滚动视图的范围。

其余知识：

EdgeInsets 这个类经过他能够很好的控制widget上下左右的偏移量有.all所有设置也有.symmetric水平和垂直可选也有.only上下左右可选

EdgeInsets.fromLTRB(10,10,10,10) ，L表示左边距（left缩写），T表示上边距（top缩写），R表示右边距（right缩写），B表示底边距（bottom缩写），四个值能够分开写；

12. fish_redux

view :

它主要包含三方面的信息：

视图是彻底由数据驱动。

视图产生的事件、回调，经过 Dispatch 发出“意图”，不作具体的实现。

须要用到的组件依赖等，经过 ViewService 标准化调用。好比一个典型的符合 View 签名的函数。

effect:

Effect 是对非修改数据行为的标准定义，它是一个函数签名: (Context, Action) => Object，它主要包含四方面的信息：

接收来自 View 的“意图”，也包括对应的生命周期的回调，而后作出具体的执行。

它的处理多是一个异步函数，数据可能在过程当中被修改，因此咱们不崇尚持有数据，而经过上下文来获取最新数据。

它不修改数据，若是修要，应该发一个 Action 到 Reducer 里去处理。

它的返回值仅限于 bool or Future，对应支持同步函数和协程的处理流程。好比：良好的协程的支持。

Reducer

它主要包含三方面的信息

接收一个“意图”，作出数据修改。

若是要修改数据，须要建立一份新的拷贝，修改在拷贝上。

若是数据修改了，它会自动触发 State 的层层数据的拷贝，再以扁平化方式通知组件刷新。

Adapter:

Adapter 也是对局部的展现和功能的封装。它为 ListView 高性能场景而生，它是 Component 实现上的一种变化。

1.它的目标是解决 Component 模型在 flutter-ListView 的场景下的 3 个问题：

将一个"Big-Cell"放在 Component 里，没法享受 ListView 代码的性能优化。

Component 没法区分 appear|disappear 和 init|dispose 。

Effect 的生命周期和 View 的耦合，在 ListView 的场景下不符合直观的预期。归纳的讲，咱们想要一个逻辑上的 ScrollView，性能上的 ListView ，这样的一种局部展现和功能封装的抽象。作出这样独立一层的抽象是，咱们看实际的效果，咱们对页面不使用框架，使用框架 Component，使用框架 Component+Adapter 的性能基线对比。

2.Reducer is long-lived, Effect is medium-lived, View is short-lived. 咱们经过不断的测试作对比，以某 android 机为例。

3.使用框架前咱们的详情页面的 FPS，基线在 52FPS。

4.使用框架，仅使用 Component 抽象下，FPS 降低到 40，遭遇“Big-Cell”的陷阱。

5.使用框架，同时使用 Adapter 抽象后，FPS 提高到 53，回到基线以上，有小幅度的提高。

static Action didLoadAction(Home home) {
  return Action(HomePageAction.didLoad, payload: home);
}
  


void _init(Action action, Context<HomePageState> ctx) async {
  APIs.getHome().then((home) {
    ctx.dispatch(HomePageActionCreator.didLoadAction(home));
  });
}


onSelect(Action action, Context ctx) async {
  String videoId = action.payload["videoId"];
  VideoDetail videoDetail = await APIs.getVideo(videoId);
  Map<String, dynamic> payload = {
    "videoId": videoId,
    "videoDetail": videoDetail
  };
  Navigator.of(ctx.context).push(MaterialPageRoute(builder: (context) {
    return VideoPage().buildPage(payload);
  }));
}

13.颜色透明度

带有accent的颜色每一个有4中颜色，如


Colors.redAccent，Colors.redAccent[100], Colors.redAccent[200], Colors.redAccent[400], Colors.redAccent[700], 


Color.fromARGB(100, 10, 100, 100)，A表示不透明度，值从0-255，RGB值也是从0-255；
Color.fromRGBO(100, 10, 10, 1)，O表示不透明度，值从0-1，RGB值是从0-255；
Color.alphaBlend(Color.fromRGBO(10, 10, 255, 0.1), Color.fromRGBO(100, 10, 255, 0.5)) ，这个是颜色的混合，
颜色会根据不透明度进行合并；
若是前者的不透明度为1，就只显示前者颜色，前者为0，颜色为后者，不然就是按照先后者的不透明度和颜色进行混合

tools:replace="android:label"
xmlns:tools="http://schemas.android.com/tools"
tools:replace="android:label,android:allowBackup"
buildToolsVersion '28.0.2'
tools:replace="android:label,android:allowBackup,android:appComponentFactory"
xmlns:tools="http://schemas.android.com/tools"


implementation 'androidx.appcompat:appcompat:1.0.0-alpha1'
implementation 'androidx.constraintlayout:constraintlayout:1.1.2'

13.生命周期

（1）initState

当插入渲染树的时候调用，这个函数在生命周期中只调用一次。这里能够作一些初始化工做，好比初始化State的变量。

（2）didChangeDependencies

使用场景

new DefaultTabController(length: 3, child: new TabBar(
      tabs: [ "主页","订单","个人" ]
      .map( (data)=>new Text(data) ).toList(),

（3）didUpdateWidget

当组件的状态改变的时候就会调用didUpdateWidget,好比调用了setState.实际上这里flutter框架会建立一个新的Widget,绑定本State，并在这个函数中传递老的Widget。这个函数通常用于比较新、老Widget，看看哪些属性改变了，并对State作一些调整。

（4）deactivate

当State对象从树中被移除时，会调用此回调

（5）dispose

一旦到这个阶段，组件就要被销毁了，这个函数通常会移除监听，清理环境。

例子:

假设咱们从A页面跳转到B页面， 那么A，B页面的生命周期会是怎样的呢？


B页面进入初始化状态，依次执行4个函数：构造函数 > initState > didChangeDependencies > Widget build , 此时页面加载完成,进入运行态。
此时A页面依次执行deactivate > build函数。注意 此时A页面并未卸载。


而后咱们假设B页面只有一个按钮，点击B页面中的按钮，改变按钮的文字，会执行widget的build方法 ，(理论上也应该执行didUpdateWidget，但我这里没有)。


这时，咱们点击返回键从B页面返回到A页面。
A页面从新显示，B页面开始卸载。
那么A先执行deactivate > build ， 而后B页面依次执行：deactivate > dispose 。
此时A页面进入运行态，B页面移除