1、FadeInImage :加载网络图片,添加站位图。
child: new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: url,
),
2、ListView.builder和ListView
当界面较多的时候,使用ListView.builder,少量使用ListView。
3、future
在flutter中经常会用到异步任务,dart中异步任务异步处理是用Future来处理。
4、弹框Toast
5、自定义按钮、界面
build
6、全局获取参数
GlobalKey
7、网络请求
HTTPRequest第三方
Get /Post 以及数据的拼接
8、界面跳转的传值
第三方:flutterBoost
界面添加全局map,在调用界面的时候调用。
9、枚举
enum Toast { LENGTH_SHORT, LENGTH_LONG }
10、SafeArea、Material
1、刘海区域不是我们所触发按钮的区域,我们可以使用SafeArea Widget来很好的解决这个问题。
11、ListView和column的区别
ListView布局中,子元素会占据整个一行,占满整个宽度。
Column则是子元素多宽,自身就多宽。
12、Positioned、Expanded
Expanded:包裹row、column,可填充空白的区域,子视图可设置比例flex。
Positioned:为绝对布局组件,提供了 left、top、right、bottom 四个属性来进行布局定位。
13、CircularProgressIndicator进度指示器
14、延时执行
await Future.delayed(Duration(milliseconds: 10000));
延时执行10s
15、CustomScrollView
CustomScrollView就像一个粘合剂,将多个组件粘合在一起,具统一的滚动效果。Sliver系列组件有很多,比如SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。
在实际业务场景中经常见到这样的布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动的时候做为一个整体,此场景是无法使用GridView+ListView来实现的,而是需要使用CustomScrollView+SliverGrid+SliverList来实现。
知识点链接
16、原因很简单,Container的color属性和decoration属性不能同时出现,因为decoration里面也有color属性。将color放到decortaion里面即可
17、WidgetSpan
图文混排,配合Text.rich使用
:https://zhuanlan.zhihu.com/p/112947562
18、flutter知乎经验总结
大神知乎总结
19、RichText和TextSpan
- RichText:如果想在一句话或者一段文字里面显示不同样式的文字,可以使用RichText。
Container(
child: RichText(
text: TextSpan(
text: "12:00",
style: TextStyle(color: Colors.red, fontSize: 12, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: "前下单,预计今天(06月26日)送达,受道路封闭影响,您的订单可能会有所延迟,我们将尽快为您送达,请您耐心等待",
style: TextStyle(color: Colors.black87, fontSize: 12, fontWeight: FontWeight.bold)),
])),
)
- TextSpan:用于指定文本片段的风格及手势交互
- WidgetSpan:在文本中内嵌固定大小Widget。
child: Text.rich(TextSpan(
children: [
WidgetSpan(child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(4),
),
width: 40,
height: 18,
child: Text(
"自营",
style: TextStyle(fontSize: 10, color: Colors.white),
),
)),
WidgetSpan(
child: Container(
width:5,
)),
TextSpan(
text: goodDetailsModel.title.length > 0 ? "${goodDetailsModel.title}" : "",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black87,
)),
],
))
详细见下图:
20、Card
其实就是 Container 带了一个默认的圆角和阴影,没有太多属性。
21、chip标签
左边图片、右边文字,有着多种形式
chip学习地址
child: Chip(
labelPadding: EdgeInsets.only(left: 0),
backgroundColor: Colors.transparent,
avatar: Icon(
Icons.check_circle_outline,
size: 18,
),
label: Text(
value["title"],
style: TextStyle(
fontSize: 10,
color: Colors.red,
),
),
),
),
22、遍历数组中的value和index
1、遍历出来索引值,然后从索引值里面找到对应的值,主要用于需要传递多个数组的数据。
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: nameList.asMap().keys.map((item) {
String titleStr = nameList[item];
String detailStr = detailList[item];
return Column(
children: [
_romotionItem(titleStr, detailStr),
SizedBox(height: 5,),
],
);
}).toList(),
)
2、直接取出数组里面的值。
children: this._services.map((value) {
return Container(
height: 30,
child: InkWell(
onTap: (){
print('打印出来的数据为:'+value["title"]);
},
);
}).toList(),