flutter入门

发表于 | 更新于 | 分类于 | 阅读次数：

flutter中文网
flutter官方网站
github样例代码

Dart基础

内置类型

Number(num,int double),String,Boolean,Map,List
Runes, Symbols

var, dynamic

数值操作

~/ 取整除法
字符串 * n: 复制n次
插值表达式${expression}
List的创建：

1
2
3
var list = [1,2,3];
var list = const [1,2,3]; // 常量Map类似
var list = new List();

复制运算符: ??= 如果变量为空则赋值

1
2
3
4
var a;
a ??= 5;
String b = "1";
String c = a ?? b;

函数方法

  1. 构造函数继承类似C++冒号继承语法,key值是唯一确定元素。
  2. switch里面的continue跳转到标签，类似goto

  3. 函数可选参数：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //可选命名参数
    func(String name,{int age, int gender}){
        print("name=$name,age=$age,gender=$gender")
    }
    //方括号调用的时候没有参数名称
    //可选位置参数
    func(String name,[int age, int gender]){
        print("name=$name,age=$age,gender=$gender")
    }

  4. 其他

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    list.forEach(print) //方法对象
    (){ } // 匿名方法

    // 闭包
    void main(){
    var a = func();
    a(); //1
    a(); //2

    func()(); //1
    func()(); //1
    }

    func(){
    int _count = 0;

    return (){
        _count++;
        print(_count);
    };
    }

异步支持

Dart类库有非常多的返回Future或者Stream对象的函数。 这些函数被称为异步函数：它们只会在设置好一些耗时操作之后返回，比如像 IO操作。而不是等到这个操作完成。

async和await关键词支持了异步编程

Future.then
Future.catchError
Future.delayed
Future.whenComplete
Future.wait等待多个异步任务都执行结束后才进行下一步操作
Async/await
使用async/await消除callback hell
async用来表示函数是异步的，定义的函数会返回一个Future对象，可以使用then方法添加回调函数。
await 后面是一个Future，表示等待该异步任务完成，异步完成后才会往下走；await必须出现在 async 函数内部。

1
2
3
4
5
6
7
8
9
10
11
task() async {
   try{
    String id = await login("alice","******");
    String userInfo = await getUserInfo(id);
    await saveUserInfo(userInfo);
    //执行接下来的操作  
   } catch(e){
    //错误处理  
    print(e);
   }  
}

运行命令

单个dart文件控制台输出dart lib/filename.dart（需配置dart环境变量使dart命令可以使用）
flutter项目flutter run
要关闭调试模式并使用发布模式，请使用flutter run --release运行您的应用程序。 这也关闭了Observatory调试器。
一个中间模式可以关闭除Observatory之外所有调试辅助工具的，称为“profile mode”，用–profile替代–release即可。

国内镜像

新增两个环境变量

1
2
3
4
5
PUB_HOSTED_URL
https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL
https://storage.flutter-io.cn

执行一下 flutter doctor命令
下载在 package get 应该就没有问题了。

组件

有状态组件StatelessWidget、无状态组件StatefulWidget

TextWidget

1
2
3
4
5
6
7
8
9
textAlign:TextAlign.center,
maxLines:1,
overflow:TextOverflow.ellipsis,
style:TextStyle(
    frontSize: 25.0, //浮点数
    color: Color.fromARGB(255,255,255,255), //A:透明度
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.solid
)

ContainerWidget

1
2
3
4
5
6
7
8
9
10
11
12
13
alignment:Alignment.topLeft,
padding:const EdgeInsets.fromLTRB(1,2,3,4), //设置左上右下四个方向的值
//LinearGradient设置背景颜色渐变
//BoxDecoration Widget
decoration: new BoxDecoration(
    gradient: const LinearGradient(
        colors:[
            Colors.lightBlue,
            Colors.greenAccent,
            Colors.purple
        ]
    )
)

ImageWidget

fit属性
图片的混合模式
repeat属性
Image.asset: 加载资源图片，会被打包
Image.network: 网络资源图片
Image.file: 本地图片
Image.memory: 加载到内存的图片

1
2
3
4
5
6
7
8
9
10
new Inmage.network(
    "url",
    scale:2.0,//图片缩放，值越大，图片越小
    fit:BoxFit.fill, 
    // fill拉伸图片布满容器, contain适应图片, cover布满容器自动裁剪
    // fitWidth, fitHeight, scaleDown
    color:Colors.greenAccent,
    colorBlendMode: Blenmode.modulate,
    repeat:ImageRepeat.repeat
)

ListViewWidget

ListTile

1
2
3
4
5
6
7
8
9
10
new ListView(
    children: <Widget>[
        new ListTile(

        ),
        new ListTile(

        ),
    ]
)

动态列表

1
2
3
4
5
6
7
8
new ListView.builder(
    itemCount: items.length,
    itemBuilder:(context,index){
        return new ListTile(
            title: new Text("${items[index]}")
        )
    }
)

横向列表

Axis.horizontal/vertical

GridView Widget

gridDelegate

mainAxisSpacing
crossAxisSpacing
crossAxisCount
childAspectRatio: 0.8, 指的是width/height