Flutter随手记

关闭右上角的debug标识

默认地，flutter应用的右上角显示debug标识，如下：

可使用如下方法关闭：

void main(){
  runApp(
      MaterialApp(
        debugShowCheckedModeBanner: true,//关闭debug标识
        home: Scaffold(
          appBar: AppBar(title: Text("FLUTTER001"),),
          body: Center(
            child: Text(
              "Hello,Flutter",
              style: TextStyle(
                fontSize: 30,
                color: Colors.orangeAccent,
              ),
            ),
          ),
        ),
      )
  );
}

@immutable

flutter中，无论是StatelessWidget还是StatefullWidget，均不可以在其中直接定义变量（可以定义常量），原因是什么呢？

这两种类型widget的父类是Widget，而Widget使用 @immutable 进行了标记，该标记标识该类是不可变的。所以其中不能定义变量。

关于生命周期

对于StatelessWidget来说，只需要关注其构造函数和build方法即可，因为StatelessWidget在构建后不会有状态变化。
StatefulWidget由两个类组成，所以其生命周期比较复杂。
- StatefulWidget两个方法：
  - 构造方法
  - createState方法
- State类三个方法：
  - 构造方法
  - initState方法
  - build方法

快捷键

给组件再包裹一层组件/StatelessWidget转成StatefulWidget：alt+enter
组件抽取：默认是option+command+W，可以在顶部菜单Refactor→Extract菜单中查看，若是使用快捷键的时候没有反应，查看是否跟其他快捷键冲突，若冲突，在preference中找到keymap，搜索“extract”，找到快捷键修改即可。
查看某个类有哪些子类：option+command+B
command+N，生成getter、setter、constructor等

组件使用

如何使用占位图？
- FadeInImage
默认地，Row会在水平方向尽可能占据比较大的控件，如果希望Row包裹内容，可以进行如下设置：
```
mainAxisSize: MainAxisSize.min
```
设置了上面的属性后，mainAxisAlignment的设置将不会有所表现了，因为没有剩余空间😬
常用的多子布局控件
- Row、Column、Flex，前两者继承自Flex，只是在初始化的时候设置了direction属性值，方便使用。
  
  与这三个控件相关的两个控件：Flexible和Expanded（常用）。这两个控件用于处理主轴剩余空间或者主轴空间不足的情况。后者继承自前者，且将fit属性设置为FlexFit.tight，flex属性设置为1。
- Stack：该控件可以将子组件进行层叠排布，即在z轴上排布。
  
  与之相关的组件Positioned。Positioned组件的功能类似于css中的绝对定位。
Row不能换行，需要换行，可使用Wrap。
关于Row/Column的CrossAxisAlignment的stretch

将Row/Column的交叉轴的对齐方式设置为stretch后，Row/Column会占据交叉轴尽可能大的空间，再将所有的子控件在交叉轴上的尺寸拉伸到充满交叉轴占据的空间。
以Row为例，若主轴上有剩余空间，如何让某个子组件占据剩余空间？

使用Flexible包裹该子组件，并设置Flexible的fit属性为FlexFit.tight

或者使用Expanded组件也可以。

小技巧

开启辅助线：

导入import 'package:flutter/rendering.dart'，设置debugPaintSizeEnabled=true

疑问

为什么StatefulWidget的build方法放在相应的state中？

build出来的widget需要依赖state中的变量
在Flutter运行过程中，widget是不断地销毁和创建的，但是对应的state并不需要频繁地销毁创建

图片缓存问题：

flutter中会自动对图片进行缓存：上限1000张图片，100M。官方文档说明：

Implements a least-recently-used cache of up to 1000 images, and up to 100 MB. The maximum size can be adjusted using maximumSize and maximumSizeBytes.

文档链接