Flutter 按钮Button多样式练习

目录

一、Flutter 常用的 Button

二、演示图如下

三、代码案例

四、参数详解

---

一、Flutter 常用的 Button

 

• RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button
• FlatButton：扁平化的按钮
• OutlineButton：线框按钮
• IconButton：图标按钮
• ButtonBar：按钮组
• FloatingActionButton：浮动按钮
• DropdownButton：下拉框按钮

 

---

二、演示图如下

---

三、代码案例

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Button'),),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red[500],
          child: Icon(Icons.add_comment),
          tooltip:'测试',
          onPressed: () {print('loating Action Button');},
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

        body: MyBody(),

      ),
    );
  }
}

class MyBody extends StatefulWidget {
  @override
  _MyBodyState createState() => _MyBodyState();
}

class _MyBodyState extends State<MyBody> {
  var value;
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Column(
        children: <Widget>[
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: <Widget>[
              RaisedButton(
                child: Text('普通按钮'),
                onHighlightChanged:(bool b) {
                  print(b);
                },
                onPressed: (){},
              ),

              RaisedButton(
                child: Text('带颜色'),
                onPressed: (){},
                textColor: Colors.white,
                color: Colors.blue[200],
              ),

              RaisedButton(
                child: Text('带颜色带阴影'),
                onPressed: (){},
                textColor: Colors.white,
                color: Colors.blue[200],
                elevation: 15,
              ),

              Container(
                width: 300,
                height: 50,
                child: RaisedButton(
                  child: Text('设置宽高'),
                  onPressed: (){},
                  textColor: Colors.white,
                  color: Colors.blue[500],
                  elevation: 15,
                ),
              ),

              RaisedButton.icon(
                icon: Icon(Icons.account_box),
                label: Text('我前边有图标'),
                onPressed: () {},
              ),

              RaisedButton(
                child: Text('圆角按钮'),
                onPressed: (){},
                color: Colors.red,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)
                ),
              ),

              Container(
                width: 100,
                height: 100,
                child: RaisedButton(
                    child: Text('圆形按钮'),
                    onPressed: (){},
                    color: Colors.red,
                    shape: CircleBorder(
                      // side: BorderSide(color: Colors.yellow[500])
                    )
                ),
              ),

              RaisedButton(
                child: Text('水波纹'),
                onPressed: (){},
                color: Colors.blue[200],
                splashColor:Colors.yellow[100],
              ),

              RaisedButton(
                child: Text('长按变色'),
                onPressed: (){},
                color: Colors.blue[200],
                highlightColor:Colors.red[500],
              ),

              FlatButton(
                child: Text('扁平按钮'),
                onPressed: (){},
                color: Colors.blue[200],
              ),

              OutlineButton(
                child: Text('边框按钮'),
                onPressed: (){},
                textColor: Colors.red,
                borderSide: BorderSide(color: Colors.red,),
              ),

              IconButton(
                icon: Icon(Icons.access_alarms),
                onPressed: () {},
                color: Colors.deepOrange,
                splashColor:Colors.limeAccent,
                highlightColor:Colors.blue[300],
                tooltip:'干啥',
              ),

              DropdownButton(
                hint:new Text('请选择...'),
                value: value,//下拉菜单选择完之后显示给用户的值
                iconSize: 50.0,//设置三角标icon的大小
                items: <DropdownMenuItem>[
                  DropdownMenuItem(
                    value: '1',
                    child: Text('One'),
                  ),
                  DropdownMenuItem(
                    value: '2',
                    child: Text('Two'),
                  ),
                  DropdownMenuItem(
                    value: '3',
                    child: Text('Three'),
                  ),
                  DropdownMenuItem(
                    value: '4',
                    child: Text('four'),
                  ),
                  DropdownMenuItem(
                    value: '5',
                    child: Text('five'),
                  ),
                ],
                onChanged: (v) {
                  setState(() {
                    print(v);
                    value = v;
                  });
                },
              ),
            ],
          ),


          Container(
            color: Colors.pink[100],
            child: ButtonBar(
              children: <Widget>[
                RaisedButton(
                  child: Text('按钮一'),
                  onPressed: (){},
                  textColor: Colors.white,
                  color: Colors.blue,
                  elevation: 15,
                ),
                RaisedButton(
                  child: Text('按钮二'),
                  onPressed: (){},
                  textColor: Colors.white,
                  color: Colors.blue,
                  elevation: 15,
                ),
              ],
            ),
          ),

          Container(
            alignment: Alignment.center,
            child: Column(
              children: <Widget>[
                SizedBox(height: 30,),
                Text("一个Button事件与回调，更改数值"),

                SizedBox(height: 15,),
                Text("$count",style: TextStyle(fontSize: 50,color: Colors.purple,fontWeight:FontWeight.w800)),
                SizedBox(height: 20,),

                RaisedButton(
                  child: Text('点我',style: TextStyle(fontSize: 18),),
                  onPressed: (){setState(() {
                    count += 1;
                  });},
                  textColor: Colors.white,
                  color: Colors.blue,
                  elevation: 15,
                ),
              ],
            ),
          )
        ],
      ),
    );

  }
}

---

四、参数详解

属性	说明
onPressed	点击事件监听，传 null 表示按钮禁用
onHighlightChanged	水波纹高亮变化回调,按下返回true,抬起返回false
textTheme	定义按钮主题
textColor	按钮文字颜色
disabledTextColor	无效按钮文字颜色
color	按钮颜色
disabledColor	无效按钮颜色
focusColor	获取焦点 按钮颜色
hoverColor	不知道啥玩应儿
highlightColor	长按 按钮颜色
splashColor	点击 水波纹 颜色
colorBrightness	官网：用于此按钮的主题亮度。默认为主题的亮度
elevation	阴影
focusElevation
hoverElevation
highlightElevation
disabledElevation
padding	内边距
shape	设置形状，如圆角，圆形等
clipBehavior	剪裁 Clip.antiAlias：剪辑具有抗锯齿功能 Clip.antiAliasWithSaveLayer：在剪辑后立即剪辑具有抗锯齿和saveLayer Clip.hardEdge：剪辑，但不应用抗锯齿。 Clip.none：不剪辑。
focusNode	焦点
materialTapTargetSize
animationDuration
child
OutlineButton 特性
borderSide	线框    线颜色 ，如红色：BorderSide(color: Colors.red,),
clipBehavior	相框风格，如：Clip.antiAlias
RaisedButton.icon 特性
icon	图标
label	通常是文字
IconButton 特性
icon	图标
color	图标颜色
tooltip	长按文字提示
DropdownButton 特性    DropdownButton
hint	提示语
value	当前值
iconSize	下拉框图片大小
icon	右边图标  默认为下三角
items	下拉框数据集合
onChanged	监听
FloatingActionButton 特性
child	子元素，一般为 Icon，不推荐使用文字
tooltip	长按文字提示
backgroundColor	背景颜色（默认使用主题颜色）
mini	是否是 mini 类型默认 false
设置位置，在外部使用（与FloatingActionButton同级）floatingActionButtonLocation。 FloatingActionButtonLocation.centerDocked： 底部剧中  与底部无间距 FloatingActionButtonLocation.centerFloat： 底部剧中  与底部有间距 FloatingActionButtonLocation.endDocked：右下角  与底部无间距 FloatingActionButtonLocation.endFloat：右下角  与底部有间距 FloatingActionButtonLocation.endTop：右上角   FloatingActionButtonLocation.startTop：左上角

 

参考：https://blog.youkuaiyun.com/ruoshui_t/article/details/91428229