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,

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容