README.md 5.9 KB

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("提交信息成功"); });