Flutter随记 - 爱码网

1.Flutter SDK下载配置好环境变量后，在VSCode里安装dart和flutter两个插件后就可以创建项目了；

2.创建项目可以用命令flutter create demo_01，则会自动创建demo_01项目目录（注意项目不要用demo-01而是用下划线）【可以加 --no-pub来不自动执行pub get】

3.Flutter里布局是根据Widget类型来实现的，比如Scaffold是具有appBar和body和floatingActionButton等三个布局块（上下分列，最后的那个其实是一个floatting的一个控件）的一个Widget（在C#里叫Control/控件），

而Center这种代表它内部只有一个布局块（但是是全局居中对齐）【只有一个布局块的内容属性一般都叫child】

而像Row，Column之类的则有多个元素，因此表示内容的属性叫children（注意，Column是一列而非Columns多列，因此Column的子元素是在这一列里上下排列的）

4.flutter创建项目还可以flutter create --no-pub --platforms=windows ft_demo01来创建指定目标源的项目；如果对这个项目需要增加目标源，可以执行flutter devices查看本机flutter配置了哪些目标源，然后cd到项目根目录后通过flutter config --enable-linux-desktop来启用某个目标源（这里是Linux desktop，还有--enable-windows-desktop）；注意启用了目标源需要重新创建一下项目，即再执行flutter create --no-pub .；然后手动执行 flutter pub get --offline后就可以通过 flutter run -d windows来debug此目标源；还可以用flutter build windows（可以加--release）来build此目标源；

5.shift+r可以热重启【r是热重载】【dart不行，要借助pub包】

6.事件冒泡（包括前端）的意思是，比如有这种情况，一个Panel里面有个ListView，而Panel注册了双击左侧按钮事件（比如双击Panel会提示啥），而ListView的item也注册了双击事件；因此ListView的item这个组件是Panel的子孙组件，当双击item的时候事件被item先监听处理，如果不阻止冒泡，则会继续让Panel也处理这个双击事件；（还有典型的场景为外层是一个ScrollView，而内部子孙里也有ScrollView，因此对子孙Scroll时产生的事件如果不取消冒泡，则父Scroll也能收到，就会发生两个ScrollView一起动的情况）

7.flutter里一个新的页面（路由页面）其实就是一个ConstrainedBox【expand()的】，因此对Container设置大小不生效；但是可以先用UnconstrainedBox包裹后，再用Container、SizedBox、ConstrainedBox等就有用了；【即如果父组件是ConstrainedBox，设置了最小长宽，则其子容器设置的大小如果小于父ConstrainedBox则以父ConstrainedBox为主（可以用UnconstrainedBox来取消父ConstrainedBox对子组件的影响，但是父ConstrainedBox大小是不受影响的）；ConstrainedBox优先级大于SizedBox（也不能这么说，应该说这两个谁是父组件则谁的优先级更高）】【但是注意，ConstrainedBox和SizedBox对子元素的大小限制是基于子元素是单个控件组成的，比如各种容器，各种button（容器和button等是child）；而如果子元素是Row这种的，则Row里的children元素是不会和ConstrainedBox等一样宽/高的】【或者这么讲，Row等默认外面就包有一层UnconstrainedBox】

8.UnconstrainedBox对SizedBox也有取消作用

9.Scrollbar不是ScrollView；ListView【ScrollView子类】内部的ListView必须外面包一层具体height的容器；或者将这个内部ListView的shrinkWrap: true

10.flutter没法在局部容器里实现css的fixed，flutter里要实现绝对定位目前查到的还是得用Stack+Positioned，Stack的面积大小取决于它最大的那个子元素；所以Stack是一定有面积的除非所有子元素都是空面积；然后最大的一点不能在局部Stack里实现fixed的原因是Positioned定位的位置如果超过了Stack的面积范围【跑其他元素上了】就会被其他元素给遮蔽看不见，因此要实现fixed其实就是要求页面第一个有面积的元素就必须是Stack才行；

11.可以用FractionallySizedBox(heightFactor: .5, widthFactor: .5, child: Container(color: Colors.deepOrange,)来实现设置容器的长宽是父元素的一半（按比例）；

也可以通过这种方式来实现：（LayoutBuilder可以获取到父元素的最大大小，大多数情况下最大大小就是父容器的大小但是父容器是LimitedBox等的时候则不是）

LayoutBuilder(
                  builder: (context, constraints) {
                    return UnconstrainedBox(
                        child: Container(
                            color: Colors.deepOrange,
                            height: constraints.maxHeight / 2,
                            width: constraints.maxWidth / 2));
                  },
                )

12.flutter离线创建项目：flutter create --offline demo01【但是目前还没有发现怎么禁止flutter访问github，它要超时后才会开始创建项目（解决方法是连线环境机/无法连flutter网的机器里不要配置任何flutter的环境变量，比如PUB_HOSTED_URL【添加path变量除外】）】，然后再进入项目用flutter pub get --offline；然后就可以flutter run -d chrome来运行了；