Flutter 系列（五）：Flutter 常用按钮 Widget

站长

2023年07月26日 06:04 · 阅读数 21

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

前言

很高兴遇见你~

在本系列的上一篇文章中，我们通过：效果展示 -> Widget 介绍 -> 代码实现的方式对 Image，ListView，GridView，Stack 进行了介绍，并穿插讲解了一些其它 Widget ，最后通过一个综合案例对学习的 Widget 进行了组合使用。还没有看过上一篇文章的朋友，建议先去阅读 Flutter 系列（四）：Flutter 常用 Widget 二。接下来我们对 Flutter 按钮 Widget 进行学习

Flutter 中的按钮 Widget 有很多，常见的按钮 Widget 有：RaisedButton，FlatButton，IconButton，OutlineButton，ButtonBar，FloatingActionButton 等，下面就介绍一下这些常用的 Widget

一、Flutter 常用按钮 Widget 介绍

1.1、Flutter 按钮 Widget 通用属性

首先介绍一下，按钮 Widget 都有的一些属性：

属性名称	属性类型	说明
onPressed	VoidCallback	此项为必填参数，按下按钮时触发的回调，接收一个方法作为参数，传 null 表示按钮禁用，会显示禁用相关样式
child	Widget	子控件，一般我们会使用文本 Widget 来填充
textColor	Color	文本颜色
color	Color	按钮背景颜色
disabledColor	Color	按钮禁用时的背景颜色
disabledTextColor	Color	按钮禁用时的文本颜色
splashColor	Color	点击按钮时的水波纹颜色
highlightColor	Color	长按按钮后按钮的背景颜色
elevation	double	按钮阴影的范围，值越大阴影范围越大
padding	EdgeInsetsGeometry	內边距
shape	ShapeBorder	设置按钮的形状，ShapeBorder 实现类有：RoundedRectangleBorder：圆角形状CircleBorder：圆形形状

介绍完了按钮 Widget 的通用属性，接下来我们看下每个按钮初始形态的一个效果，在结合这些按钮做一个综合案例

1.2、RaisedButton

RaisedButton 见名知意：凸起的按钮，其实就是 Flutter 给我们提供的 Material Design 风格的按钮：

运行如下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Button Widget"), //设置标题栏标题
        ),
        body: MyBodyPage() //自定义 Widget
    ),
  ));
}

class MyBodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //使用 ListView 让按钮自适应屏幕宽度
    return ListView(
      //内间距 20
      padding: EdgeInsets.all(20),
      children: [
        //RaisedButton 凸起按钮
        RaisedButton(
          onPressed:(){},
          child: Text("RaisedButton"),
        )
      ],
    );
  }
}

效果展示：

默认情况下是一个灰色背景的凸起按钮

1.3、FlatButton

FlatButton 见名知意：扁平的按钮，和 RaiseButton 刚好相反，没有凸起的效果。将上述 RaiseButton 换成 FlatButton 效果如下：

可以看到，它没有背景，就像一个文本 Widget 一样

1.4、OutlineButton

OutlineButton 见名知意：带线框的按钮，它就像是 FlatButton 加了一个边框。将上述 RaiseButton 换成 OutlineButton 效果如下：

1.5、IconButton

IconButton 见名知意：带 Icon 的按钮。将上述 RaiseButton 换成 IconButton 并做属性的调整：

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

效果如下：

1.6、ButtonBar

ButtonBar 是一个按钮组，我们可以在它的 children 属性中放入多个按钮，如下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Button Widget"), //设置标题栏标题
        ),
        body: MyBodyPage() //自定义 Widget
    ),
  ));
}

class MyBodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      //按钮组
      children: [
        RaisedButton( //RaisedButton
          onPressed: () {},
          child: Text("RaisedButton"),
        ),
        FlatButton( //FlatButton
          onPressed: () {},
          child: Text("FlatButton"),
        ),
        OutlineButton( //OutlineButton
          onPressed: () {},
          child: Text("OutlineButton"),
        ),
        IconButton( //IconButton
          icon: Icon(Icons.home),
          onPressed: () {},
        )
      ],
    );
  }
}

效果：

1.7、FloatingActionButton

FloatingActionButton 简称 FAB，可以实现浮动按钮。它常用的一些属性：

属性名称	属性类型	说明
onPressed	VoidCallback	此项为必填参数，按下按钮时触发的回调，接收一个方法作为参数，传 null 表示按钮禁用，会显示禁用相关样式
child	Widget	子控件，一般为 Icon，不推荐使用文字
backgroundColor	Color	背景颜色
elevation	double	未点击时候的阴影
highlightElevation	double	点击时的阴影值，默认为：12.0
shape	ShapeBorder	定义 FAB 的形状
mini	bool	是否是 mini 类型，默认为：false

如下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Button Widget"), //设置标题栏标题
        ),
        body: MyBodyPage() //自定义 Widget
    ),
  ));
}

class MyBodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(20),
      children: [
        FloatingActionButton( //FloatingActionButton 按钮
          onPressed: (){},
          child: Icon(Icons.search),
          backgroundColor: Colors.lightGreen,
          elevation: 20,
        )
      ],
    );
  }
}

