快捷键
1. shift + alt + f 格式化代码
2. command + . 快速修复(小黄灯泡)
3. 选中属性 option + 回车 自动生成构造函数
4. alt + insert 快速创建构造函数
5. Ctrl + 减号 可以回到原来的位置
6. F12 快速跳转到定义
小技巧
1.flutter snippets 代码片段的扩展插件:(VSCode)
自定义代码片段:
1. 编辑器输入 >sni
2. 选中Preferences: Configure User Snippets
3. 选中dart.json(Dart)
2.清除编译缓存
终端命令输入: flutter clean
3.运行模拟器:
xcrun instruments -w 'iPhone Xʀ'
4.创建分支:
git breach 查看分支
git log —oneline 看一下做的提交,然后复制一下这次提交的id,基于它去创建一个新的分支
git checkout -b 新分支名 加上提交的id
git push 远程分支名 新分支名
5.vs创建一个新的组件来包装:
/// vs创建一个新的包装
选中控件右键>> Wrap with new widget
/// vs导入一个stream包
选中控件右键>>import library ‘dart:async’
/// vs给控件导入一个Column
选中控件右键>>Wrap with Column
6.启动真机
flutter run -d all
flutter run -d
flutter run --enable-software-rendering 热更新
开发中问题总结:
1. container居中对齐
Container(
alignment:Alignment.center //子部件居中对齐
)
2. .. 级联语法
..属性或方法 是一种建造者模式,返回的还是这个类实例
3. 添加中间tabBar圆角按钮
floatingActionButton:FloatingActionButton(),
floatingActionButtonLacation:FloatingActionButtonLocation,enterDocked,
bottomNavigationBar: BottomAPPBar(
4. 跳转传参
Navigator.of(context).push(MaterialPageRoute(builder:(BuilderContext context){
return EachView(‘new page’);
}));
5.用Expanded撑开剩余空间
Row(
children: [
Container( /// 此组件在主轴方向占据48.0逻辑像素
width: 48.0
),
Expanded(
flex:1,
child: Container() /// 此组件会填满Row在主轴方向的剩余空间，撑开Row
)
]
)
6.constraints: BoxConstraints.expand() ,
在Container里面添加constraints属性,它的值是BoxConstraints(盒子的限制:比如限制容器的最小或者最大的宽度与高度.)
BoxConstraints.expand(),会让容器占用所有可用的空间,相当于把容器的width与height值设为double.infinity
7. 必传参数
@required
8. flutter控制显示隐藏
/// 1.使用透明度实现显示隐藏
class TestBWidget extends StatelessWidget {
final bool visible;
//这里key是可选参数,添加key应该是为了提高性能
const TestBWidget({Key key, this.visible}) :super(key:key);
@override
Widget build(BuildContext context) {
return AnimatedOpacity(
duration: Duration(milliseconds: 300),
//通过控制透明度 进行设置隐藏显示 相当于invisible
opacity: visible?1.0 : 0.0,
child: new Container(
color: Colors.green,
height: 100.0,
child: new Center(
child: new Text('TestWidget'),
),
),
);
}
}
/// 2.使用offstate
class TestCwidget extends StatelessWidget {
final bool visible;
const TestCwidget({Key key,this.visible}) :super(key:key);
@override
Widget build(BuildContext context) {
return new Offstage(
//通设置offstate进行控制Widget在tree中的显示和隐藏 相当于gone
offstage: visible,
child: new Container(
color: Colors.orange,
height: 100.0,
child: new Center(
child: new Text('TestCWidget'),
),
)
);
}
}
9.水平方向展开
child: FractionallySizedBox(//这个组件可以撑满容器宽度
widthFactor: 1,//设置宽度撑满
child:
//垂直方向展开
Expanded(
child:
10. 颜色使用16进制
Color(int.parse('0xff' + customColorStr)),
11. 可以设置圆角的组件
return PhysicalModel(
color: Colors.transparent,
borderRadius: BorderRadius.circular(6),
clipBehavior: Clip.antiAlias,
child: Column(
children: _gridNavItems(context),
),
);
12. 裁切数组
list.sublist(0, separate),//裁切数组(起点,终点)
13. 获取屏幕的宽度
MediaQuery.of(context).size.width ,
14. 带placeholder的image
FadeInImage.assetNetwork(placeholder:'images/main_head.png',image: imgUrl,fit: BoxFit.cover,)
15. 禁止刷新该组件
rebuildOnChange: false,//即使有变化也不会重建CounterModel小部件
16. 监听页面即将退出
onWillPop 就表示当前页面将退出
17. TextField设置只读不可编辑
TextField(
enableInteractiveSelection: false,
onTap: () { FocusScope.of(context).requestFocus(new FocusNode()); },
)
18.以下设置在不可编辑的同时，也无法响应点击事件
TextField(
enable: false,
)
19. 总结一些意外
// 路由开启下一个页面的，后退黑屏问题
当Navigator.push开启下一个页面，这个页面Navigator.pop(context)回到上一个页面出现黑屏，把当前页面的MaterialApp去掉就好
// 弹软键盘，布局随键盘顶上去问题
在Scaffold加属性resizeToAvoidBottomPadding: false
弹软键盘，iOS关闭不了软键盘
// 在布局外层包裹一层点击事件
InkWell(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: child
)
20. 点击空白处取消TextField焦点
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
// 触摸收起键盘
FocusScope.of(context).requestFocus(FocusNode());
},
child: *******
}
21. 分解数组
children: _expansionPanelItems.map(
(ExpansionPanelItem item) {
return ExpansionPanel(
isExpanded: item.isExpanded,
body: item.body,
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
padding: EdgeInsets.all(16.0),
child: Text(
item.headerText,
style: Theme.of(context).textTheme.title,
),
);
},
);
}
).toList(),
22. list中查找复合要求的对象
Data cc = onValue.data.where((item)=>item.name=='$chooseName').first;
23. Warp来实现flex布局
Warp(//可以实现类似n行图片展示的效果
spacing: 5,
runSpacing:5,
children:
)
24. ListTitle
ListTitle(
leading:Icon(),
title:Text(),
onTap:(){}
)
25. 滚动视图-SingleChildScrollView
SingleChildScrollView(//加滚动视图,防止键盘弹出时越界
26. dio请求过程
void _choiceAction(){
print('开始选择美女类型...');
if (typeController.text.toString()=='') {
showDialog(
context: context,
builder: (context)=>AlertDialog(title: Text('美女类型不能为空'),)
);
} else {
getHttp(typeController.text.toString()).then((onValue){
setState(() {
showText = onValue['data']['name'].toString();
});
});
}
}
Future getHttp(String typeText) async{
try {
Response response;
var data = {'name':typeText};//参数
const httpHeaders = {'key':'value'};//请求头
Dio dio = new Dio();
dio.options.headers = httpHeaders;
response = await dio.get('path',queryParameters: data);
return response.data;
} catch (e) {
return print(e);
}
}
27. 保持页面的数据不销毁
AutomaticKeepAliveClientMixin 是一个抽象状态，使用也很简单，我们只需要用我们自己的状态继承这个抽象状态，并实现 wantKeepAlive 方法即可。
继承这个状态后，widget在不显示之后也不会被销毁仍然保存在内存中，所以慎重使用这个方法。
28.设置container的边框
Container(
alignment:Alignment.center,//对齐方式
decoration: BoxDecoration(
color: Colors.white,
border:Border(//设置底部边框
bottom: BorderSide(width:0.5 ,color:Colors.black12)
)
),
)
29.设置等待风火轮
return Center(child: CircularProgressIndicator(),);
30.返回一个不可修改的List或Map
UnmodifiableListView get list => UnmodifiableListView(_list);//返回一个不可修改的List,也就是只读List
//同理UnmodifiableMapView
31.Flexible，Expanded,Spacer这三个小控件用于Row, Column, or Flex这三个容器
Spacer
顾名思义只是一个间距控件，可以用于调节小部件之间的间距，它有一个flex可以进行设置；
Expanded
Expanded会尽可能的充满分布在Row, Column, or Flex的主轴方向上；
Flexible
Flexible也是为小部件提供空间的，但是不会要求子空间填满可用空间；
// 小记: flutter控件Flexible和 Expanded的区别