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

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/17581.html