Flutter笔记(二)关于Dart和Weight

2018-10-11 本文已影响39人最爱平角裤

本文主要内容：dart的基本语法、了解weight框架、weight状态、weight布局介绍

Dart

1、介绍

Dart 支持AOT编译和JIT编译两种方式（在 Release 下是 AOT 模式。）

JIT和AOT
Dart可以更轻松地创建以60fps运行的流畅动画和转场。
Dart可以在没有锁的情况下进行对象分配和垃圾回收。
Dart使Flutter不需要单独的声明式布局语言
Dart可以在没有锁的情况下进行对象分配和垃圾回收。就像JavaScript一样
Dart避免了抢占式调度和共享内存（因而也不需要锁）
由于Flutter应用程序被编译为本地代码，因此它们不需要在领域之间建立缓慢的桥梁，启动速度也快得多。

为什么Flutter会选择 Dart

2、语法

Dart语言的 API 大部分相同, 可以很快能上手。同时也有kotlin 和 JS 的影子

数字类型num ，包含int、double。

  num a = 1;
  int b = 1;
  double c = 1.0;

// String -> int
var one = int.parse('1');

// String -> double
var onePointOne = double.parse('1.1');

// int -> String
String oneAsString = 1.toString();

// double -> String 注意括号中要有小数点位数，否则报错
String piAsString = 3.14159.toStringAsFixed(2);

bool 布尔类型
var 可以定义变量，如：var a = "666"

没有关键词 public 、private 等修饰符，_下横向直接代表 private ，但是有 @protected 注解。
Dart 不需要给变量设置 setter getter 方法，这和 kotlin 等类似。Dart 中所有的基础类型、类等都继承 Object ，默认值是 NULL，自带 getter 和 setter ，而如果是 final 或者 const 的话，那么它只有一个 getter 方法。
Dart 下 ?? 、??= 属于操作符，如: AA ?? "999" 表示如果 AA 为空，返回99；AA ??= "999" 表示如果 AA 为空，给 AA 设置成 99。
num a = 1.0; print("aaaa" + a);//不被允许
a必须.toString
Dart 中构造函数

class ModelA {
  String name;
  String tag;
  
  //默认构造方法，赋值给name和tag
  ModelA(this.name, this.tag);

  //返回一个空的ModelA
  ModelA.empty();
  
  //返回一个设置了name的ModelA
  ModelA.forName(this.name);
}

数组和列表
DART 中数组等于列表，所以 var list = []; 和 List list = new List() 可以简单看做一样。

var vegetables = new List();

// 或者简单的用List来赋值
var fruits = ['apples', 'oranges'];

// 添加元素
fruits.add('kiwis');

// 添加多个元素
fruits.addAll(['grapes', 'bananas']);

// 获取第一个元素
fruits.first;

// 获取元素最后一个元素
fruits.last;

// 查找某个元素的索引号
assert(fruits.indexOf('apples') == 0);

// 删除指定位置的元素，返回删除的元素
fruits.removeAt(index);

// 删除指定元素,成功返回true，失败返回false
fruits.remove('apples');

// 删除最后一个元素，返回删除的元素
fruits.removeLast();

// 删除指定范围元素，含头不含尾，成功返回null
fruits.removeRange(start,end);

// 删除指定条件的元素，成功返回null
fruits.removeWhere((item) => item.length >6)；

// 删除所有的元素
fruits.clear();

// sort()对元素进行排序，传入一个函数作为参数，return <0表示由小到大， >0表示由大到小
fruits.sort((a, b) => a.compareTo(b));

