Flutter——state生命周期和图片加载

State生命周期

StatefulWidget插入到widget树：

initState->didChangeDependencies->build

initState：当Widget第一次插入到Widget树时会被调用，对于每一个State对象，Flutter framework只会调用一次该回调，所以，通常在该回调中做一些一次性的操作，如状态初始化、订阅子树的事件通知等。
didChangeDependencies：initState后立刻调用，state依赖的对象发生变化时调用。
bulid：构建Widget时调用，调用后控件会显示

点击⚡️按钮热重载：

reassemble->didUpdateWidget->build

reassemble：此回调是专门为了开发调试而提供的，在热重载时会被调用，此回调在Release模式下永远不会被调用
didUpdateWidget：组件状态改变时候调用，可能会调用多次

从widget中移除StatefulWidget：

deactive->dispose
deactive：当State对象从树中被移除时，会调用此回调
dispose：当State对象从树中被永久移除时调用，通常在此回调中释放资源。

Container

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
            title: Text('Container实例'),
            ),
            body: Center(
            child: Container(
                child: Text('Container', style: TextStyle(fontSize: 28.0)),
                padding: EdgeInsets.only(top: 20),//EdgeInsets.all所有方向; EdgeInsets.only(top: 20),指定方向
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                    color: Colors.blue,
                    border: Border.all(
                        color: Colors.amber,
                        width: 20,
                    ),
                    borderRadius:
                        const BorderRadius.all(const Radius.circular(50))),
                transform: Matrix4.rotationZ(-pi / 9),
            ),
            ),
        ),
        );
    }
}

图片加载四种

加载网络图片

Image.network

加载资源图片

Image.asset
不能忘记在pubspec.yaml中引入资源

加载内存中的图片

加载手机文件中的图片（image_picker）

import 'dart:io';

import 'package:flutter/material.dart';
import 'dart:math';
import 'package:flutter/rendering.dart';
import 'dart:typed_data';

import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        //查看布局边界
        //debugPaintSizeEnabled = true;
        return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
                title: Text('Image实例'),
            ),
            body: Center(
            child: Column(
                //加载网络图片
                children: <Widget>[
                Image.network(
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553748107444&di=406ec85fe38bcf59cb7c04ecd086f4f3&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fupload%2F20170801%2F9f261502c4c243e0b2996b31411a3697_th.png',
                    width: 100,
                    height: 100,
                ),
                Image.asset(
                    'assets/images/tzd.jpg',
                    width: 100,
                    height: 100,
                ),
                //从内存中加载图片
                MemoryImageWidget(),
                //从文件中加载
                FileImageWidget(),
                ],
            ),
            ),
        ),
        );
    }
}

//内存
class MemoryImageWidget extends StatefulWidget {
    @override
    _MemoryImageWidgetState createState() => _MemoryImageWidgetState();
}

class _MemoryImageWidgetState extends State<MemoryImageWidget> {
    Uint8List bytes;

    @override
    void initState() {
        super.initState();
        rootBundle.load('assets/images/tzd.jpg').then((data) {
            if (mounted) {
                setState(() {
                    bytes = data.buffer.asUint8List();
                });
            }
        });
    }

    @override
    Widget build(BuildContext context) {
        final _decoration = BoxDecoration(
            image: bytes == null ? null : DecorationImage(image: MemoryImage(bytes)),
        );
        return Container(
            height: 100,
            width: 100,
            decoration: _decoration,
        );
    }
}


//文件
class FileImageWidget extends StatefulWidget {
    @override
    _FileImageWidgetState createState() => _FileImageWidgetState();
}

class _FileImageWidgetState extends State<FileImageWidget> {
    File _image;

    //读文件需要异步
    Future getImage() async {
        var image = await ImagePicker.pickImage(source: ImageSource.gallery);
        setState(() {
            _image = image;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                Center(
                    child: _image == null
                        ? Text('未旋转')
                        : Image.file(
                            _image,
                            width: 100,
                            height: 100,
                            ),
                ),
                FlatButton(
                    onPressed: getImage,
                    child: Text(
                        '选择图片',
                        style: TextStyle(color: Color(0xff0000ff)),
                    ),
                ),
            ],
        );
    }
}

点击选择图片

debugPaintSizeEnabled = true;

查看布局边界

去掉右上角debug

编辑器右侧Flutter Inspection->More Action->Hide Debug Mode Banner

这样就成功去掉了右上角的Debug标签