flutter干货集中营
// 下一步学习计划
RxDart // fish-Redux// dart 语言中的 stream/ isloate 深刻理解源码分析。
flutter run 手机卡死的话，可以开一个热点，电脑连上。
- 自己下载的模拟器不能被vscode识别 ， cd 到bin目录下 运行
nox_adb.exe connect 127.0.0.1:62001
3.重要
在终端按一下P键，会出现模拟器网格
r键 ： 点击后热重载，
0键 ： 切换android 和iOS的预览模式
q键：推出调试预览模式。
- 自定义组件其实就是创建一个类
class MyApp extend statelesswidget{
@override
Widget build(buildContext context){
return Center (child : Text("nihao ,textDirection :Textdirection.ltr"))
}
}
5 shift + R 会重新编译
6.materailApp 的属性 home、title、
color、 theme、routes。
7 scaffold 属性 appbar body drawer
8 theme 可以通过 ThemeData（）来定义
p ri ma r y S wa t ch: Colors.yellow
9.设置一下边框
Containner（
chi l d： Text（）
height： 300.0，
width： 300.0
decoration: BoxDecoration(
color :
border :Border.all (
color,
width,
)
)
）
10 . Text 0verflow 文本超出的时候的显示方式
11 margin 外边句 padding 那边句 ， transform，Matrix4.rotationZ(0.3); // 沿着Z轴旋转 translate 位移//diagnal 缩放
12 图片的混合属性 colorBlendMode ：改变图片的颜色 。
13 设置图片圆形的两种方法
clipoval （
child ： image（ fit ，）
）
或者
containar(
child ; image()
decaration : ()
)
14 本地图片的处理文 。。
建立一个文件夹 ，文件夹里面分别建立 三个文件夹 ，跟目录代表x, 2.0x , 3.0x
, 4.0x
引入每一张图片
assets:
- images/a.jpeg
- images//a.jpeg
- images//a.jpeg
15 ,垂直列表 -- 垂直图文列表 ，水平列表 ，动态 列表 ， 矩阵式列表。。
16 listViiew 组件
1 padding ，resolve // 是否反向排序 。
17 listTitle （title，subtitle,leading: Icon）
18 动态列表 ， children ： this._getListDate
List<Widget>_getListDate(){
List<Widget> list = new List();
for (var i = 0 ;i< 20;i++){
list.add(ListTiltle(title: Text("$i个")))；
}
return list;
}
或者
listView.builder(
itermCount: this.list.lenth,
itermBuild:(context,index){
return Widget.
}
)
19 网格布局 GridView。count 和 gridView.Build
网格布局的高度设置 childAspaceRatio // 设置宽高比
屏幕快照 2019-06-12 14.51.00.png
20 flutter中的flex 布局 Expanded组件
比例不一致的情况下
如果有两个widget，左侧给个固定宽度 ，右侧就自己适应 。
三个给两个固定的额，第三个自适应 。
利用这一特性可以 再使用sizeBox当padding 。
21 Stack组件的定位布局 ，
组件布局实际上一层一层重叠状态的
// 控制所有的组件的
属性alignment ： Alignment（1，1） // ,-1-1 (0,0)表示居中
// 单独设置每一个配合Align（）组件使用/ positioned/ left/bottom (一般是两个方位配合使用)。
屏幕快照 2019-06-12 16.39.32.png
22 子元素的宽高比组件AspectddRatio
常用属性 aspectddRatio
23 Card 卡片组件 。有圆角和阴影/间距
24 牛逼的Wrap组件 ，当row上不够的时候 扩展cloum
也是流布局的组件
屏幕快照 2019-06-12 17.05.41.png
25 改变显示的内容的时候 使用statuefullWidget()
需要更新内容的时候使用 setstatus()。
26 底部导航栏的简单配置
27 路由的设置
28 .在顶部设置tabbar
home ： DefaultTabController{
length
child : AppBar(
title
bottom : Tabbar
)
}
29 所有组件都是可以嵌套的 。
30 vscode 代码格式化快捷 shift + option + F
31 https://www.bilibili.com/video/av53072584/?p=20 顶部滑动菜单
（1）. 建立一个TapTabbarControllerPage statusdullStateWidget with SingleTickerPrividerStatus // 第二个继承使用他的方法
（2）在status初始化中
Tabcontroller _tabController;
@override
void initState(){
super
_tabControleler = new TabControllre{
vsync: this,
length : 2
}
}
_tabControlelr.addListender({
print(_tabController.index);
setState(){
};
});
// 使用
AppBar ( bottom : Tabbar (controller :this._tabControleler,tabs:Tab))
总结： 主要是Tab bar内部含有一个controller 属性可以传入一个控制器 ，这个控制器我们自定义使用TabController
- 滑动侧边栏抽屉的实现
先看代码
Scaffold(
drawer :Drawer(child: ，drawerheader{}) // 左侧
endDrawer : // 右侧
)
33 .一根线的组件 Divider（）
34 .背景图片设置
Doxdecoration(image: DecorationImage())
35快速侧边栏头组件 UserAccountsDrawerHeader
属性 decoration accountName accountEmail // 用户邮件 currentAccountPicture
36 头像组件 CircleAcvatar
37 .按钮组件的介绍
RaisedButton： 凸起按钮 ，android风常用 。
FlatButton 扁平化的按钮 /
OutLineButton 线框按钮 // 最简单的按钮没有背景设置
IconBUtton 图标按钮
ButtonBar 按钮组
FloatingActionButton 浮动按钮 / 可以充当tababr中间的大悬浮按钮
eelevation 代表阴影
设置按钮的宽度和高度在外层包含一个container
RaisedButton按钮可以同时设置图标和文字
按钮的onpress =null的时候按钮式不可点击的状态 。//可以利用
按钮可以直接用shap ：Roundshap设置圆角
splashColor : 设置水波纹效果颜色
28 如果一个app的风格固定了的话，我们可以吧常用的按钮格式给封装起来。每个页面都是用它
29//width: double.infinity. 占满容器 。
// 设置Column的方式
Column(
crossAxisAlignment: CrossAxisAlignment.start,
// SizedBox(height: 32.0), 添加占位块
// 构造函数
final Post post;
PostShow({
@required this.post,
});
//阴影偏移
elevation: 0.0,
