Flutter初识

264 阅读2分钟

       偶然在大神的公众号上看到一篇文章Google 跨平台 UI 框架 - Flutter,介绍了google推出的一门新的跨平台移动框架,引发了我的兴趣,决定跟踪学习研究下。先来对这套框架做一个初步的了解。

官网地址:中文网英文网

Flutter是什么

       Flutter是google推出的一款移动端UI框架,可以快速地构建IOS和Android平台上高质量的原生级界面。Flutter可以和已有代码一起使用,是一套免费的开源框架。

支持热更新

       Flutter支持的热更新可以让用户快速构建UI、添加功能以及修复BUG,在Android和IOS的模拟器以及真机上可以体验到亚秒级重载,不会造成状态的丢失。

丰富的UI

       Flutter内置了目前Android比较流行的Material Design和IOS的Cupertino风格的库,可以快速构建出美观时尚的UI界面。丰富的手势API,平滑的滑动等带来良好的用户体验。

响应式框架

       Flutter使用了时尚的响应式框架,丰富的平台、布局以及基础组件,为用户提供了强大而灵活的API,解决了复杂的用户界面构建。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // Tells the Flutter framework that state has changed,
    // so the framework can run build() and update the display.
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // This method is rerun every time setState is called.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

兼容平台原生功能以及SDK

       平台API、第三方SDK以及native code让你的代码更具有可扩展性。Flutter允许继续使用现有的java、swift、obj-c代码,并可以访问Android和IOS的native功能以及SDK。
       来看一段访问native code的代码示例:

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

跨平台统一的开发

       Flutter工具和库可以轻松把你的想法带到Android和IOS设备上,如果你还未接触过移动开发,Flutter是你很好的选择;如果你是一位经验丰富的移动开发者,Flutter可以为你的移动应用的构建完美的界面,并且可以充分利用已有的java、swif、obj-c代码。