flutter开发

1、常用的快捷键 vetur插件
r 键 ：点击后热加载，也就算是重新加载吧。
R键：热重启项目。
p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
o 键：切换android和ios的预览模式。
q 键：退出调试预览模式。
2、Container容器组件

image.png

3、Text组件详解

image.png
4、图片组件详解
image.png
5、Flutter 列表组件
image.png
6、Flutter GridView网格布局组件
image.png
7、线性布局（Row和Column）
image.png

8、弹性布局（Flex Expanded）
Flex 组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用 Row 或 Column 会方便一
些，因为 Row 和 Column 都继承自 Flex ，参数基本相同，所以能使用Flex的地方基本上都可以使用
Row 或 Column 。 Flex 本身功能是很强大的，它也可以和 Expanded 组件配合实现弹性布局 。
9、层叠布局（Stack、Align、Positioned）
Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位
布局

image.png
Align 组件可以调整子组件的位置 , Stack组件中结合Align组件也可以控制每个子元素的显示位置。
Stack组件中结合Positioned组件也可以控制每个子元素的显示位置。
image.png
10、FlutterMediaQuery获取屏幕宽度和高度

Widget build(BuildContext context) {
final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height;
}

补充：double.infinity 和double.maxFinite可以让当前元素的width或者height达到父元素的尺寸
11、Flutter AspectRatio
AspectRatio的作用是根据设置调整子元素child的宽高比。
AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定
的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条
件，而忽略所设置的比率

image.png

12、Flutter Card组件
Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立
体感。

image.png
13、Flutter 按钮组件
image.png
ButtonStylee里面的常用的参数
image.png
14、Flutter Wrap组件
Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，单列的Wrap则跟Column表现几乎一致。但
Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上
去扩展显示。
image.png

15、Flutter StatelessWidget 、StatefulWidget
在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget。
StatelessWidget是无状态组件，状态不可变的widget
StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变。
通俗的讲：如果我们想改变页面中的数据的话这个时候就需要用到StatefulWidget
16、Scaffold属性BottomNavigationBar 自定义底部导航
BottomNavigationBar 是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是
Scaffold组件的参数。

image.png
17、Scaffold属性FloatingActionButton实现类似闲鱼App底部导航凸起按钮
FloatingActionButton简称FAB ,可以实现浮动按钮，也可以实现类似闲鱼app的底部凸起导航
image.png