flutter定义按钮,flutter自定义弹框

Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下

我们先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。

下面我们来看看常用属性

而在Android中如果我们要修改按钮样式的话，需要通过selector和Shape等方式进行修改，相比较Flutter来说是要麻烦不少的

RaisedButton的构造方法如下，由于继承自MaterialButton，所以MaterialButton中的大多数属性这边都能用，且效果一致，这里就不在赘述了

下面我们来看一下属性

接收一个方法，点击按钮时回调该方法。如果传null，则表示按钮禁用

如下图所示

按钮文本控件，一般都是传一个Text Widget

按钮颜色

按钮的文本颜色

点击按钮时水波纹颜色

高亮颜色，点击（长按）按钮后的颜色

阴影范围，一般不会设置太大

内边距,使用

或者

shape用来设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder是一个抽象类，我们来看看有哪些实现类

可以看到，实现类还是很多的，我们主要来看看常用的即可。

borderRadius 接收一个BorderRadius类型的值，常用方法如下

我们可以把borderRadius分为上下左右四个方向，下面的方法都是对这四个方向进行设置，

带斜角的长方形边框

圆形边框

圆角矩形

两端是半圆的边框

FlatButton跟RaisedButton用法基本一致，下面我们就直接用一下

注意，OutlineButton是一个有默认边线且背景透明的按钮，也就是说我们设置其边线和颜色是无效的，其他属性跟MaterialButton中属性基本一致

下面我们直接来使用

效果如下：

IconButton是直接继承自StatelessWidget的，默认没有背景

我们来看一下他的构造方法

可以看到，icon是必填参数

icon接收一个Widget，但是一般我们都是传入一个Icon Widget

其他属性跟MaterialButton中的属性用法基本一致

我们来用一下

效果如下：

我们也可以传一个Text或其他Widget，这个大家自行尝试吧

如果我们需要设置按钮的最小宽度以及高度，button属性中并没有提供对应的设置方法

使用如下：

Flutter中Button内容大概就是这些

相关问答

Q1: 【Flutter】按钮与文本（三）

此控件比较简单，按钮的功能可划分为UI样式与事件回调

这里将几种不同的按钮一起运行，做下对比动图如下：

这里对五种按钮进行column居中排列如下

Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。

TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。

TextStyle更多属性设置如下：

如果我们需要对一个Text内容的不同部分按照不同的样式显示，即富文本，这时就可以使用TextSpan，它代表文本的一个“片段”。

如上述，我们当然也可以在上述链接上添加手势事件，后续会提到。

在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。

举例如下：

Q2: flutter怎么把一个outlinebutton按钮放在底部

我要做的是用BottomNavigationBarItem移除/替换FAB（浮动操作按钮），并将其放在BottomNavigationBar的中心，并为其创建样式。

为了按钮能够根据屏幕宽度进行延伸变宽，用了row和expanded，expanded多大面积，按钮就有多大面积。如果不用row，expanded会向下延伸，就不是我们要的效果了。

OutlineButton控件的child和onPressed是必须的属性，borderSide用来自定义边框颜色和样式。

Q3: Flutter Button（按钮）

在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

MaterialButton 是一个 Materia 风格的按钮。

一般来说，如果需要点击事件，就要嵌套一个 Button，因为 Container、Text 等组件都没有点击事件。

RaisedButton 与 MaterialButton 类似。

FlatButton 与 MaterialButton 类似，不同的是它是透明背景的。如果一个 Container 想要点击事件时，可以使用 FlatButton 包裹，而不是 MaterialButton。因为 MaterialButton 默认带背景，而 FlatButton 默认不带背景。

IconButton 顾名思义就是 Icon + Button 的复合体，当某个 Icon 需要点击事件时，使用 IconButton 最好不过。

其外，还有已经定义好的 Icon Button：CloseButton、BackButton。他们都有导航返回的能力。

FloatingActionButton 是一个浮动在页面右下角的浮动按钮。

在 Scaffold 里使用的时候，它是一个浮动状态的按钮，在其他地方使用，就不会浮动了。

ButtonBar 是一个布局组件，可以让 Button 排列在一行。

Q4: Flutter 自定义弹窗组件

封装的弹窗必须要灵活，满足实际开发中的大部分弹窗，比如有无标题、有无内容、有无关闭按钮、有无操作按钮以及按钮的排列样式等需要满足多元化～

共有四个文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart

弹窗主要调用类，主要包含： WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog

支持自定义配置背景颜色、字体大小、颜色、统一回调、自定义按钮、单独回调、是否带三角标志、任意位置、最大高度、超过可以滑动等～

部分展示效果：

支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等～

部分展示效果：

支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等～

部分展示效果：

中间、底部弹窗的弹窗widget

顶部弹窗的弹窗widget

顶部弹窗的数据源数据模型item

github传送门：

Q5: Flutter 124: 日常问题小结 (三) 自定义 Dialog 二三事

    针对日常不同的需求，我们时常需要自定义 Dialog ，而小菜在尝试过程中遇到一些小问题，简单记录总结一下；

    小菜在自定义含有文本框的 Dialog 时，文本框获取焦点时，软键盘会部分遮挡对话框，但当小菜替换为 AlertDialog 时，文本框获取焦点时，对话框会向上浮动，避免软键盘遮挡；

    对于含有文本框的自定义 Dialog ，小菜在最外层使用的是 Material 嵌套，小菜通过采用 Scaffold 来嵌套处理，默认 Scaffold 中 resizeToAvoidBottomPadding / resizeToAvoidBottomInset 为 true ，当设置为 false 时，文本框获取焦点时，依旧会被软键盘遮挡；因为在固定情景可以配合 resizeToAvoidBottomPadding 实现是否被软键盘遮挡效果；

     resizeToAvoidBottomPadding 主要用于自身 Widget 是否避免被其他窗口遮挡；其中小菜查资料介绍在 Flutter 1.1.9 之后更推荐使用 resizeToAvoidBottomInset ；

    小菜自定义一个可以多选 item 的 Dialog ，但 Dialog 中并没有状态更新的 State ，如何进行 Dialog 中状态更新呢？

    小菜之前在 showDialog 时直接创建了 TypeListDialog ，此时是无状态的，当 WidgetBuilder 创建一个 StatefulBuilder 有状态的构造器即可，可以将 state 传递到 Dialog 中；

    小菜在自定义 Dialog 时如何在一个回调方法中传递多个参数？

    小菜在 Dialog 的回调方法中传递两个 List ，而在接收回调方法中匹配两个参数即可；小菜简单看作是一个函数方法；

    小菜在重写 AppBar 时，如何取消默认的返回按钮？

    取消 AppBar 前面的返回图标有多种方式；

     自定义 Dialog 案例源码

    小菜对于 Flutter 的应用还不够熟悉，很多常用的场景会处理的很不到位，小菜会对日常的小问题进行简单记录，逐步学习；如有错误，请多多指导！