flutter学习笔记

重要函数:

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

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

2.

无状态的widget: StatelessWidget

有状态的widget: StatefulWidget

3.build

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栈(页面路由栈)

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布局

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

mainAxisAlignment:子元素放置位置(主轴)

mainAxisSize:主轴占用多少空间

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

2.i ~/ 2表示i除以2,但返回值是整型(向下取整)

 

常用类 

1.Expanded:用于展开RowColumnFlex的子项的窗口小部件

 

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页面移除

 

转载于:https://www.cnblogs.com/wang-xu/p/11230866.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值