效果：

二、Flutter 2.x 按钮 Widget 的变化

如果你是 Flutter 2.x 的版本，你会发现之前的一些按钮 Widget 被废弃了：

主要是上面这三个按钮的变化，取而代之的是：

Flutter 1.x 中的按钮 Widget	Flutter 2.x 中的按钮 Widget
RaisedButton 凸起按钮	ElevatedButton 凸起按钮
FlatButton 扁平按钮	TextButton 扁平按钮
OutlinedButton 线框按钮	OutlinedButton 线框按钮

另外在 1.x 中设置的一系列属性，如：color，textColor，elevation，shape等在 2.x 中都被封装到了 style 属性中，style 属性接收一个 ButtonStyle 类型的对象，介绍一下 ButtonStyle 中的常用属性：

属性名称	属性类型	说明
textStyle	MaterialStateProperty	文本的样式但是对于颜色是不起作用的
backgroundColor	MaterialStateProperty	按钮背景色
foregroundColor	MaterialStateProperty	文本及图标颜色
overlayColor	MaterialStateProperty	高亮色，按钮处于 focused，hovered or pressed 时的颜色
shadowColor	MaterialStateProperty	阴影颜色
elevation	MaterialStateProperty	按钮阴影的范围，值越大阴影范围越大
padding	MaterialStateProperty	按钮内边距
minimumSize	MaterialStateProperty	按钮最小值
fixedSize	MaterialStateProperty	按钮大小
maximumSize	MaterialStateProperty	按钮最大值
side	MaterialStateProperty	边框
shape	MaterialStateProperty	设置按钮的形状
alignment	AlignmentGeometry	按钮子 Widget 对齐方式

实践对比：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Button Widget"), //设置标题栏标题
        ),
        body: MyBodyPage() //自定义 Widget
    ),
  ));
}

class MyBodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(20),
      children: [
        RaisedButton( //RaisedButton
          onPressed: (){},
          child: Text("RaisedButton"),
          textColor: Colors.white, //文本颜色
          color: Colors.green, //按钮背景颜色
          splashColor: Colors.red, //水波纹颜色
          elevation: 20, //阴影的范围
          shape: RoundedRectangleBorder( //设置 20 的圆角
            borderRadius: BorderRadius.circular(20)
          )
        ),
        SizedBox(height: 40),
        ElevatedButton( //ElevatedButton
            onPressed: (){},
            child: Text("ElevatedButton"),
            style: ButtonStyle(
              foregroundColor: MaterialStateProperty.all(Colors.white), //文本颜色
              backgroundColor: MaterialStateProperty.all(Colors.green), //按钮背景颜色
              overlayColor: MaterialStateProperty.all(Colors.red), //水波纹颜色
              elevation: MaterialStateProperty.all(20), //阴影的范围
              shape: MaterialStateProperty.all(//设置 20 的圆角
                  RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20)
                  )
              )
            ),
        )
      ],
    );
  }
}

效果：

三、按钮 Widget 组合之综合案例

在讲综合案例之前我们先学习下 BottomNavigationBar ，一会会用到

3.1、BottomNavigationBar 介绍

BottomNavigationBar 是 Flutter 给我们提供的底部导航栏 Widget，一般用在 Scaffold 的 bottomNavigationBar 属性中

BottomNavigationBar 常用属性介绍：

属性名称	属性类型	说明
items	List	必须属性，最少要有两个子 Widget
onTap	ValueChanged	Widget 点击事件
currentIndex	int	当前显示的是哪个 Widget
elevation	double	阴影范围
type	BottomNavigationBarType	BottomNavigationBarType.fixed：固定BottomNavigationBarType.shifting：可滑动
fixedColor	Color	相当于 selectedItemColor，但是不能跟 selectedItemColor 同时存在
backgroundColor	Color	背景颜色
iconSize	double	设置图标大小
selectedItemColor	Color	设置 Widget 选中的颜色
unselectedItemColor	Color	设置 Widget 未选中的颜色
selectedFontSize	double	设置 Widget 选中时文字的大小
unselectedFontSize	double	设置 Widget 未选中时文字的大小

运行下面代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Button Widget"), //设置标题栏标题
        ),
        bottomNavigationBar: MyBottomNavigationBar(),
    ),
  ));
}

class MyBottomNavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        iconSize: 35, //图标大小 35
        fixedColor: Colors.green, //图片颜色绿色
        type: BottomNavigationBarType.fixed, //item 固定显示
        items: [ //设置了 3 个 子 item
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
        ]);
  }
}

效果：

3.2、综合案例

接下来我们就使用按钮 Widget 组合来实现如下效果：

简单的分析下这个页面：最外层有个内间距（Padding），接下来就是一个从上往下排列的垂直布局（Column），垂直布局里面有一系列使用 button 实现的按钮，简单起见，我们这里使用 Flutter 1.x 系列的 Button 去实现，最后底部有一个 BottomNavigationBar，BottomNavigationBar 中间有一个凸起的 FloatingActionButton，类似咸鱼中间发布按钮的效果。

