Flutter 中的常见的按钮组件 以及自 定义按钮组件

Flutter中的按钮组件介绍

// Flutter提供了多种不同的按钮组件以满足不同的设计和功能需求

// RaisedButton: 凸起的按钮，符合Material Design风格
// FlatButton: 扁平化的按钮，没有明显的边界和背景色
// OutlineButton: 带有线框的按钮，内部通常是透明的
// IconButton: 一个显示图标的按钮，不带文本
// ButtonBar: 一个放置多个按钮的横向组
// FloatingActionButton: 一个圆形的浮动按钮，通常放在屏幕的角落，用于主要操作

Flutter按钮组件中的一些属性

// 在Flutter中，按钮组件有很多共同的属性，以下是一些常见属性的解释：

// onPressed: VoidCallback类型，表示按钮的点击事件处理器，当为null时，按钮会变为禁用状态
// child: Widget类型，按钮内部显示的组件，通常是Text组件显示文本
// textColor: Color类型，按钮文本的颜色
// color: Color类型，按钮的背景颜色
// disabledColor: Color类型，按钮处于禁用状态时的背景颜色
// disabledTextColor: Color类型，按钮处于禁用状态时的文本颜色
// splashColor: Color类型，按钮点击时的涟漪颜色
// highlightColor: Color类型，按钮被点击或长按时的高亮颜色
// elevation: double类型，按钮的阴影范围大小
// padding: EdgeInsets类型，按钮的内边距
// shape: Button的形状，可以设置为圆形、圆角矩形等

// 示例：设置圆角矩形的按钮形状
shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
)

// 示例：设置圆形的按钮形状
shape: CircleBorder(
    side: BorderSide(color: Colors.white)
)

代码实现 示例 直接复制查看效果

  import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
  const ButtonDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("按钮演示页面"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: (){

              },
            )
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             MaterialButton(
                height: Screen.width(height: 85),
                color: ColorGather.colorMain(),
                textColor: Colors.white,
                elevation: 2.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(Screen.width(8)))
                ),
                child: Text('确认', style: TextStyle(fontSize: Screen.width(28)),),
                onPressed:() {},
              ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('普通按钮'),
                  onPressed: () {
                    print("普通按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton(
                  child: Text('颜色按钮'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {
                    print("有颜色按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton(
                  child: Text('阴影按钮'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  onPressed: () {
                    print("有阴影按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton.icon(
                    icon: Icon(Icons.search),
                    label: Text('图标按钮'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    // onPressed: null,
                    onPressed: () {
                      print("图标按钮");
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 50,
                  width: 400,
                  child: RaisedButton(
                    child: Text('宽度高度'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: () {
                      print("宽度高度");
                    },
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 60,
                    margin: EdgeInsets.all(10),
                    child: RaisedButton(
                      child: Text('自适应按钮'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("自适应按钮");
                      },
                    ),
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                    child: Text('圆角按钮'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    onPressed: () {
                      print("圆角按钮");
                    }),
                Container(
                  height: 80,
                  child: RaisedButton(
                      child: Text('圆形按钮'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      splashColor: Colors.red,
                      shape:
                          CircleBorder(side: BorderSide(color: Colors.white)),
                      onPressed: () {
                        print("圆形按钮");
                      }),
                ),
                FlatButton(
                  child: Text("按钮"),
                  color: Colors.blue,
                  textColor: Colors.yellow,
                  onPressed: () {
                    print('FlatButton');
                  },
                ),
                SizedBox(width: 10),
                OutlineButton(
                    child: Text("按钮"),
                    //  color: Colors.red,  //没有效果
                    //  textColor: Colors.yellow,
                    onPressed: () {
                      print('FlatButton');
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(20),
                    height: 50,
                    child: OutlineButton(child: Text("注册"), onPressed: () {}),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              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("宽度高度");
                      },
                    ),
                    MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
                      print('自定义按钮');
                    })

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


//自定义按钮组件

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final height;
  const MyButton({this.text='',this.pressed=null,this.width=80,this.height=30}) ;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed:this.pressed ,
      ),
    );
  }
}