条件判断和循环
if...else
for
while do-while
break continue
switch...case (支持 String 类型。)
函数：同Java形式一样，不过dart 没有 public、private、protected 这些关键字，变量名以"_"开头意味着对它的 lib 是私有的
Dart 方法可以设置参数默认值和指定名称。比如： getDetail(Sting userName, reposName, {branch = "master"}){} 方法，这里 branch 不设置的话，默认是 “master” 。参数类型可以指定或者不指定。调用效果： getRepositoryDetailDao(“aaa", "bbbb", branch: "dev");
[更多关于Dart]

认识Flutter中Widget

在 Flutter 中，一切的显示都是 Widget 。Widget 是一切的基础。
Widget 和 Widget 之间通过 child: 进行嵌套。其中有的 Widget 只能有一个 child，比如下方的 Container ；有的 Widget 可以多个 child ，也就是children:，比如` Column 布局。下方代码便是 Container Widget 嵌套了 Text Widget。
通过一个demo了解Widget框架
官网的一个例子，加了很多理解注释，看完差不多就可以对Widget框架有大致的了解

import 'package:flutter/material.dart';

class Product {
  const Product({this.name});
  final String name;
}

typedef void CartChangedCallback(Product product, bool inCart);

class ShoppingListItem extends StatelessWidget { //无状态widget
  ShoppingListItem({Product product, this.inCart, this.onCartChanged})
      : product = product,
        super(key: new ObjectKey(product));

  final Product product;
  final bool inCart;
  final CartChangedCallback onCartChanged;

  Color _getColor(BuildContext context) {
    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  }

  TextStyle _getTextStyle(BuildContext context) {
    if (!inCart) return null;

    return new TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap: () {
        onCartChanged(product, !inCart);
      },
      leading: new CircleAvatar(
        backgroundColor: _getColor(context),
        child: new Text(product.name[0]),
      ),
      title: new Text(product.name, style: _getTextStyle(context)),
    );
  }
}

class ShoppingList extends StatefulWidget { //有状态的widget必须实现State
  //用大括号包裹参数可选填，但是要指明类型。
  ShoppingList({Key key, this.products}) : super(key: key);//可以直接赋值给成员变量

  final List<Product> products;

  @override
  _ShoppingListState createState() => new _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = new Set<Product>();

  void _handleCartChanged(Product product, bool inCart) {
    setState(() {//修改widget状态，类似Android里View的ondraw()方法

      if (inCart)
        _shoppingCart.add(product);
      else
        _shoppingCart.remove(product);
    });
  }

  @override
  Widget build(BuildContext context) {//build里堆砌布局 可以持有变量数据widget.。相当于databind在xml中的作用
    //不足就是迷之缩进，不过编译器会默认提示代码块的结束节点
    return new Scaffold( //Material承载Widget，包含appbar、snackbar、drawer等material design的设定。
      appBar: new AppBar(//一般用于Scaffold内 ，内有标题，二级页面返回按键等，不止这些，tabbar等也会需要它 。
        title: new Text('Shopping List'),
      ),
      body: new ListView(
        padding: new EdgeInsets.symmetric(vertical: 8.0),
        children: widget.products.map((Product product) {
          return new ShoppingListItem(
            product: product,
            inCart: _shoppingCart.contains(product),
            onCartChanged: _handleCartChanged,
          );
        }).toList(),
      ),
    );
  }
}

void main() { //顶级函数入口
  runApp(new MaterialApp(//runApp函数接受给定的Widget并使其成为widget树的根、框架强制根widget覆盖整个屏幕
    title: 'Shopping App',//title指定传入的参数
    home: new ShoppingList(//widget可以当做参数传递
      products: <Product>[
        new Product(name: 'Eggs'),
        new Product(name: 'Flour'),
        new Product(name: 'Chocolate chips'),
      ],
    ),
  ));
}

Widget 分为有状态和无状态两种，在 Flutter 中每个页面都是一帧。无状态就是保持在那一帧。而有状态的 Widget 当数据更新时，其实是绘制了新的 Widget，只是 State 实现了跨帧的数据同步保存。
我们可以通过修改数据，再用setState 设置数据，Flutter 会自动通过绑定的数据更新 Widget 。所以你需要做的就是实现 Widget 界面，并且和数据绑定起来。
无状态StatelessWidget
继承 StatelessWidget，通过 build 方法返回一个布局好的控件。相当于一个常量不可以再变。
有状态StatefulWidget
需要创建管理的是主要是 State ，通过 State 的 build 方法去构建控件。在 State 中，可以动态改变数据。类似 MVVM 实现，在 setState 之后，改变的数据会触发 Widget 重新构建刷新。
总结：在 build 中堆积你的布局，然后把数据添加到 Widget 中，最后通过 setState 改变数据，从而实现画面变化。

布局

Widgets 目录

最后看下大神给的widge分类图

Flutter笔记(二)关于Dart和Weight

Dart

1、介绍

2、语法

认识Flutter中Widget

布局

参考

猜你喜欢

热点阅读