接下来，我们就用代码实现一下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Flutter Button Practice"), //设置标题栏标题
      ),
      body: MyBodyPage(), //自定义 body Wdiget
      bottomNavigationBar: MyBottomNavigationBar(), //自定义 bottomNavigationBar Widget
      floatingActionButton: MyFloatingActionButton(), //自定义 floatingActionButton Widget
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //floatingActionButton 在底部中心停靠
    ),
  ));
}

//自定义 BottomNavigationBar
class MyBottomNavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        iconSize: 35, //图标大小 35
        fixedColor: Colors.green, //选中颜色为绿色
        type: BottomNavigationBarType.fixed, //item 固定显示
        items: [ //设置了 3 个 子 item
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
        ]);
  }
}

//自定义 FloatingActionButton
class MyFloatingActionButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    //使用 Container 包裹 FloatingActionButton 在外层加一个白色的边框
    return  Container(
      width: 80,
      height: 80,
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(40)
      ),
      child: FloatingActionButton(
        backgroundColor: Colors.yellow,
        onPressed: (){},
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyBodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(//Padding 实现内间距 20
      padding: EdgeInsets.all(20),
      child: Column(
        children: [
          Row( //第一排：普通按钮 + 红色按钮 + 带阴影的按钮
            children: [
              RaisedButton(
                onPressed: (){},
                child: Text("普通按钮"),
              ),
              SizedBox(width: 20),
              RaisedButton(
                onPressed: (){},
                child: Text("红色按钮"),
                color: Colors.red,
                textColor: Colors.white,
              ),
              SizedBox(width: 20),
              RaisedButton(
                onPressed: (){},
                child: Text("带阴影的按钮"),
                color: Colors.blue,
                textColor: Colors.white,
                elevation: 20,
              )
            ],
          ),
          SizedBox(height: 20),
          Container( //第二排：自适应按钮
            height: 60,
            width: double.infinity,
            child: RaisedButton(
              onPressed: () {},
              child: Text("自适应按钮"),
              textColor: Colors.white,
              color: Colors.blue,
            ),
          ),
          SizedBox(height: 20),
          Row(children: [ //第三排：icon 按钮 + 有宽高的按钮
            RaisedButton.icon(
              onPressed: (){},
              icon: Icon(Icons.home),
              label: Text(" Icon 按钮"),
              color: Colors.yellow,
              textColor: Colors.green,
            ),
            SizedBox(width: 20),
            Container(
              height: 60,
              width: 200,
              child: RaisedButton(
                onPressed: () {},
                child: Text("有宽高的按钮"),
                textColor: Colors.white,
                color: Colors.orange,
              ),
            )
          ]),
          SizedBox(height: 20),
          Container( //第四排：自适应带圆角的按钮
            height: 60,
            width: double.infinity,
            child: RaisedButton(
              onPressed: () {},
              child: Text("自适应带圆角的按钮"),
              textColor: Colors.white,
              color: Colors.blue,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(100)
              ),
            ),
          ),
          SizedBox(height: 20),
          Container( //第五排：圆形按钮
            height: 100,
            width: 150,
            child: RaisedButton(
              onPressed: () {},
              child: Text('圆形按钮'),
              textColor: Colors.white,
              color: Colors.lightGreen,
              elevation: 20,
              splashColor: Colors.green,
              shape: CircleBorder(side: BorderSide(color: Colors.white)),
            ),
          ),
          SizedBox(height: 20),
          Container( //第六排：注册按钮
            width: double.infinity,
            height: 50,
            margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
            child:  OutlineButton(
              child: Text("注册"),
              onPressed: (){},
              borderSide: BorderSide(
                  width: 1,
                  color: Colors.red
              ),
            ),
          ),
          SizedBox(height: 20),
          Container( //第七排：登陆按钮
            width: double.infinity,
            height: 50,
            margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
            child:  RaisedButton(
              child: Text("登陆"),
              onPressed: (){},
              color: Colors.blue,
              textColor: Colors.white,
            ),
          )
        ],
      ),
    );
  }
}

四、总结

本篇我们讲了：

1、Flutter 中常用的按钮 Widget ：RaisedButton，FlatButton，IconButton，OutlineButton，ButtonBar，FloatingActionButton

2、介绍了 Flutter 1.x 和 Flutter 2.x 按钮相关的变化及使用

Flutter 2.x 中常用的属性都被封装到了 style 属性中

3、介绍了 BottomNavigationBar，并通过 Flutter 1.x 相关 Button + BottomNavigationBar + FloatingActionButton 实现了一个综合案例

好了，本篇文章到这里就结束了，希望能给你带来帮助 🤝

感谢你阅读这篇文章

下篇预告

下篇文章我会介绍 Flutter 表单相关 Widget ，尽请期待吧😄

参考和推荐

Flutter 教程：通俗易懂的 Flutter 入门教程

你的点赞，评论，是对我巨大的鼓励！

欢迎关注我的公众号： sweetying ，文章更新可第一时间收到

如果有问题，公众号内有加我微信的入口，在技术学习、个人成长的道路上，我们一起前进！