在Flutter中界面的代碼通常是和邏輯代碼在一塊的，沒有android中的xml布局文件，所以布局模型的難度相對大于控件模型，所以這里我們先來學習一下比較簡單的按鈕。

在《Flutter攻略》之環境搭建中介紹了如何使用IntelliJ 插件的插件來新建Flutter工程并運行。

我們新建一個工程后，插件已經給我們寫了一個簡單的app運行如下：

點擊右下方按鈕后，中間的0會一直被+1，但這里我們先不管這是怎么實現的，我們今天要學習的是按鈕。

在Flutter的官網的Widgets Overview中，我們可以看到有以下三個按鈕：

• Floating action buttton
• Raised button
• Flat button

其中第一個Floating action button就是上圖中右下角有個加號的按鈕。它的形狀默認是圓形。切他有固定的用法如下：

floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
 )

我們先看??的構造方法，其中onPressed是按鈕點擊事件，類型為：

/// Signature of callbacks that have no arguments and return no data.
typedef void VoidCallback();

就是一個沒有參數切沒有返回值的方法。具體參考dart語法。

tooltip一個提示字符串，在長按按鈕時彈出：

參數child的類型是Widget,是一個需要被顯示在FloatingActionButton中間的一個控件，這里使用的是Icon，那既然類型是Widget，那我們試試除了Icon，是不是其他的也行，這里用Text來試試。

 floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Text('Hello'),
  ),

??可行。

下面來說說第二個按鈕Raised button,官方的解釋是：

A typically rectangular material button that lifts and displays ink reactions on press. The RaisedButton widget implements this component.

其實就是一個有抬起效果和按壓有墨水效果的按鈕，我們看下具體是什么樣子的：

代碼如下：

 body: new Center(
        child: new RaisedButton(onPressed: (){},
           color: Colors.blue[400],
           child: new Text('RaisedButton',style: new TextStyle(color: Colors.white))),
  ),

而第三種Flat button沒有RaisedButton的抬起效果，其他一致。

總結

這里只是介紹了三種按鈕以及簡單寫法，沒有深究其點擊事件和布局等功能的用法。

整個文件內容如下：

import 'package:flutter/material.dart';
import 'dart:isolate';
import 'dart:async';
void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see
        // the application has a blue toolbar. Then, without quitting
        // the app, try changing the primarySwatch below to Colors.green
        // and press "r" in the console where you ran "flutter run".
        // We call this a "hot reload". Notice that the counter didn't
        // reset back to zero -- the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful,
  // meaning that it has a State object (defined below) that contains
  // fields that affect how it looks.

  // This class is the configuration for the state. It holds the
  // values (in this case the title) provided by the parent (in this
  // case the App widget) and used by the build method of the State.
  // Fields in a Widget subclass are always marked "final".

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  ReceivePort receivePort = new ReceivePort();
  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that
      // something has changed in this State, which causes it to rerun
      // the build method below so that the display can reflect the
      // updated values. If we changed _counter without calling
      // setState(), then the build method would not be called again,
      // and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance
    // as done by the _incrementCounter method above.
    // 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 Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that
        // was created by the App.build method, and use it to set
        // our appbar title.
        title: new Text(config.title),
      ),
      body: new Center(
        child: new RaisedButton(onPressed: (){},
           color: Colors.blue[400],
           child: new Text('RaisedButton',style: new TextStyle(color: Colors.white))),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Text('Hello'),
      ), // This trailing comma tells the Dart formatter to use
      // a style that looks nicer for build methods.
    );
  }

  @override
  void initState() {
    receivePort.listen((data){
      print("from main : $data");
    });
    Isolate.spawn(foo,receivePort.sendPort);
  }


}

foo(message){
 foo1(1,message);
}

foo1(var i,var sendPort){
  Future f = new Future.delayed(new Duration(seconds: 2),(){
    i++;
    print("${i}");
    Isolate.current.ping(sendPort,response: "i = ${i}");
    foo1(i,sendPort);
  });
}