其他分享
首页 > 其他分享> > Flutter Button 组件

Flutter Button 组件

作者:互联网

目录

参数详解

代码示例

效果图

完整代码 


 在 Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

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

 

参数详解

属性 说明
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:左上角

代码示例

return Container(
      padding: EdgeInsets.all(8),
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment(-1,-1),
            child: 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;
                    });
                  },
                )
              ],
            ),
          ),
        ],
      ),
    );
        //floatingActionButton 按钮
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red[500],
          child: Icon(Icons.add_comment),
          tooltip:'干啥',
          onPressed: () {print('我是Floating Action Button');},
        ),
        //floatingActionButton 按钮位置
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

效果图

完整代码 

 查看完整代码

标签:onPressed,color,Text,Button,child,Colors,按钮,组件,Flutter
来源: https://blog.csdn.net/ruoshui_t/article/details/91428229