Flutter Getting Started and Advanced Tour (8) Button Widget

引言

In a blog post we learnedGestureDetector,Learn to useGestureDetectorCan give some itself does not have click callbackwidgetClick on the correction ability,Finish some simple gesture interaction with users and make corresponding logic to handle,We also mentioned somewidget像RaisedButton和FloatingActionButtonThe control itself hasonPressed回调,When the user clicks the control trigger callback.This blog, we took the last blog reference to variousButtonClassified unified explain.

ButtonCollection rendering

上述RaisedButton、FlatButton、OutlineButton、MaterialButton、还有RawMaterialButton、FloationgActionButton,I points three categories to everyone,OutlineButton作为一类,RaisedButton、FlatButton、MaterialButton、RawMaterialButtonWhether from the constructor or using the similar,这几个button分为一类,另外FloatingActionButton作为一类.

1.OutlineButton：

OutlineButtonThe default with a border,We can attribute to specify the normal,With the user clicks on a state border color.

我们来看下OutlineButton的构造方法,And under the instructions of its corresponding attributes do.

const OutlineButton({
    
    Key key,
    @required VoidCallback onPressed,
    ButtonTextTheme textTheme,  //The button font theme
    Color textColor,  //字体颜色
    Color disabledTextColor, //按钮禁用时候文字的颜色
    Color color,  //按钮背景颜色
    Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
    Color splashColor, //水波纹的颜色
    double highlightElevation,//高亮时候的阴影
    this.borderSide,//按钮边框
    this.disabledBorderColor, //Button is disabled when the color of the frame
    this.highlightedBorderColor,//Position is the color of the frame
    EdgeInsetsGeometry padding,//边距
    ShapeBorder shape, //设置shape
    Clip clipBehavior = Clip.none,
    Widget child,
  }) 

上述OutlineButtonEffect on the twobutton的具体代码：

Do not specify any style：

 new OutlineButton(onPressed: () {
    }, child: new Text("OutlineButton")),

效果图

设置边框样式

 new OutlineButton(
           textColor: Colors.blue,
           highlightedBorderColor: Colors.deepOrange,
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
           borderSide: new BorderSide(color: Colors.blueAccent),
           onPressed: () {
    },
           child: new Text("OutlineButton")
         ),

效果图

2.FloatingActionButton

FloatingActionButtonDid the native android development of readers should be familiar with this name,在FlutterNot only refers to the native android called,使用方法也大同小异.
构造方法

const FloatingActionButton({
    
    Key key,
    this.child,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation = 6.0,
    this.highlightElevation = 12.0,
    @required this.onPressed,
    this.mini = false,
    this.shape = const CircleBorder(),
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.isExtended = false,
  })

Due to the use method with native android similar,I will not spread in detail,I'll put all the code on the preliminaries rendering with,You may refer to the facefloatingactionbutton的用法.

3.RaisedButton、FlatButton、OutlineButton、MaterialButton

这几类button十分类似,So I put them in the same class as do explain,But also can have subtle differences,像FlatButtonDoes not support set the color of the finger after raising,Other conventional usage almost unanimously,About the specific nuances,The reader can compare method to construct,自行测试,我拿RaisedButton把代码,贴上代码,Demonstrated under the categories for youButtonThe commonly used attributes configuration instructions.

 new RaisedButton(
            color: Colors.blueAccent,
            //按钮的背景颜色
            padding: EdgeInsets.all(15.0),
            //Button from the content inside the padding
            textColor: Colors.white,
            //文字的颜色
            textTheme: ButtonTextTheme.normal,
            //按钮的主题
            onHighlightChanged: (bool b) {
    
              //水波纹高亮变化回调
            },
            disabledTextColor: Colors.black54,
            //按钮禁用时候文字的颜色
            disabledColor: Colors.black54,
            //Buttons are disabled when the color of the display
            highlightColor: Colors.green,
            //点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
            splashColor: Colors.amberAccent,
            //水波纹的颜色
            colorBrightness: Brightness.light,
            //按钮主题高亮
            elevation: 10.0,
            //按钮下面的阴影
            highlightElevation: 10.0,
            //高亮时候的阴影
            disabledElevation: 10.0,
            //按下的时候的阴影
            shape: new RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            //设置形状
            onPressed: () {
    },
            child: new Text("RaisedButton"),
          ),

The explanation of the reader if you have not understand place can reference articles posted in the openingbuttonRendering of the source code for your reference,Leave a message or give me a piece of discussion,The article begins with the post ofbuttonRendering of the source code is as follows.

import 'package:flutter/material.dart';


void main() {
    
  runApp(new MaterialApp(home: new ButtonPage()));
}
class ButtonPage extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Button Widget"),
      ),
      floatingActionButton: new FloatingActionButton(
          onPressed: () {
    }, child: new Icon(Icons.adb), tooltip: "点击"),
      body: new ListView(
        children: <Widget>[
          new Text("简单样式",
              textAlign: TextAlign.center,
              style: new TextStyle(color: Colors.brown, fontSize: 20.0)),
          new RaisedButton(onPressed: () {
    }, child: new Text("RaisedButton")),
          new FlatButton(onPressed: () {
    }, child: new Text("FlatButton")),
          new MaterialButton(
              onPressed: () {
    }, child: new Text("MaterialButton")),
          new RawMaterialButton(
              onPressed: () {
    }, child: new Text("RawMaterialButton")),
          new OutlineButton(onPressed: () {
    }, child: new Text("OutlineButton")),
          new SizedBox(height: 20),
          new Text("To upgrade the style",
              textAlign: TextAlign.center,
              style: new TextStyle(color: Colors.brown, fontSize: 20.0)),
          new RaisedButton(
            color: Colors.blueAccent,
            //按钮的背景颜色
            padding: EdgeInsets.all(15.0),
            //Button from the content inside the padding
            textColor: Colors.white,
            //文字的颜色
            textTheme: ButtonTextTheme.normal,
            //按钮的主题
            onHighlightChanged: (bool b) {
    
              //水波纹高亮变化回调
            },
            disabledTextColor: Colors.black54,
            //按钮禁用时候文字的颜色
            disabledColor: Colors.black54,
            //Buttons are disabled when the color of the display
            highlightColor: Colors.green,
            //点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
            splashColor: Colors.amberAccent,
            //水波纹的颜色
            colorBrightness: Brightness.light,
            //按钮主题高亮
            elevation: 10.0,
            //按钮下面的阴影
            highlightElevation: 10.0,
            //高亮时候的阴影
            disabledElevation: 10.0,
            //按下的时候的阴影
            shape: new RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            //设置形状
            onPressed: () {
    },
            child: new Text("RaisedButton"),
          ),
          new FlatButton(
              color: Colors.lightGreen,
              textColor: Colors.red,
              onPressed: () {
    }, child: new Text("FlatButton")),
          new OutlineButton(
              textColor: Colors.blue,
              highlightedBorderColor: Colors.deepOrange,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
              borderSide: new BorderSide(color: Colors.blueAccent),
              onPressed: () {
    },
              child: new Text("OutlineButton")
          ),
          MaterialButton(
              color: Colors.yellow,
              textColor: Colors.red,
              onPressed: () {
    },
              child: new Text("MaterialButton")
          ),
          RawMaterialButton(
              fillColor: Colors.deepOrange,
              onPressed: () {
    },
              child: new Text("RawMaterialButton",style: new TextStyle(color: Colors.white),)
          )
        ],
      ),
    );
  }
}

下一篇：Flutter入门进阶之旅（九）StatelessWidget & StatefullWidget