Flutter Button

Flutter组件之按钮（RaisedButton）

凸起按钮组件（RaisedButton）是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸的效果。

常用属性如下：

属性名	类型	默认值	说明
color	Color	null	组件的颜色
disabledColor	Color	ThemeData.disabledColor	组件禁用的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色值
onPressed	VoidCallback	null	当按钮按下时会触发此回调事件
child	Widget		按钮的child通常为一个Text文本组件，用来显示按钮的文本
enable	bool	TRUE	按钮是否为禁用状态

自定义按钮：图片+文字按钮

用InkWell + Stack来形成层级

new InkWell(
          child: new Stack(
            alignment: Alignment.center,
            children: <Widget>[
              new Image.asset("images/ic_launcher_round.png"),
              new Text("登录",
              style: new TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.red
              ),),
            ],
          ),
          onTap: () { },
        ),

Flutter 给控件加圆角

前言

今天有一小哥哥，想做一个带圆角的按钮，试了好几个，最后选择了iOS风格的CupertinoButton，是因为其他Button，好像都不能直接设置radius。我其实当时学习其他控件的时候也想过设置圆角这事儿来着。今天偶然看到了一个解决办法，还顺便解决了我一直想给图片加圆角的问题，以下做个笔记

直接上代码

方法一

在你要加圆角的控件外层嵌套一层new Material

比如

RaisedButton

new Material(
    child: new RaisedButton(
        onPressed: () {},
        color: Colors.red[300],
        child: new Text(
            "RaisedButton",
            style: new TextStyle(color: Colors.white),
            ),
        ),
    borderRadius: BorderRadius.circular(20.0),
    shadowColor: Colors.grey,
    elevation: 5.0,
)

Image

new Material(
    child: new Image(
        image: new NetworkImage(//从网络加载图片并缓存在内存中
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3882265467,3924971696&fm=27&gp=0.jpg"),
        width: 200.0,
        height: 200.0,
        fit: BoxFit.cover,
    ),
    borderRadius: BorderRadius.circular(80.0),
)

图标（Icon）和图标按钮（IconButton）

图标组件（Icon）为展示图标的组件，该组件不可交互，要实现交互的图标，可以考虑使用IconButton组件。图标组件相关的组件有一下几个：

IconButton：可交互的Icon。

Icons：框架自带Icon集合。

IconTheme：Icon主题。

ImageIcon：通过AssetImages或者其他图片显示Icon。

图标组件常用属性如下:

属性名	类型	默认值	说明
color	Color	null	图标的颜色，例如Colors.green[500]
icon	IconData	null	展示的具体图标，可以使用Icons图标列表中的任意一个图标即可，如Icons.phone表示一个电话的图标
style	TextStyle	null	文本样式，可定义文本的字体大小、颜色、粗细等
size	Double	24	图标的大小，注意需要带上小数位
textDirection	TextDirection	TextDirection	Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右，有些则是从右到左。从左到右使用TextDirection.ltr，从右到左使用TextDirection.rtl

图标按钮组件（IconButton）是基于Material Design风格的组件，它可以响应按下事件，并且按下时会带一个水波纹的效果。如果它的onPressed回调函数为null，那么这个按钮处于禁用状态，并且不可以按下。常用属性如下：

属性名	类型	默认值	说明
alignment	AlignmentGeometry	Alignment.center	定义IconButton的Icon对齐方式，默认为居中。Alignment是可以设置x，y的偏移量的
icon	Widget	null	展示的具体图标，可以使用Icons图标列表中的任意一个图标即可，如Icons.phone表示一个电话的图标
color	Color	null	图标组件的颜色
disabledColor	Color	ThemeData.disabledColor	图标组件禁用的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色值
iconSize	double	24.0	图标的大小，注意需要带上小数位
onPressed	VoidCallback	null	当按钮按下时会触发此回调事件
ooltip	String	“”	当按钮按下时的组件提示语句

Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）

文章目录

• • Flutter中的按钮
  • RaisedButton
  • FlatButton
  • OutlineButton
  • IconButton

Flutter中的按钮

Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下

• RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton
• FlatButton ：扁平化的按钮，继承自MaterialButton
• OutlineButton ：带边框的按钮，继承自MaterialButton
• IconButton ：图标按钮,继承自StatelessWidget

我们先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。

const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onHighlightChanged,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child,
  }) : super(key: key);

下面我们来看看常用属性

属性	值类型	说明
onPressed	VoidCallback ，一般接收一个方法	必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式
child	Widget	文本控件
textColor	Color	文本颜色
color	Color	按钮的颜色
disabledColor	Color	按钮禁用时的颜色
disabledTextColor	Color	按钮禁用时的文本颜色
splashColor	Color	点击按钮时水波纹的颜色
highlightColor	Color	点击（长按）按钮后按钮的颜色
elevation	double	阴影的范围，值越大阴影范围越大
padding	EdgeInsetsGeometry （抽象类）	内边距
shape	ShapeBorder（抽象类）	设置按钮的形状
minWidth	double	最小宽度
height	double	高度

而在Android中如果我们要修改按钮样式的话，需要通过selector和Shape等方式进行修改，相比较Flutter来说是要麻烦不少的

RaisedButton

RaisedButton的构造方法如下，由于继承自MaterialButton，所以MaterialButton中的大多数属性这边都能用，且效果一致，这里就不在赘述了

 const RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

下面我们来看一下属性

onPressed
接收一个方法，点击按钮时回调该方法。如果传null，则表示按钮禁用

 return RaisedButton(
      onPressed: null,
    );

下面我们定义一个方法传给onPressed

_log() {
    print("点击了按钮");
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _log,
    );
  }

child
按钮文本控件，一般都是传一个Text Widget

return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
    );

color
按钮的颜色

return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
    );

textColor
按钮的文本颜色

 return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
    );

splashColor
点击按钮时水波纹的颜色

   return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
    
    );

highlightColor
高亮颜色，点击（长按）按钮后的颜色

    return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
      highlightColor: Colors.green,
    );

elevation
阴影范围，一般不会设置太大

    return RaisedButton(
      onPressed: _log,
      child: Text("浮动按钮"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
      highlightColor: Colors.green,
      elevation: 30,
    );

padding
内边距，其接收值的类型是EdgeInsetsGeometry类型的，EdgeInsetsGeometry是一个抽象类，我们来看看其实现类

FlatButton

FlatButton跟RaisedButton用法基本一致，下面我们就直接用一下

/*扁平按钮*/
class FlatBtn extends StatelessWidget {
  _log() {
    print("点击了扁平按钮");
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: _log,
      child: Text("扁平按钮"),
      color: Colors.blue,
      textColor: Colors.black,
      shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.white,
            width: 1,
          ),
          borderRadius: BorderRadius.circular(8)),
    );
  }
}

OutlineButton

注意，OutlineButton是一个有默认边线且背景透明的按钮，也就是说我们设置其边线和颜色是无效的，其他属性跟MaterialButton中属性基本一致

下面我们直接来使用

/*带边线的按钮*/
class outlineBtn extends StatelessWidget {
  _log() {
    print("点击了边线按钮");
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return OutlineButton(
      onPressed: _log,
      child: Text("边线按钮"),
      textColor: Colors.red,
      splashColor: Colors.green,
      highlightColor: Colors.black,
      shape: BeveledRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 1,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}