flutter干货集中营

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

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

  1. 自己下载的模拟器不能被vscode识别 , cd 到bin目录下 运行
nox_adb.exe connect 127.0.0.1:62001

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

  1. 自定义组件其实就是创建一个类
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

  1. 滑动侧边栏抽屉的实现
    先看代码
 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,

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,357评论 0 17
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0 0
  • 卷首语 欢迎来到 objc.io 的第三期! 这一期都是关于视图层的。当然视图层有很多方面,我们需要把它们缩小到几...
    评评分分阅读 1,755评论 0 18
  • “我虽然使你受苦,却不再使你受苦。”(鸿1:12) 受苦是有限度的。神能使你受苦,也能免去你受苦。读者啊,你岂不是...
    池上芙阅读 173评论 0 0
  • 他是得了抑郁症死的,虽然不明白他为何要自杀,但是他生前的一切都是值得人们同情的。 他叫郭建明,出生农村,...
    柯老师的笔记阅读 295评论 0 0