flutter-开发总结
### 上拉加载下拉刷新
```
import 'dart:async';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_easyrefresh/bezier_hour_glass_header.dart';
import 'package:flutter_easyrefresh/bezier_bounce_footer.dart';
import 'package:flutter_smart_park/widget/refresh/emptyWidget.dart';
List list = [];
GlobalKey<EasyRefreshState> _easyRefreshKey = new GlobalKey<EasyRefreshState>();
GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>();
GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>();
new EasyRefresh(
key: _easyRefreshKey,
autoLoad: true, //自动加载
autoControl: false, //自动控制
firstRefresh: true, //首次加载
firstRefreshWidget: null,
refreshHeader: BezierHourGlassHeader(
key: _headerKey,
color: Theme.of(context).scaffoldBackgroundColor,
),
refreshFooter: BezierBounceFooter(
key: _footerKey,
color: Theme.of(context).scaffoldBackgroundColor,
),
child: new text('data'),
emptyWidget: new EmptyWidget(),
onRefresh: () async {
List a = [];
for (var i = 0; i < 10; i++) {
a.add(i);
}
new Timer(new Duration(seconds: 2), () {
setState(() {
list.clear();
list.addAll(a);
});
_easyRefreshKey.currentState.callRefreshFinish();
});
},
loadMore: () async {
List a = [];
for (var i = 0; i < 10; i++) {
a.add(i);
}
new Timer(new Duration(seconds: 2), () {
setState(() {
if (list.length < 20) {
list.addAll(a);
print(list.length);
}
});
_easyRefreshKey.currentState.callLoadMoreFinish();
});
},
),
```
### 底部导航
```
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
],
currentIndex: _selectedIndex,
fixedColor: Colors.deepPurple,
onTap: _onItemTapped,
),
```
### listView 列表
```
new ListView.builder(
scrollDirection: Axis.horizontal, //横向
shrinkWrap:true, // 自动高度
physics: NeverScrollableScrollPhysics(), // 禁止滚动
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
},
),
```
### text 文本
```
Text(
"Hello world "*6, //字符串重复六次
textAlign: TextAlign.center, //对齐方式
overflow: TextOverflow.ellipsis, // 文本溢出
maxLines: 3, // 最多显示的行数
textScaleFactor: 1.5,
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
background: new Paint()..color=Colors.yellow,
decoration:TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
),
);
// 一行文字多种样式
Text.rich(
TextSpan(
children: [
TextSpan(
text: "Home: "
),
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(
color: Colors.blue
),
),
]
),
)
```
### Container容器
```
new Container(
alignment: Alignment.center, //对齐方式
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.lightBlue, Colors.greenAccent, Colors.purple],
begin: FractionalOffset(0, 0),
end: FractionalOffset(1, 1),
),
border: Border.all(
width: 2.0,
color: Colors.red,
),
image: DecorationImage( // 背景图片
image: AssetImage('assets/images/parkingbg.png'), //本地
centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
),
```
### Image图片
BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain:全图显示，显示原比例，可能会有空隙。
BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。
```
new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
scale:1.0,
fit:BoxFit.cover,
olorBlendMode: BlendMode.darken, //图片混合模式
repeat: ImageRepeat.repeat, //图片重复
),
CachedNetworkImage(
imageUrl: 'https://pro.modao.cc/uploads4/images/3089/30894737/v2_pnb2pb.png',
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
fit: BoxFit.cover,
width: ScreenUtil().setWidth(130),
height: ScreenUtil().setWidth(90),
),
```
### GridView网格列表组件
```
new GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
childAspectRatio: 0.7
),
children: <Widget>[
new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
],
)
new GridView.builder(
shrinkWrap: true,
physics: new NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, //一行多少列
mainAxisSpacing: ScreenUtil().setWidth(LqruiStyle.borderWidth), //y轴距离
crossAxisSpacing:
ScreenUtil().setWidth(LqruiStyle.borderWidth), //x轴距离
childAspectRatio: 1.4, //框的比列
),
itemCount: homeIcon.length,
itemBuilder: (BuildContext context, int index) {
<!-- 内容 -->
},
),
```
### Column垂直布局
```
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
)
```
### Row横向布局
```
new Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text('I am JSPang'),
)
Text('my website is jspang.com'),
Text('I love coding')
],
)
```
### Stack层叠布局
```
var stack = new Stack(
alignment: const FractionalOffset(0.5, 0.8),
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.lightBlue,
),
padding: EdgeInsets.all(5.0),
child: new Text('JSPang 技术胖'),
),
new Positioned(
bottom:10.0,
right:10.0,
child: new Text('技术胖'),
),
],
);
```
### Card卡片组件布局
```
new Card(
child: Column(
children: <Widget>[
ListTile(
title:new Text('吉林省吉林市昌邑区',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('技术胖:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
ListTile(
title:new Text('北京市海淀区中国科技大学',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('胜宏宇:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
ListTile(
title:new Text('河南省濮阳市百姓办公楼',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('JSPang:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
],
),
);
```
### 路由
```
import 'package:fluro/fluro.dart';
import 'package:flutter_smart_park/routes/routes.dart';
Routes.router
.navigateTo(context, '${Routes.xxx}?id=1',
transition: TransitionType.inFromRight)
.then((result) {
print(result);
});
Routes.router.navigateTo(
context,
'${Routes.userSignUp}',
transition: TransitionType.inFromRight,
);
Navigator.of(context).pop();
```
### 文本左右布局
```
Widget page(title, text) {
return new Container(
margin: EdgeInsets.only(top: ScreenUtil().setWidth(10)),
child: Row(
children: <Widget>[
Expanded(
child: Text(
'$title',
style: TextStyle(
color: Color(LqruiStyle.colorText2),
fontSize: ScreenUtil().setSp(14),
),
),
),
Expanded(
flex: 0,
child: Text(
'$text',
style: TextStyle(
fontSize: ScreenUtil().setSp(14),
),
),
),
],
),
);
}
```
### 文本默认样式
```
new DefaultTextStyle(
//1.设置文本默认样式
style: TextStyle(
color:Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("hello world"),
Text("I am Jack"),
Text("I am Jack",
style: TextStyle(
inherit: false, //2.不继承默认样式
color: Colors.grey
),
),
],
),
);
```
### 页面加载事件
```
@override
void initState() {
super.initState();
print('111111111111111111111111111');
}
```
### 输入法弹起导致容器越界
```
1. 包一层SingleChildScrollView
2. 设置Scaffold resizeToAvoidBottomPadding: false,
```
### 切换后页面状态的保持
```
// 子页面
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive =>true;
}
// 使用 IndexedStack
new IndexedStack(
index: currentIndex,
children: tabBodies
)
```
### 点击事件
```
new GestureDetector(
child: new Text("忘记密码"),
onTap: () => {}, //点击
onDoubleTap: () => {}, //双击
onLongPress: () => {}, //长按
),
```
### 输入框
```
Container(
child: TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
hintText: "电子邮件地址",
prefixIcon: Icon(Icons.email),
border: InputBorder.none //隐藏下划线
)
),
decoration: BoxDecoration(
// 下滑线浅灰色，宽度1像素
border: Border(bottom: BorderSide(color: Colors.grey[200], width: 1.0))
),
)
Theme(
data: Theme.of(context).copyWith(
hintColor: Color(LqruiStyle.dividerColor), //定义下划线颜色
inputDecorationTheme: InputDecorationTheme(
labelStyle:
TextStyle(color: Colors.grey), //定义label字体样式
hintStyle: TextStyle(
color: Colors.grey, fontSize: 14.0) //定义提示文本样式
),
),
child: Form(),
),
```
### 圆角容器
```
new ClipOval( //默认全圆角
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
new ClipRRect( //自定义
borderRadius: BorderRadius.circular(50)
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
// shape属性
new Container(
width: 72.0,
height: 72.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
Utils.getImgPath('ali_connors'),
),
),
),
)
```
### 下拉框
```
DropdownButtonHideUnderline( //隐藏下划线盒子
child: DropdownButton(
items: items, //下拉菜单item点击之后的回调
hint: new Text('下拉选择你想要的数据'), //当没有默认值的时候可以设置的提示
value: widget.select, //下拉菜单选择完之后显示给用户的值
onChanged: widget.onChanged, //下拉菜单item点击之后的回调
elevation: 24, //设置阴影的高度
// isDense: true,
//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，
则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
isExpanded: true,
iconSize: ScreenUtil().setSp(30), //设置三角标icon的大小
),
);
```
### 单边框
```
decoration: BoxDecoration(
border: Border(
left: BorderSide(
width: ScreenUtil().setWidth(5),
color: Color(LqruiStyle.primaryColor),
style: BorderStyle.solid,
),
),
),
```
### 模拟器分辨率
```
414 736 154
360 640 160
```
### 状态栏去阴影
```
import 'dart:io';
import 'package:flutter/services.dart';
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.red,
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
appBar中 elevation: 0,
```
### 接收参数
```
final id;
final title;
ApplyReim({Key key, @required this.id, this.title}) : super(key: key);
```
### 子组件传参 => 父组件
```
// 父组件
var data;
void onDataChange(val) {
setState(() {
data = val;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ChildTwo(data4Two: data4Two, callback: (val) => onDataChange(val)), // 子组件
Container(
child: Column(
children: <Widget>[
Text('子组件2, 传过来的值: ' + '$data'),
]
),
)
],
),
);
}
// 子组件接收callback，并在某事件中触发 widget.callback(...要返回的数据...);
PhotoDetail({Key key, @required this.list, this.index}) : super(key: key);
```
### 监听Widget宽/高
```
import 'package:flustars/flustars.dart';
double cardHeight;
Builder(
builder: (BuildContext context) {
WidgetUtil widgetUtil = new WidgetUtil();
widgetUtil.asyncPrepare(context, true, (Rect rect) {
Rect rect = WidgetUtil.getWidgetBounds(context);
setState(() {
cardHeight = rect.height.toInt();
});
});
return ...;
}
)
```
### 进度条
```
LinearProgressIndicator(
backgroundColor: Color(0x42000000),
value: 10 / 30, // value值为null时为一个动画
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
```
### Text属性详解
