2021年Flutter中的按钮组件Button

Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。

常见的按钮组件如下:

1. RaisedButton 凸起的按钮;

2. FlatButton 扁平化的按钮;

3. OutlineButton 线框按钮;

4. IconButton 图标按钮;

5. ButtonBar 按钮组;

6. FloatingActionButton 浮动按钮;

 

按钮组件常见的属性:

1. onPressed  按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式;

2. child 子组件;

3. textColor 文本颜色;

4. color 按钮的颜色;

5. disabledColor 按钮禁用时的颜色;

6. disabledTextColor 按钮禁用时的文本颜色;

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

8. highlightColor 长按按钮后按钮的颜色;

9. elevation 阴影的范围;

10. padding 内边距;

11. shape 按钮的形状。常用以下两种:

(1). RoundedRectangleBorder() 圆角形;

(2). CircleBorder() 全圆形;

 

代码示例:
 

import 'package:flutter/material.dart';
 
class ButtonPage extends StatelessWidget {
    const ButtonPage({Key key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('按钮页面'),
                actions:<Widget>[
                    IconButton(
                        icon:Icon(Icons.search),
                        onPressed: (){
                            print("图标按钮");
                        },
                    )
                ]
            ),
            
            // 浮动按钮
            floatingActionButton: FloatingActionButton(
                child:Icon(Icons.add,color:Colors.blue,size:40,),
                // 点击事件
                onPressed: (){
                    print('浮动按钮');
                },
                // 背景颜色
                backgroundColor: Colors.yellow,
            ),
            // 浮动按钮的位置
            floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
 
            body:Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            RaisedButton(
                                child:Text('普通按钮'),
                                // 背景颜色
                                color:Colors.blue,
                                // 文字颜色
                                textColor: Colors.white,
                                // 按钮阴影
                                elevation: 10,
                                onPressed: (){
                                   print('普通按钮');
                                },
                            ),
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                            RaisedButton.icon(
                                icon: Icon(Icons.search), 
                                label: Text('图标按钮'),
                                onPressed: (){
                                    print('图标按钮');
                                },
                            )
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            // 通过加外层容器设定尺寸来控制按钮的大小
                            Container(
                                width: 140,
                                height:50,
                                child: RaisedButton(
                                    child:Text('设置宽高'),
                                    // 背景颜色
                                    color:Colors.blue,
                                    // 文字颜色
                                    textColor: Colors.white,
                                    // 按钮阴影
                                    elevation: 10,
                                    onPressed: (){
                                        print('设置宽高');
                                    },
                                ),
                            )
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            // 让按钮宽度自适应
                            Expanded(
                                // 通过加外层容器设定尺寸来控制按钮的大小
                                child:Container(
                                    height:80,
                                    margin: EdgeInsets.all(10),
                                    child: RaisedButton(
                                        child:Text('自适应按钮'),
                                        // 背景颜色
                                        color:Colors.blue,
                                        // 文字颜色
                                        textColor: Colors.white,
                                        // 按钮阴影
                                        elevation: 10,
                                        onPressed: (){
                                            print('自适应按钮');
                                        },
                                    ),
                                )
                            )
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            RaisedButton(
                                child:Text('圆角按钮'),
                                // 背景颜色
                                color:Colors.blue,
                                // 文字颜色
                                textColor: Colors.white,
                                // 按钮阴影
                                elevation: 10,
                                // 圆角
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)
                                ),
                                onPressed: (){
                                   print('圆角按钮');
                                },
                            ),
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            Container(
                                height: 80,
                                child: RaisedButton(
                                    child:Text('圆形按钮'),
                                    // 背景颜色
                                    color:Colors.blue,
                                    // 文字颜色
                                    textColor: Colors.white,
                                    // 按钮阴影
                                    elevation: 10,
                                    // 圆角
                                    shape: CircleBorder(
                                        side: BorderSide(color: Colors.black),
                                    ),
                                    // 水波纹
                                    splashColor:Colors.red,
                                    onPressed: (){
                                        print('圆形按钮');
                                    },
                                ),
                            )
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            FlatButton(
                                child: Text('扁平按钮'),
                                color:Colors.blue,
                                textColor: Colors.yellow,
                                onPressed:(){
                                    print('扁平按钮');
                                },
                            )
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            OutlineButton(
                                child: Text('边框按钮'),
                                textColor: Colors.yellow,
                                onPressed:(){
                                    print('边框按钮');
                                },
                            )
                        ],
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            ButtonBar(
                                children:<Widget>[
                                    RaisedButton(
                                        child:Text('按钮组'),
                                        color:Colors.blue,
                                        textColor: Colors.white,
                                        elevation: 20,
                                        onPressed: (){
                                            print('按钮组');
                                        }
                                    ),
                                    RaisedButton(
                                        child:Text('按钮组'),
                                        color:Colors.blue,
                                        textColor: Colors.white,
                                        elevation: 20,
                                        onPressed: (){
                                            print('按钮组');
                                        }
                                    ),  
                                    RaisedButton(
                                        child:Text('按钮组'),
                                        color:Colors.blue,
                                        textColor: Colors.white,
                                        elevation: 20,
                                        onPressed: (){
                                            print('按钮组');
                                        }
                                    )
                                ]
                            )
                        ],
                    ),
                    MyButton(text:'自定义按钮',width:60.0,height:40.0,pressed:(){
                        print('自定义按钮');
                    })
                ],
            )
        );
    }
}
 
