flutter干货集中营

// 下一步学习计划
RxDart // fish-Redux// dart 语言中的 stream/ isloate 深刻理解源码分析。

flutter run 手机卡死的话，可以开一个热点，电脑连上。

2. 自己下载的模拟器不能被vscode识别 ， cd 到bin目录下 运行

nox_adb.exe connect 127.0.0.1:62001

3.重要
在终端按一下P键，会出现模拟器网格
r键 ： 点击后热重载，
0键 ： 切换android 和iOS的预览模式
q键：推出调试预览模式。

4. 自定义组件其实就是创建一个类

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_getListDate(){
List 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

32. 滑动侧边栏抽屉的实现
    先看代码

 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,