必知必会

Dart语法

class

extends

class Car extends Vehicle 在Vehicle中实现的所有的属性、变量和函数在Car中都能访问到。

class A{}           //A是superclass
class B extends A{} //B是derived class

在Dart中只能继承一个superclass，但是继承是可以传递的。Hatch extends Car, Car extends Vehicle.那么Hatch继承自Vehicle。

可以重写superclass的function

class Car extends Vehicle {
  Car(String color) : super(color);

  @override
  String get definition => 'Car ${super.definition}';
}

implements

class Car implements Vehicle 实现自己的Car，Vehicle中的所有属性、变量和函数一个都不继承。

class Car implements Vehicle {
  Car(this.carColor);
  final String carColor;
  @override
  String get color => carColor;
  @override
  String get definition => '$carColor car';
}

with

使用implements

class Animal {}
// behaviors
abstract class Flyer {
  void fly() => print('I can fly!');
}
abstract class Swimmer {
  void swim() => print('I can swim!');
}
class Bird extends Animal implements Flyer {
  @override
  void fly() => print('I can fly!');
}
class Duck extends Animal implements Swimmer, Flyer {
  @override
  void fly() => print('I can fly!');
  @override
  void swim() => print('I can swim!');
}

使用with

class Animal {}
// behaviors
abstract class Flyer {
  void fly() => print('I can fly!');
}
abstract class Swimmer {
  void swim() => print('I can swim!');
}
class Bird extends Animal with Flyer {
}
class Duck extends Animal with Swimmer, Flyer {
}

You can replace abstract class to mixin if you prefer.

mixin

mixin的设计是为了复用用class的代码在继承多个class的时候

Animal-> Mammal -> Cat(walk)、Bat(fly,walk)
      -> Fish -> Shark(swim)
      -> Bird -> Dove(fly,walk)、Duck(swin，walk，fly)

Animal超级类下面有Mammal,Fish,Bird三个类。每个类下面有不同的动物，每个动物有不同的行走方式，比如游泳、飞翔和走路。

不是所有的动物都会游泳，所以不能再Animal中添加swim，但是Cat如果可以继承两个甚至更多个类就好了，Manmmal和Walk。

这时Walk就可以作为mixin不仅可以被cat使用也可以被Dove，Duck等使用。

abstract class Animal {}
abstract class Mammal extends Animal {}
abstract class Bird extends Animal {}
abstract class Fish extends Animal {}
abstract class Walker {
  // 此句表明Walker作为mixin被使用，不能直接被extend
  factory Walker._() => null;
  void walk() {
    print("I'm walking");
  }
}
abstract class Swimmer {
  // 此句表明Walker作为mixin被使用，不能直接被extend
  factory Swimmer._() => null;
  void swim() {
    print("I'm swimming");
  }
}
abstract class Flyer {
  // 此句表明Walker作为mixin被使用，不能直接被extend
  factory Flyer._() => null;
  void fly() {
    print("I'm flying");
  }
}
// extend + mixin生成class
class Cat extends Mammal with Walker {}
class Duck extends Bird with Walker, Swimmer, Flyer {}

Flutter生成apk

生成签名 keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
使用签名
配置签名到bundle
生成apk flutter build apk

ListView (Flutter vs React Native)

ListView Flutter

ListView内部处理了滚动，随着滚动ListView.builder的i会自动增加。也就是说ListView决定了i

Widget _buildSuggestions() {
  return ListView.builder(
    padding: EdgeInsets.all(16),
    itemBuilder: (context, i) {
      print(i);
      if (i.isOdd) return Divider(); //奇数，返回分割线
      final index = i ~/ 2;
      if (index >= _suggestions.length) {
        _suggestions.addAll(generateWordPairs().take(5));
      }
      return _buildRow(_suggestions[index]);
    });
}

ListView React Native

根据dataSource渲染ListView。dataSource决定了i

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <Text>{rowData}</Text>}
/>

实战案例

实现`position:relative;top:-2px;`布局

Container(
	transform: Matrix4.translationValues(0, -3.5, 0)
)

定制Button样式

ButtonTheme(
    minWidth:15, 
    shape:CircleBorder(
      side: BorderSide(width: 1, color: Colors.blue)
    ), 
    child: FlatButton(child: Text('button'))
  )

Flutter学习笔记