flutter 属性记录

start

flutter doctor // 检测依赖
flutter packages get // 安装依赖
flutter run

终端热键

• r 键 点击后热加载。
• p 键 显示网格，可看布局情况。 很常用
• o 键 切换android 和 ios 的预览模式
• q 键 退出调试预览模式

插件

• Flutter
• Dart
• Awesome Flutter Snippets

flutter msg

Flutter一切皆组件!

• StatefulWidget: 具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。
• StatelessWidget: 不可变状态窗口组件， 也就是你在使用时不可以改变，比如固定的文字。

text widget 文本组件

height: 该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize * height。
flutter 的fontSize 适配方案？

• 文本的适配问题。 官方TextStyle 介绍

Container 容器组件

相当于html 的<div>标签。
border 边框使用container 容器下decoration 的border。

  child: Container(
    child: new Text('xxxxxx',style: TextStyle(fontSize: 40.0),),
    alignment: Alignment.topLeft,
    width: 400.0,
    height: 100.0,
    padding: const EdgeInsets.all(10.0),
    margin: const EdgeInsets.fromLTRB(0, 20.0, 20.0, 0),
    decoration:new BoxDecoration(
      border:Border.all(width:2.0,color:Colors.red)
    ),
  )

还有对应的 width|height|color|margin 等

• decoration 是container 的修饰器，主要功能是设置背景和边框。

Image 图片组件的使用

• Image.asset 加载项目资源图片，会增大打包体积，相对路径
• Image.network 网络资源图片
• Image.file & Image.memory 基本少用

• fit属性可以控制图片的拉伸和挤压？ 测试有误

ListView 列表组件

new ListView(
  children:<Widget>[
    new ListTitle(
      leading: new Icon(Icons.access_time),
      title: new Text('access_time')
    ),
    ...
  ]
)

动态列表用ListView.builder() 这种形式。

GridView 网格列表组件

网格列表经常用来显示多张图片。如相册功能。

body: GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
    mainAxisSpacing: 2.0,
    crossAxisSpacing: 2.0,
    childAspectRatio: 0.7
  ),
  children: <Widget>[
    new Image.network(''),
    new Image.network(''),
    new Image.network(''),
    new Image.network(''),
  ]
)

页面布局

水平布局、垂直布局、GridView布局、ListView布局、Container布局等。

水平布局Row

Row 控件分灵活排列和非灵活排列 非灵活排列形式：

body: new Row(
  children: <Widget>[
    new XXX,
    new XXX,
    new XXX,
  ]
)

灵活排列。有间隙，使用Expanded 来解决。（占满空间）

body: new Row(
  children: <Widget>[
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
  ]
)

当然灵活排列与非灵活排列是可以混用的。

垂直布局Column 组件

这里也有主轴与侧轴的区分。

body: Column(
  crossAxisAlignment: CrossAxisAlignment.start, // 文字对齐方式
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('line1 xxx'),
    Text('line1 xxx'),
    Text('line1 xxx')
  ]
)

Stack 层叠布局 （类似前端的定位）

tips: CircleAvatar 组件，里头有radius 的值可以设置弧度情况。

new CircleAvatar(
  backgroundImage: new NetworkImage('http://XXXX'),
  radius: 100.0,
)

Stack 基本使用

var stack = new Stack(
  children: <Widget>[
    new CircleAvatar(
      backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
      radius: 100.0,
    ),
    new Positioned(
      top:10.0,
      left:10.0,
      child: new Text('JSPang.com'),
    ),
    new Positioned(
      bottom:10.0,
      right:10.0,
      child: new Text('技术胖'),
    )
  ],
);

卡片布局，类似ul => li

ListTile(
  title:new Text('XXXXXXXXXXXXX',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: new Text('aaa:1513938888'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
)

页面导航 （与前端导航和超链接有所不同）

RaisedButton 按钮组件 （用的比较多）

它有两个最基本属性：

• child: 可以放入容器，图标，文字。这样可以构建多彩的按钮。
• onPressed 点击事件，此时会调用Navigator 组件。

child: RaisedButton(
  child: Text('查看商品详情页面'),
  onPressed: (){
    Navigator.push(context, new MaterialPageRoute(
      builder: (context) => XXXX
    ));
  },
)

Navigator.push 和 Navigator.pop

• push： 是跳转下一个页面，接收两个参数,上下文context & 跳转函数
• pop: 返回上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push。

参数传递

静态资源和项目图片处理

1、先pubspec.yaml 文件进行声明。

assets:
  - images/blogtouxiang.jpg

2、项目中直接使用

Widget build(BuildContext context) {
  return Container(
    child: Image.asset('images/blogtouxiang.jpg'),
  );
}