在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);
});
}
