README.md 5.9 KB
sport
A new Flutter project.
图片的放置
- 先在
pubspec.yml中声明assets位置，因为flutte没有预先定义的文件结构
// pubspec.yaml
assets:
- assets/img
- 假如需要放置2.x,3.x的图片的时候
assets:
- assets/2.0x/image
- assets/img # Base 1.0
- 加载本地图片AssetImage
return AssetImage()
Widget build(BuildContext context){
return Image.asset("loacl_url");
}
placeholder(占位符)
transparent_img 插件 能从本地 内存 中加载placeholder
cached_networt_image
从本地中加载缓存的图片
Icon
可以用 material_icon
ListView.builder(itemLength,itemBuilder) 动态创建的List
customScrollView
SliverAppBar 与CustomScrollView、NestedScrollView集成的材质设计应用栏
統一的滚动效果
stateLessWidget 什么情况会被调用
- widget 插入树中
- widget的父级更改配置的时候
- 当它依赖的inheritedWidget 发生变化的时候
progressIndicator 菊花loading
Builder是提升性能的关键 setState会重新绘制 但是 Builder不会
Future(Context,AsyncSnapshot)
- AsyncSnapshot
- 有两个属性 connectionState （none，waiting active done）
- data 最新的数据
- error 接受的错误的对象
- hasData
- hasError
- 有两个属性 connectionState （none，waiting active done）
- data 最新的数据
- error 接受的错误的对象
- hasData
- hasError
## 生成器返回的格式没有问题
- 因为返回的不是JSON格式 所以 格式化起来有点麻烦
shared_preferences 异步Key-Value的 存储
列表优化 listView_builder 长列表 短列表 listView
性能分析
- flutter run --profile
项目目录
lib
assets # 资源文件
bean # 基础实体类
constant # 常量
model # v-model
pages # 具体的页面
router # 路由
services # 服务
store # 数据中心
utils # 工具类库
widgets # 通用widgets
changeNotifyProvider Prodiverbuilder 两种不同的实现Provider的情况
// Container(
// child: ProviderWidget<GameVideoListModel>(
// builder: (context, model, builder) {
// _initializePlay(model.list[0].videoUrl);
// return FutureBuilder(
// future: _initializeVideoPlayerFuture,
// builder: (context,snapshot){
// return ListView.builder(itemBuilder:(context,index){
// return VideoItem(controller: _controller);
// },shrinkWrap: true,);
// },
// );
// },
// onModelReady: (m) => m.initData(),
// ),
// )
hassize 没有高度 或者是 不够撑开高度
Expand 不能包着 Expand ?
postition 可以设置 负距离 但是需要 Stack 设置overflow ： visible
json to dart 需要手动修改一下一些冲突的名字 或者是 as 的别名作为包名
EdgeInsets
- fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
- all(double value) : 所有方向均使用相同数值的填充。
- only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
- symmetric({vertical, horizontal})：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
获取当前时间戳
- DateTime.now().millisecondsSinceEpoch
布局容器
Container
- child
- padding: EdgeInsets.all(18.0)
- margin: EdgeInsets.all(44.0)
- width
- height
- alignment: Alignment.center 子 Widget 居中对齐
- decoration Container 样式 BoxDecoration
IntrinsicHeight
当我们使用行（row）的时候，子组件常常因为高度的不同，导致各个子组件里面的内容不能对齐。这个时候我们可以使用IntrinsicHeight来保持row中各个子组件高度一致，从而便于纵向居中对齐。
new IntrinsicHeight( child: new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ new Container(color: Colors.blue, width: 100.0), new Container(color: Colors.red, width: 50.0,height: 50.0,), new Container(color: Colors.yellow, width: 150.0), ], ), );Row
- mainAxisAlignment：主轴布局方式，row主轴方向是水平方向
- crossAxisAlignment: 交叉轴的布局方式，对于row来说就是垂直方向的布局方式
java //一行3个控件，要平分放 mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.max, //交叉轴的布局方式，对于column来说就是水平方向的布局方式 crossAxisAlignment: CrossAxisAlignment.center, //就是字child的垂直布局方向，向上还是向下 verticalDirection: VerticalDirection.down, children: <Widget>[ Text('我是第1个'), Text('我是第2个'), Text('我是第3个'), ],
Column
Center
Padding
- padding: const EdgeInsets.all(8.0),
Stack
Positioned
- left
- top
- right
- bottom
Spacer
顾名思义只是一个间距控件，可以用于调节小部件之间的间距，它有一个flex可以进行设置
Expanded
Expanded会尽可能的充满分布在Row, Column, or Flex的主轴方向上
Flexible
Flexible也是为小部件提供空间的，但是不会要求子空间填满可用空间
Offstage 控件的显示与隐藏
- offstage: true, //这里控制 当为true时控件隐藏
- child: Container(color: Colors.blue,height: 100.0,),
LinearProgressIndicator
- 可以使用SizedBox来设置高度与宽度
api 发起显示菊花
- request(context, () async { await api .postAddGame(widget.details.id, Random().nextDouble() * 100, (Random().nextDouble() * 40).toInt(), Random().nextInt(300), start) .catchError((err) {}); ToastUtil.show("提交信息成功"); });