// 自定义按钮
class MyButton extends StatelessWidget {
    final text;
    final pressed;
    final width;
    final height;
 
    const MyButton({this.text='',this.width=80.0,this.height=30.0,this.pressed=0});
 
    @override
    Widget build(BuildContext context){
        return Container(
            width:this.width,
            height:this.height,
            child: RaisedButton(
                child: Text(this.text),
                onPressed:this.pressed
            )
        );
    }
}
 

用浮动按钮实现类似闲鱼APP的底部导航条效果,以下是代码示例:

 

import "package:flutter/material.dart";
 
 
// 标签切换页
class Tabs extends StatefulWidget {
    final index;
    Tabs({Key key,this.index=1}) : super(key: key);
    _TabsState createState() => _TabsState(this.index);
}
 
class _TabsState extends State<Tabs>{
 
    // 当前选中标签的下标
    int _currentIndex;
    // 当前页面数组
    List _pageList = [
 
        Center(child:Text("这是首页页面")),
        Center(child:Text("这是分类页面")),
        Center(child:Text("这是设置页面")),
 
    ];
    _TabsState(index){
        this._currentIndex = index;
    }
    @override
    Widget build(BuildContext context) {
    return Container(
        child: Scaffold(
            // 为了调整浮动按钮的大小,外层添加容器
            floatingActionButton:Container(
                height: 70,
                width: 70,
                padding: EdgeInsets.all(6),
                margin:EdgeInsets.only(top:8),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(35),
                    color:Colors.white,
                ),
                child:FloatingActionButton(
                    child:Icon(Icons.add),
                    onPressed:(){
                        // 改变状态
                        setState(() {
                            this._currentIndex=1;
                        });
                    },
                    backgroundColor: this._currentIndex==1?Colors.red:Colors.white
                ),
 
            ),
 
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
 
            // 主体
            body:this._pageList[this._currentIndex],
 
            // 底部导航条
            bottomNavigationBar: BottomNavigationBar(
                // 当前菜单下标
                currentIndex: this._currentIndex,
                // 点击事件,获取当前点击的标签下标
                onTap: (int index){
                    // 改变状态
                    setState(() {
                       this._currentIndex=index;
                    });
                },
                // 图标大小
                iconSize: 30.0,
                // 选中图标的颜色
                fixedColor: Colors.red,
                // 多个标签页的动画效果
                type: BottomNavigationBarType.fixed,
                items: [
                    // 只能是BottomNavigationBarItem的类型
                    BottomNavigationBarItem(
                        icon:Icon(Icons.home),
                        label:"首页"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.category),
                        label:"分类"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.settings),
                        label:"设置"
                    )
                ]
            ),
        ));
    }
}
 
 

 

已标记关键词 清除标记
相关推荐