在Flutter中界面的代碼通常是和邏輯代碼在一塊的，沒有android中的xml布局文件兼蕊，所以布局模型的難度相對大于控件模型果正，所以這里我們先來學(xué)習(xí)一下比較簡單的按鈕。
在《Flutter攻略》之環(huán)境搭建中介紹了如何使用IntelliJ 插件的插件來新建Flutter工程并運(yùn)行忆谓。
我們新建一個(gè)工程后裆装，插件已經(jīng)給我們寫了一個(gè)簡單的app運(yùn)行如下：
點(diǎn)擊右下方按鈕后，中間的0會一直被+1，但這里我們先不管這是怎么實(shí)現(xiàn)的哨免，我們今天要學(xué)習(xí)的是按鈕茎活。
在Flutter的官網(wǎng)的Widgets Overview中，我們可以看到有以下三個(gè)按鈕：
- Floating action buttton
- Raised button
- Flat button
其中第一個(gè)Floating action button就是上圖中右下角有個(gè)加號的按鈕琢唾。它的形狀默認(rèn)是圓形载荔。切他有固定的用法如下：
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
)
我們先看??的構(gòu)造方法，其中onPressed是按鈕點(diǎn)擊事件采桃，類型為：
/// Signature of callbacks that have no arguments and return no data.
typedef void VoidCallback();
就是一個(gè)沒有參數(shù)切沒有返回值的方法身辨。具體參考dart語法。
tooltip一個(gè)提示字符串芍碧，在長按按鈕時(shí)彈出：
參數(shù)child的類型是Widget,是一個(gè)需要被顯示在FloatingActionButton中間的一個(gè)控件煌珊，這里使用的是Icon，那既然類型是Widget泌豆，那我們試試除了Icon定庵，是不是其他的也行，這里用Text來試試踪危。
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Text('Hello'),
),
??可行蔬浙。
下面來說說第二個(gè)按鈕Raised button,官方的解釋是：
A typically rectangular material button that lifts and displays ink reactions on press. The RaisedButton widget implements this component.
其實(shí)就是一個(gè)有抬起效果和按壓有墨水效果的按鈕，我們看下具體是什么樣子的：
代碼如下：
body: new Center(
child: new RaisedButton(onPressed: (){},
color: Colors.blue[400],
child: new Text('RaisedButton',style: new TextStyle(color: Colors.white))),
),
而第三種Flat button沒有RaisedButton的抬起效果贞远，其他一致畴博。
總結(jié)
這里只是介紹了三種按鈕以及簡單寫法，沒有深究其點(diǎn)擊事件和布局等功能的用法蓝仲。
整個(gè)文件內(nèi)容如下：
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);
});
}
