您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-17(按钮组件、自定义按钮组件、FloatingActionButton)

2020-04-30【Flutter】1421人已围观

简介## 一、Flutter 中的按钮组件介绍 `Flutter` 里有很多的 `Button` 组件很多，常见的按钮组件有：`RaisedButton`、`FlatButton`、 `IconButton`、`OutlineButton`、`ButtonBar`、`FloatingActionButton` 等。 - **RaisedButton** ：凸起的按钮，其实就是 `Material Design` 风格的 `Button` - **FlatButton** ：扁平化的按钮 -

## 一、Flutter 中的按钮组件介绍

`Flutter` 里有很多的 `Button` 组件很多，常见的按钮组件有：`RaisedButton`、`FlatButton`、
`IconButton`、`OutlineButton`、`ButtonBar`、`FloatingActionButton` 等。

- **RaisedButton** ：凸起的按钮，其实就是 `Material Design` 风格的 `Button`
- **FlatButton** ：扁平化的按钮
- **OutlineButton**：线框按钮
- **IconButton** ：图标按钮
- **ButtonBar**:按钮组
- **FloatingActionButton**:浮动按钮

属性名称 | 值类型 | 属性值
---|---|---
onPressed | VoidCallback，一般接收一个方法 | 必填参数，按下按钮时触发的回调，接收一个方法，传 null 表示按钮禁用，会显示禁用相关样式
child | Widget | 文本控件
textColor | Color | 文本颜色
color | Color | 按钮的颜色
disabledColor | Color | 按钮禁用时的颜色
disabledTextColor | Color | 按钮禁用时的文本颜色
splashColor | Color | 点击按钮时水波纹的颜色
highlightColor | Color | 点击（长按）按钮后按钮的颜色
elevation | double | 阴影的范围，值越大阴影范围越大
padding | | 内边距
shape | | 设置按钮的形状 shape: RoundedRectangleBorder( &nbsp;&nbsp;borderRadius: &nbsp;&nbsp;BorderRadius.circular(10), ) shape: CircleBorder( &nbsp;&nbsp;side: BorderSide( &nbsp;&nbsp;&nbsp;&nbsp;color: Colors.white, &nbsp;&nbsp;) )

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200310194205.png)

> ButtonDemo.dart

```
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("按钮演示页面"),
 ),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 RaisedButton(
 child: Text('普通按钮'),
 onPressed: () {
 print('点击了');
 },
 ),
 SizedBox(width: 20),
 RaisedButton(
 child: Text('有颜色的按钮'),
 textColor: Colors.white,
 color: Colors.blue,
 onPressed: () {
 print('点击了');
 },
 ),
 SizedBox(width: 20),
 RaisedButton(
 child: Text('阴影按钮'),
 textColor: Colors.white,
 color: Colors.blue,
 elevation: 10,
 onPressed: () {
 print('点击了');
 },
 )
 ],
 ),
 SizedBox(height: 40),
 Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Container(
 height: 60,
 width: 200,
 child: RaisedButton(
 child: Text('有宽高的按钮'),
 textColor: Colors.white,
 color: Colors.blue,
 elevation: 10,
 onPressed: () {
 print('点击了');
 },
 ))
 ],
 ),
 SizedBox(height: 40),
 Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Expanded(
 child: Container(
 height: 60,
 margin: EdgeInsets.all(20),
 child: RaisedButton(
 child: Text('全屏按钮'),
 textColor: Colors.white,
 color: Colors.blue,
 elevation: 10,
 onPressed: () {
 print('点击了');
 },
 ),
 ))
 ],
 ),
 Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Expanded(
 child: Container(
 height: 60,
 margin: EdgeInsets.all(20),
 child: RaisedButton(
 child: Text('带圆角的按钮'),
 textColor: Colors.white,
 color: Colors.blue,
 elevation: 10,
 shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.circular(10),
 ),
 onPressed: () {
 print('点击了');
 },
 ),
 ))
 ],
 )
 ],
 ),
 ),
 );
 }
}

```

## 二、Flutter FloatingActionButton 介绍

`FloatingActionButton`  简称  `FAB` ,可以实现浮动按钮，也可以实现类似闲鱼 `app` 的地步**凸起导航**

属性名称 | 属性值
---|---|---
child | 子视图，一般为 Icon，不推荐使用文字
tooltip FAB | 被长按时显示，也是无障碍功能
backgroundColor | 背景颜色
elevation | 未点击的时候的阴影
hignlightElevation | 点击时阴影值，默认 12.0
onPressed | 点击事件回调
shape | 可以定义 FAB 的形状等
mini | 是否是 mini 类型默认 false

## 三、FloatingActionButton  实现闲鱼 app 底部凸起按钮

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200310214716.png)

```
return Scaffold(
  appBar: AppBar(
    title: Text("Flutter Demo"),
  ),
  floatingActionButton: Container(
    height: 80,
    width: 80,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(40),
      color: Colors.white,
    ),
    margin: EdgeInsets.only(top: 10),
    padding: EdgeInsets.all(8),
    child: FloatingActionButton(
      child: Icon(Icons.add),
      backgroundColor: this._currentIndex == 1 ? Colors.red : Colors.yellow,
      onPressed: () {
        setState(() {
          this._currentIndex = 1;
        });
      },
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  body: this._pageList[this._currentIndex],
  
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: this._currentIndex, //配置对应的索引值选中
    onTap: (int index) {
      setState(() {
        //改变状态
        this._currentIndex = index;
      });
    },
    iconSize: 36.0, //icon的大小
    fixedColor: Colors.red, //选中的颜色
    type: BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
      BottomNavigationBarItem(
          icon: Icon(Icons.category), title: Text("分类")),
      BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置"))
    ],
  ),
);
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-16(Drawer 侧边栏、、以及侧边栏内容布局)

下一篇：flutter-18(表单)