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

携手创作，一同成长！这是我参与「日新方案 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 ，文章更新可第一时间收到

如果有问题，大众号内有加我微信的进口，在技能学习、个人成长的道路上，咱们一同行进！

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

前言

一、Flutter 常用按钮 Widget 介绍

1.1、Flutter 按钮 Widget 通用特点

1.2、RaisedButton

1.3、FlatButton

1.4、OutlineButton

1.5、IconButton

1.6、ButtonBar

1.7、FloatingActionButton

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

三、按钮 Widget 组合之归纳事例

3.1、BottomNavigationBar 介绍

3.2、归纳事例

四、总结

下篇预告

参阅和引荐

相关文章

一盏茶的功夫带你掌握烦人的 this 指向问题（ 二 ）

Google Maps iOS SDK 教程：入门

优雅封装RabbitMQ实现动态队列、动态生产者，动态消费者绑定

【Hertz 新手小册】Day 1. 了解 Hertz

作者信息

一盏茶的功夫带你掌握烦人的 this 指向问题（二）