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

一.复习上一节

1、侧边栏实现

Scaffold(drawer: Drawer(child: MyDrawerWidget()))

2、关闭侧边栏

Navigator.of(context).pop()

二.常用按钮介绍

Flutter 里有很多button组件，常见的组件有RaisedButton、FlatButton、IconButton、OutLineButton、FloatingActionButton等

RaisedButton ：凸起按钮，就是Material Design风格的Button

FlatButton：扁平化按钮

OutLineButton：线框按钮

IconButton：图标按钮

ButtonBar：按钮

FloatingActionButton：浮动按钮

按钮组件中常用的属性

onPressed:必填参数，按钮触发时回掉，传null会显示禁用样式。

child:子控件

textColor：文本的颜色

diabledColor：禁用时的颜色

diabledTextColor：按钮禁用时的文本的颜色

spalshColor：点击按钮时水波纹的颜色

hightligntColor：长按按钮的颜色

elevaton：阴影的范围，值越大，范围越大

padding：内边距

shape：设置按钮的形状 RoundedRectangleBorder

三. RaisedButton、FlatButton、OutlineButton

RaisedButton、FlatButton、OutlineButton 组件用法相同

RaisedButton

 RaisedButton(
          child: Text("点击收起侧边栏"),
          color: Colors.red,
          textColor: Colors.green,
          onPressed: () {
            Navigator.of(context).pop();
          },
        )

RaisedButton.icon

RaisedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.access_time),
            label: Text("图标按钮"))

FlatButton

 FlatButton(
          child: Text("FlatButton"),
          color: Colors.blue,
          textColor: Colors.black,
          onPressed: () {},
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))

OutlineButton

OutlineButton(
            child: Text("OutlineButton"),
            color: Colors.black,
            textColor: Colors.red,
            onPressed: () {
              Navigator.of(context).pop();
            })

按钮添加圆角

 RaisedButton(
      child: Text("圆角按钮"),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      onPressed: (){
        print("圆角按钮");
      },
    )

按钮添加圆形

RaisedButton(
      child: Text("圆形按钮"),
      splashColor: Colors.grey,
      shape: CircleBorder(side: BorderSide(color: Colors.white)),
      onPressed: (){
        print("圆形按钮");
      },
    )

四.IconButton

 IconButton(
      icon: Icon(Icons.list),
      onPressed: () {},
    )

五.ButtonBar 按钮组: 多个按钮放在一起

 ButtonBar(
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.list),
          onPressed: () {},
        ),
        OutlineButton(
          child: Text("按钮"),
          onPressed: () {},
        )
      ],
    )

六.自定义按钮组件

Flutter中提供的按钮设置参数过多，所以我们可以弄自定义按钮

class MainCircleButton extends StatelessWidget {
  Color backColor;
  Color iconColor;
  IconData data;
  String title;
  VoidCallback onPressed;

  MainCircleButton(
      {@required this.backColor,
      @required this.iconColor,
      @required this.data,
      @required this.title,
      @required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      highlightColor: Color.fromARGB(0, 255, 255, 255),
      splashColor: Color.fromARGB(0, 255, 255, 255),
      child: Container(
          alignment: Alignment.center,
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
            color: backColor,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(data, size: 28, color: iconColor),
              Text(title,
                  style: IotThemeOptions.of(context)
                      .overline
                      .copyWith(color: iconColor))
            ],
          )),
      onPressed: onPressed,
    );
  }
}

七.总结

1、FlatButton 和RaisedButton 相似
2、OutlineButton 没有内容,就是一个边框所以设置 color 没效果
3、RaisedButton 没有提供设置宽度的组件，修改宽度包裹一个Container 设置Container的宽高。
4、实现全屏按钮可以外面套Container,Container外面套Expaned。
5、onPressed 为空就相当于 cliclable =false不可点击设置color就不会生效。
6、圆角按钮设置shape ：RoundedRectangleBorder
7、原型按钮设置shape：CircleBorder
8、去掉按钮水波纹效果 splashColor 设置透明色即可

最后编辑于：2020.09.28 14:57:19