asahi/rikako-note
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

daily commit

Browse Source
This commit is contained in:
Rikako Wu
2022-04-08 13:15:24 +08:00
commit 9c7abe3c23
5 changed files with 367 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
flutter/flutter.md Normal file
View File

@@ -0,0 +1,42 @@
# Flutter
* ## Flutter结构：
* Flutter的UI界面由Widget来构成，每当构成界面的Widget状态发生改变，那么其将会对Widget构成的UI进行重新渲染
* 为了创建一个Flutter应用，仅需调用runApp方法并且向其中传入一个Widget即可，传入的Widget将会成为Widget树中的根节点
* ## Flutter中的基础Widget
* ### Text：Text Widget用来表示一组具有同一样式的文本
* ### Row：用来构造水平布局
* 要想使用水平布局，可以向Row的children属性中传入一个Widget的List，如果想要子Widget扩展去尽可能的填充可以获取的垂直控件，可以将子Widget用Expanded包裹
* ### Column： 类似于Row，用来构建垂直布局
* ### Stack布局：Stack布局可以将children属性中的Widget集合重叠起来，默认左上角对齐。Stack中的Wdiget按先后顺序进行绘制，位于第一的Wiget会被绘制到最底层，后面的元素依次覆盖前一个元素。
* Stack中可以由Positioned元素和non-Positioned元素，Positioned元素由Positioned Widget包裹，可以指定其在Stack中相对Stack的位置，而不是默认左上角对齐
* ### Container：创建一个可见的矩形区域，可以通过BoxDecoration来指定Container的边框样式、背景颜色等
* ### 可以通过MaterialApp和Scaffold等组件来构建Material Design的APP
* ## 处理用户的手势
* 通过用GestureDetector包裹Widget可以检测用户的手势，并为onTap等手势创建回调函数
* ## StatefulWidget
* 相比较于StatelessWidget，StatefulWidget可以维护状态信息
* StatefulWidget的使用：
* StatefulWidget子类通过覆盖createState方法可以维护一个State对象来存储状态信息
* 在State对象中，
* 通过覆盖State对象的build方法，返回一个Widget对象来显示StatefulWidget的UI
* 每次对State中维护的状态进行修改时，都要调用setState方法，并且传入一个函数
* 每次调用setState方法时，都会重新调用build方法来对StatefulWidget的UI进行重新渲染
* ## Flutter中的布局
* Row和Column：通常用于创建行和列的布局
* mainAxisAlignment/crossAxisAlignment：用于控制主轴和交叉轴如何对其元素
* 当Widget太大而超出布局时，可以通过为Widget外层套一个Expand来让其适应行或者列布局
* 如果在行或者列布局中，想要一个widget的弹性布局空间是其他兄弟widget的2倍，可以设置Expand的flex属性为2。flex属性默认值是1.
* 默认情况下，行或列布局会沿着主轴尽量的占据空间。如果要将子项目尽量贴合在一起，可以使用mainAxisSize属性，将其设置为mainAxisSize.min
* 标准widget
* Container：类似于html中的div，可以为widget增加padding、margin、borders、background color或者其他的装饰
* GridView：将widget作为二位列表显示，有两种方式来创建GridView
* GridView.extent：通过指定单元格的最大宽度
* GridView.count：指定列的数量
* ListView：当内容过多时会自动的支持滚动
* Stack：Stack布局会将children中位于后面的Widget覆盖到位于前面的Widget之上
* Material Widget
* Card：通过将Widget设置为Card的child，可以添加圆角和阴影的效果
* ListTile：用于显示行信息，具有如下属性：
* title：为行指定title信息
* subtilte：为行指定附加信息，如果isThreeLine为false，subtitle不能换行，如果为true，subtitle可以为两行
* leading：为行定义icon