Flutter 對 iOS、Android(雙端開發者)的快速理解(一)

---

原文鏈接

更多教程

---

如果你有移動端開發經驗，無論你是iOS還是Android開發者，你都可以利用現有的知識快速理解Flutter開發。
本文會通過對比雙端開發和Flutter中的差異來說明。

Flutter中用 Widget 表示（iOS中的UIView）和（Android中的View）

Flutter中使用 Widget 表示雙端開發中的view概念。就像雙端中的view一樣，它也可以包含其他的Widget部件。

區別是：

• Flutter中當 widgets 和它們的狀態被改變時，Flutter 會構建一顆新的 widgets 樹。不像 UIView，由於不可變性，Flutter 的 widgets 非常輕量。
• iOS中UIView在改變時並不會被重新創建，直到使用 setNeedsDisplay() 之後纔會被重新繪製。
• Android上View在改變時並不會被重新創建，直到調用invalidate時纔會重繪。

Flutter中通過StatefulWidget更新widget狀態

• iOS和android中可以直接修改UIView或View的屬性值，達到改變狀態的目的
• Flutter中通過使用StatefulWidget來修改widget狀態

那麼什麼是StatefulWidget呢？

Fullter中有兩種Widget，有狀態的StatefulWidget和無狀態的StatelessWidget。

• StatefulWidget 擁有一個 State 對象來存儲它的狀態數據，通過改變State 對象的值來修改StatefulWidget的UI表現。
• StatelessWidget 正如它聽起來一樣，是一個沒有附加狀態的 widget。例如在運行時不會改變的logo圖片，就可以在 StatelessWidget 來表示。

舉個例子將一個不可變狀態的widget變成一個有狀態的widget：

Text(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

這個Text widget 並不攜帶其他狀態。它通過傳入給它的構造器的數據來渲染。當希望通過用戶點擊來修改這個Text的值時，可以用 StatefulWidget 包裹 Text widget，並在用戶點擊按鈕時更新它。

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";
  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

Flutter中通過Widget樹來繪製界面

• iOS中通過代碼或者storyboard、xib繪製界面
• android通過XML編寫佈局
• Flutter中通過Widget樹來繪製界面

舉個例子：在屏幕上顯示一個簡單的Widget並添加一些padding。

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("Sample App"),
    ),
    body: new Center(
      child: new MaterialButton(
        onPressed: () {},
        child: new Text('Hello'),
        padding: new EdgeInsets.only(left: 10.0, right: 10.0),
      ),
    ),
  );
}

Flutter中如何動態添加或刪除 Widget

• 在Android中，您可以從父級控件調用addChild或removeChild以動態添加或刪除View。
• 在 iOS 中，你在父 view 中調用 addSubview() 或在子 view 中調用 removeFromSuperview() 來動態地添加或移除子 views。
• 在Flutter中，因爲widget是不可變的，所以沒有addChild。可以通過改變一個bool值，然後重繪來決定是否展示某一個控件。

例如：點擊按鈕顯示不通的widget：

代碼如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new SampleApp());
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

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

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  _getToggleChild() {
    if (toggle) {
      return new Text('1111111');
    } else {
      return new MaterialButton(onPressed: () {}, child: new Text('2222222'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new Center(
        child: _getToggleChild(),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: new Icon(Icons.update),
      ),
    );
  }
}

Flutter如何使用動畫

• 在 iOS 中，你通過調用 animate(withDuration:animations:) 方法來給一個 view 創建動畫。
• 在Android中，您可以通過XML創建動畫或在視圖上調用.animate()。
• 在Flutter中，使用動畫庫來包裹 widgets，而不是創建一個動畫 widget。
  在 Flutter 中，使用 AnimationController 來控制動畫暫停、尋找、停止、反轉動畫等。
  使用Animation類的擴展例如CurvedAnimation 來實現一個 interpolated 曲線。

舉例：
點擊右下角按鈕，淡出圖標：

代碼：

import 'package:flutter/material.dart';

void main() {
  runApp(new FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fade Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyFadeTest createState() => new _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
          child: new Container(
              child: new FadeTransition(
                  opacity: curve,
                  child: new FlutterLogo(
                    size: 100.0,
                  )))),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Fade',
        child: new Icon(Icons.brush),
        onPressed: () {
          controller.forward();
        },
      ),
    );
  }
}

Flutter如何繪圖？

• 在 iOS 上，你通過 CoreGraphics 來在屏幕上繪製線條和形狀。
• 在Android中，您可以使用Canvas在屏幕上繪製自定義形狀。
• 在Flutter中，CustomPaint 和 CustomPainter 這兩個類來幫助你繪圖。

舉例：

代碼

import 'package:flutter/material.dart';

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);

  final List<Offset> points;

  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null)
        canvas.drawLine(points[i], points[i + 1], paint);
    }
  }

  bool shouldRepaint(SignaturePainter other) => other.points != points;
}

class Signature extends StatefulWidget {
  SignatureState createState() => new SignatureState();
}

class SignatureState extends State<Signature> {
  List<Offset> _points = <Offset>[];

  Widget build(BuildContext context) {
    return new Stack(
      children: [
        GestureDetector(
          onPanUpdate: (DragUpdateDetails details) {
            RenderBox referenceBox = context.findRenderObject();
            Offset localPosition =
            referenceBox.globalToLocal(details.globalPosition);

            setState(() {
              _points = new List.from(_points)..add(localPosition);
            });
          },
          onPanEnd: (DragEndDetails details) => _points.add(null),
        ),
        CustomPaint(painter: new SignaturePainter(_points))
      ],
    );
  }
}

class DemoApp extends StatelessWidget {
  Widget build(BuildContext context) => new Scaffold(body: new Signature());
}

void main() => runApp(new MaterialApp(home: new DemoApp()));

Flutter如何創建自定義的 widgets？

• iOS和android都是通過繼承view來實現的。
• Flutter是通過組合現有的widget來實現複雜的 widget。

舉個例子，如果你要構建一個 CustomButton ，並在構造器中傳入它的 label？那就組合 RaisedButton 和 label，而不是擴展 RaisedButton。

class CustomButton extends StatelessWidget {
  final String label;

  CustomButton(this.label);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(onPressed: () {}, child: Text(label));
  }
}

然後就像你使用其他任何 Flutter 的 widget 一樣，使用你的 CustomButton：

@override
Widget build(BuildContext context) {
  return Center(
    child: CustomButton("Hello"),
  );
}

由於篇幅過長，文章將分爲多部分，請繼續關注本文其他部分。

原文鏈接

更多教程