flutter-sport

sport

A new Flutter project.

图片的放置

1. 先在pubspec.yml中声明assets位置，因为flutte没有预先定义的文件结构

// pubspec.yaml
 assets:
   - assets/img

1. 假如需要放置2.x,3.x的图片的时候

assets:
 - assets/2.0x/image
 - assets/img       # Base 1.0 

1. 加载本地图片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

## 生成器返回的格式没有问题

• 因为返回的不是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("提交信息成功"); });