Flutter、Dart学习总结
-
Container
添加 padding, margins, borders, background color, 或将其他装饰添加到widget
-
Scaffold
使用Scaffold是最容易的，它是 Material Components库中的一个widget，它提供了一个默认banner，背景颜色，并且具有添加drawer，snack bar和底部sheet的API
-
DefaultTextStyle
DefaultTextStyle.merge可以允许您创建一个默认的文本样式，该样式会被其所有的子节点继承
-
maxCrossAxisExtent
GridView.extent中maxCrossAxisExtent的作用
-
SizedBox
能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效
new SizedBox(
width: 100.0,
height: 100.0,
child: Container(
width: 200.0,
height: 200.0,
color: Color(0xffff0000),
),
)
-
State状态管理
- 如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父widget管理
- 如果所讨论的状态是有关界面外观效果的，例如动画，那么状态最好由widget本身来管理
- 如果有疑问，首选是在父widget中管理状态
-
flutter的Key
Flutter-->何时需要使用到key？
flutter 中的 key
-
flutter的json转为实体类插件（Android Studio插件）
AS中搜索插件FlutterJsonBeanFactory，安装，重启AS。
在指定目录下，右键，new - dart bean class File From JSON，粘贴进json，格式化，生成即可。
路径
-
dart中export使用
在A库中使用export关键字引入B库，当我们使用A库的时候，会自动引入B库，也就是说我们导入了A库，就可以使用B库了。
-
cupertino下push的同时，隐藏tabbar
Navigator.of(context, rootNavigator: true)
.push(CupertinoPageRoute(builder: (BuildContext context) {
return new MsgCenterPage();
}));
-
flutter使用16进制色值
Color(0xFFFF8A65)其中0x后面的两位FF表示透明度16进制，FF后面为色值
-
flutter获取屏幕宽高和状态栏高度
/** 获取屏幕宽度 */
static double getScreenWidth(BuildContext context) {
return MediaQuery.of(context).size.width;
}
/** 获取屏幕高度 */
static double getScreenHeight(BuildContext context) {
return MediaQuery.of(context).size.height;
}
/** 获取系统状态栏高度 */
static double getSysStatsHeight(BuildContext context) {
return MediaQuery.of(context).padding.top;
}
-
GestureDetector为布局添加手势，child和空白区域全部可点击
GestureDetector的child添加为Container，同时Container要设置color，整体Container的child和空白区域才全部可点击，否则则是Container的child可点而空白不可点击。
-
隐藏键盘
FocusScope.of(context).requestFocus(FocusNode());
-
dynamic的使用
在数据解析过程中，如果不确定当前类型的话，可以使用dynamic来代替，具体是某个类型的话，再转为某个类型。
@JsonSerializable()
class ResultData extends Object {
@JsonKey(name: 'code')
String code;
@JsonKey(name: 'data')
dynamic data;
@JsonKey(name: 'url')
String url;
@JsonKey(name: 'message')
String message;
ResultData(this.code,this.data,this.url,this.message,);
factory ResultData.fromJson(Map<String, dynamic> srcJson) => _$ResultDataFromJson(srcJson);
Map<String, dynamic> toJson() => _$ResultDataToJson(this);
}
-
flutter延迟执行
new Future.delayed(Duration(seconds: 2), () {
Navigator.of(context).pop();
});
-
flutter中url中编码解码
例如：需要将
js://iOSAction?%7B%22method%22:%22toLogin%22%7D
转为
js://iOSAction?{"method":"toLogin"}
使用Uri的decode方法：
String url = Uri.decodeFull(navigation.url);
相反，编码的话，使用Uri的encode方法。
-
flutter的图片布局填充满父布局
方法一：
new ConstrainedBox(
constraints: new BoxConstraints.expand(),
child: new FadeInImage.assetNetwork(
placeholder: "assets/home/placeholder_default.png",
image: model != null
? "${APIConfig.pictureURL}"
"${model.pictureUrl}"
: null,
fit: BoxFit.fill,
),
),
方法二：
如果已知宽高，Image里直接定义指定的宽和高
MediaQuery.of(context).size.width
MediaQuery.of(context).size.height
-
Text超出省略号截断
TextOverflow.ellipsis
new Text(
'我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门，我爱北京天安门',
overflow: TextOverflow.ellipsis,
),
-
list通过map转化的时候获取index
list通过asMap转为Map，然后使用Map.map获取index。
homeNoticeList
.asMap()
.map((index, model) => MapEntry(
index,
new GestureDetector(
onTap: () {
logPrint(index, message: "我点击了滚动的广告");
},
child: new Container(
color: ColorConfig.white,
child: new Align(
alignment: Alignment.centerLeft,
child: new Text(
model.title,
style: new TextStyle(fontSize: 14.0),
overflow: TextOverflow.ellipsis,
),
),
),
),
))
.values
.toList();
-
Cookie管理
网络请求使用dio进行网络请求，可以添加cookiemanager拦截器，来对cookie进行自动管理，也可手动删除cookie。
Flutter中添加依赖
dio: ^2.1.7 # 网络请求
cookie_jar: ^1.0.0 # cookie管理
dio请求封装中，添加拦截器：
// 添加`Cookie`管理
dio.interceptors.add(CookieManager(CookieJar()));
然后在request的headers中会自动增加
cookie: SESSION=9d41c3e9-5619-492f-aa92-d85add6b04ed
与iOS的moya cookie不一样，一个是cookie，一个是"Set-Cookie"（header中拼入）：
["Set-Cookie":SESSION=9d41c3e9-5619-492f-aa92-d85add6b04ed]
-
Appbar中使用自定义的返回按钮
先设置automaticallyImplyLeading为false，然后在leading中设置返回按钮。
automaticallyImplyLeading: false,
leading: new GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: new Image.asset('assets/common/nav_back_arrow.png'),
),
-
设置appbar高度
appBar: new PreferredSize(
child: appBar,
preferredSize: Size.fromHeight(44),
),
-
使用
webview_flutter时执行调用js的方法：
推荐在onPageFinished里调用。
例如：
onPageFinished: (String url) {
print("page finished loading: $url");
setState(() {
isLoading = false;
});
// 如果为项目风险等级的url，则执行隐藏header的js。
if (widget.url == ContentConfig.projectRiskLevel) {
_controller.future.then((controller) {
controller
.evaluateJavascript('hideHeader();')
.then((result) {});
});
}
}
-
android studio中使用print打印，只能打印出一部分的解决办法：
导入foundation库：
import 'package:flutter/foundation.dart';
使用flutter里foundation中的debugPrint打印即可打印全部。
-
TabBar对应的TabController使用代码切换tabBar (index从0开始)：
controller.animateTo(index);
-
flutter富文本RichText使用
-
复制到粘贴板
import 'package:flutter/services.dart';
static copyToClipboard(final String text) {
if (text == null) return;
Clipboard.setData(new ClipboardData(text: text));
}
-
返回当前的时间戳
static int currentTimeMillis() {
return new DateTime.now().millisecondsSinceEpoch;
}
-
返回文件大小字符串
static const RollupSize_Units = ["GB", "MB", "KB", "B"];
/** 返回文件大小字符串 */
static String getRollupSize(int size) {
int idx = 3;
int r1 = 0;
String result = "";
while (idx >= 0) {
int s1 = size % 1024;
size = size >> 10;
if (size == 0 || idx == 0) {
r1 = (r1 * 100) ~/ 1024;
if (r1 > 0) {
if (r1 >= 10)
result = "$s1.$r1${RollupSize_Units[idx]}";
else
result = "$s1.0$r1${RollupSize_Units[idx]}";
} else
result = s1.toString() + RollupSize_Units[idx];
break;
}
r1 = s1;
idx--;
}
return result;
}
-
flutter调起拨打电话
import 'package:url_launcher/url_launcher.dart';
Future<void> _launched;
Future<void> _makePhoneCall(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
// 调起拨打电话
setState(() {
_launched = _makePhoneCall('tel:18612345678');
});
-
垂直分割线
Container(
height: 40,
child: VerticalDivider(color: Colors.red),
),
