Flutter RaisedButton FlatButton OutlineButton ButtonBar

Flutter 系列文章 总体目录

RaisedButton、 FlatButton 、OutlineButton的区别

RaisedButton	带阴影的按钮
FlatButton	无阴影的按钮
OutlineButton	带边框的按钮

效果如果：

1、RaisedButton

基本属性如下：

onPressed	点击时触发，如果不设置此属性 Button为不可用状态
onHighlightChanged	高亮变化回调，参数：是否高亮，按下时高亮，抬起不高亮，
textTheme	字体theme，属性有：ButtonTextTheme.normal、ButtonTextTheme.accent、ButtonTextTheme.primary
textColor	字体颜色
disabledTextColor	禁用状态下字体颜色
color	背景颜色
disabledColor	禁用状态下背景颜色
highlightColor	高亮颜色，按下时的颜色
splashColor	水波纹颜色，按下松开会有水波纹效果
colorBrightness	字体亮度 设置了textColor、color颜色，此值无效
elevation	阴影z轴的值 ，注意看阴影
highlightElevation	高亮 阴影z轴的值
disabledElevation	禁用阴影z轴的值
padding	padding
shape	形状，系统内置了很多shape 以Border为例：
clipBehavior	暂时想不到干什么的
materialTapTargetSize	暂时想不到干什么的
animationDuration	暂时想不到干什么的
child	一般是Text

可以通过RaisedButton.icon设置一个icon

RaisedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.access_alarm),
            label: Text('label')),

2、FlatButton

FlatButton的属性和RaisedButton一样

3、OutlineButton

borderSide	边框样式 ,BorderStyle 样式如下
disabledBorderColor	禁用状态下边框颜色
highlightedBorderColor	高亮状态下边框颜色

4、ButtonBar

ButtonBar 一横排的Button布局

alignment	布局方向，默认MainAxisAlignment.end
mainAxisSize	主轴大小，默认MainAxisSize.max
children	Button集合

demo：

import 'package:flutter/material.dart';

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('RaisedButton'),
            ),
            FlatButton(
              onPressed: () {},
              child: Text('FlatButton'),
            ),
            OutlineButton(
              onPressed: () {},
              color: Colors.red,
              child: Text('OutlineButton'),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            OutlineButton(
              onPressed: () {},
              child: Text('none'),
              borderSide: BorderSide(color:Colors.green,width: 2.0,style: BorderStyle.none),
            ),
            OutlineButton(
              onPressed: () {},
              child: Text('solid'),
              borderSide: BorderSide(color:Colors.green,width: 2.0,style: BorderStyle.solid),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('onPressed'),
            ),
            RaisedButton(
              child: Text('not press'),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('normal'),
              textTheme: ButtonTextTheme.normal,
            ),
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('accent'),
              textTheme: ButtonTextTheme.accent,
            ),
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('primary'),
              textTheme: ButtonTextTheme.primary,
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              child: Text('not press'),
              disabledColor: Colors.red,
            )
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('darks'),
              colorBrightness: Brightness.dark,
            ),
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('light'),
              colorBrightness: Brightness.light,
            ),
          ],
        ),
        Row(

          children: <Widget>[
            RaisedButton(
                onPressed: (){print('onPressed');},
                child: Text('elevation=10'),
              elevation: 10,
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('Border'),
              shape: Border.all(),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('nonenonenonenonenone');},
              child: Text('nonenonenonenonenone'),
              clipBehavior: Clip.none,
            ),

            RaisedButton(
              onPressed: (){print('hardEdge');},
              child: Text('hardEdge'),
              clipBehavior: Clip.hardEdge,
            ),

          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('antiAlias');},
              child: Text('antiAlias'),
              clipBehavior: Clip.antiAlias,
            ),
            RaisedButton(
              onPressed: (){print('antiAliasWithSaveLayer');},
              child: Text('antiAliasWithSaveLayer'),
              clipBehavior: Clip.antiAliasWithSaveLayer,
            ),
          ],
        ),

        RaisedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.access_alarm),
            label: Text('label')
        ),
        Container(
          child: ButtonBar(
            children: <Widget>[
              RaisedButton(child: Text('ButtonBar'),),
              RaisedButton(child: Text('ButtonBar'),),
              RaisedButton(child: Text('ButtonBar'),),

            ],
          ),
        ),
      ],
    );
  }
}

整体效果：

交流

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。