Flutter生命周期以及常用布局组件

最新推荐文章于 2024-03-28 18:25:11 发布

theyangchoi

最新推荐文章于 2024-03-28 18:25:11 发布

阅读量172

点赞数 1

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/theyangchoi/article/details/115717327

版权

Flutter 专栏收录该内容

4 篇文章

订阅专栏

简介

常年写Android都知道，视图的绘制有一个生命周期，而我们的所有操作都不能跳过它的声明周期去进行操作；flutter和其他的视图框架比如android的Activity一样，flutter中的视图Widget也存在生命周期，生命周期的回调函数体现在了State上面。理解flutter的生命周期，对我们写出一个合理的控件至关重要。

Flutter生命周期

通过下面一张图可以充分了解到Flutter的生命周期:
在这里插入图片描述
构造函数：构造函数不属于生命周期，因为这个时候State的widget属性为空，如果要在构造函数中访问widget的属性是行不通的。但是构造函数必然是要第一个调用的。

initState：这个函数有点类似于Android里面Activity的onCreate方法，只会在插入渲染的时候被调用，而且只会被调用一次，一般用来初始化一些数据。

didChangeDependencies：在initState之后立即调用。

didUpdateWidget：当组件的状态发生改变的时候被调用，比如做了某些操作调用setState方法的时候就会被调用。

deactivate：在销毁之前会被调用。

dispose：销毁，可以做一些清除数据等操作。

充分的了解生命周期可以更方便我们的日常开发。

常用布局

Flutter的布局可以理解为是用一个个的Widget构成的，所有的布局都是Widget的子类。

1.Container:创建一个结合了常见绘制、定位和大小调整小部件的小部件。有以下几个常用属性：

width 宽度
height 高度
alignment 对齐方式
padding 内边距
transform 外边距
decoration 边框，下划线，圆角等
child 子布局

2.GridView:创建一个可滚动的二维小部件数组，将多个子布局放在一个可以滑动的表格组件里面。

3.ListView:这个就太了解了，显示列表数据。

4.Text:文本框，用来显示文字：

String this.data 必传参数,显示的文本值

//可选参数
style 文本样式,通过 new TextStyle进行编辑
textAlign 对齐方式
//示例
Text(
      'testText',
      style: new TextStyle(fontSize: 16.0, color: Colors.black),
      textAlign: TextAlign.left,
    )

5.Row：创建一个水平排列的小部件数组，可以理解为Android中LinearLayout时候设置的horizotal属性，childer是一个数组，里面要放置一个一个的Widget：

children: <Widget>[
	//就可以得到一个两个文本排列的布局
	Text('testText',
	            style: new TextStyle(fontSize:12.0, color: Colors.black)),
	Text('testText2',
	            style: new TextStyle(fontSize:12.0, color: Colors.black)),
]

6.Column:创建一个垂直排列的小部件数组，可以理解为Android中LinearLayout设置vertical属性，childer同样是一个数组，里面同样是要放置一个个的Widget：

    Column column = new Column(
      crossAxisAlignment: CrossAxisAlignment.start,//子控件左对齐
      children: <Widget>[
        new Padding(
          //margin: 10  外边距上下左右都是10
          padding: EdgeInsets.all(10.0),
          child: author,),
        new Padding(
          //从左侧、顶部、右侧和底部的偏移创建插入。 可以理解为margin let  top  right bottom
          padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 10.0),
          child: title,),
        new Padding(
          padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 10.0),
          child: rowCollection,)
      ],
    );

7.Padding：通过EdgeInsets设置布局的内边距

//上下左右的内边距都是10
padding: EdgeInsets.all(10.0)
//从左上右下分别设置内边距
padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 10.0)
//分别设置水平和垂直方向的内边距
padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
//单独设置某一个方向的内边距
    this.left = 0.0,
    this.top = 0.0,
    this.right = 0.0,
    this.bottom = 0.0,
padding: EdgeInsets.only(top: 10)

8.InkWell：手势组件，简单点说就是可以实现手势触碰Widget的各种方法，点击，长按，按下以及失去焦点等操作：

    InkWell inkWell = new InkWell(
      onTap: ,
      onDoubleTap: ,
      onLongPress: ,
      onTapDown: ,
      onTapCancel: ,
      onFocusChange: ,
      child: 子布局,
    );

9.GestureDetector手势,可以实现点击、长按、双击、按下、松开、拖拽等操作
基本手势：

GestureDetector(
  onTap: () => _printMsg("点击"),
  onDoubleTap: () => _printMsg("双击"),
  onLongPress: () => _printMsg("长按"),
  onTapCancel: () => _printMsg("取消"),
  onTapUp: (e) => _printMsg("松开"),
  onTapDown: (e) => _printMsg("按下"),
  child: Container(
    decoration: BoxDecoration(color: Colors.redAccent),
    width: 100,
    height: 100,
  ),
)

拖拽手势,拖动手势主要由onPanDown（手指按下）、onPanUpdate（手指滑动）、onPanEnd（滑动结束）构成：

GestureDetector(
        onPanDown: (DragDownDetails e) {
          //打印手指按下的位置
          print("手指按下：${e.globalPosition}");
        },
        //手指滑动
        onPanUpdate: (DragUpdateDetails e) {
          setState(() {
            left += e.delta.dx;
            top += e.delta.dy;
          });
        },
        onPanEnd: (DragEndDetails e) {
          //打印滑动结束时在x、y轴上的速度
          print(e.velocity);
        },

        child: Container(
          width: 72,
          height: 72,
          decoration: BoxDecoration(
            color: Colors.blueAccent,
            borderRadius: BorderRadius.circular(36)
          ),
        ),

缩放手势，需要使用到onScaleUpdate方法：

Center(
  child: GestureDetector(
    child: Container(
      //使用OverflowBox可以让子组件宽高超过父组件
      child: OverflowBox(
        maxWidth: 2000.0,
        child: Image.network(
            "https://upload-images.jianshu.io/upload_images/10992781-a64bd14d27699266.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp",
            width: width),
      ),
    ),
    onScaleUpdate: (ScaleUpdateDetails e) {
      setState(() {
        //缩放倍数在0.8到10倍之间
        width = 200 * e.scale.clamp(0.8, 10);
      });
    },
  ),
)