flutter底部按钮,flutter buttonbar

【Flutter】按钮与文本（三）

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

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

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

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

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

TextStyle更多属性设置如下：

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

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

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

举例如下：

相关问答

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

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

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

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

Q2: 新建一个flutter项目，可以在ios上运行，四步搞定！

1. 建立一个flutter项目的命令

2. 在ios文件夹下，生成pods文件夹

3. Xcode环境签名设置；

把错误的版本删除再添加，可解决签名错误问题；必须先删除再添加，直接修改可能不起作用。团队开发，必须使用团队的签名。

4.运行创建的flutter项目；

选择真机、模拟机，点击运行按钮，或使用命令运行：

下面两步是赠送的：

5.新加一款插件，所涉及的命令；

ios 端所涉及的命令

6. 刚更新的插件和已有的插件有冲突怎么办？

可以试一试以下步骤：

Q3: Flutter全屏效果实现

调用SystemChrome.setEnabledSystemUIOverlays([]);

把状态栏和虚拟按键隐藏掉，

跳转到其他页面后需要调用

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);把状态栏显示出来，

需要一起调用底部虚拟按键

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom])

Q4: 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内容大概就是这些

Q5: Flutter开发--如何布局？

相对于iOS开发，Flutter的布局更具有灵活性，每个页面设计都不一样，相同页面可选择的布局方式也不一样，如果单纯的说应该如何去布局，我觉得不现实，大家可以参考下 Flutter官方的布局教程 。接下来，笔者，通过项目中的一个页面，来一步一步的拆解布局的流程。整个过程，基本上按照拆解、组件封装、具体布局这三步来的。

根据设计图，可以看出整体可以分成两部分，上面一部分是系统介绍模块，下面一部分是真正的登录内容，因为涉及到叠加，因此考虑用Stack；

系统介绍模块部分：整体也是涉及到叠加，考虑用Stack，分为四部分。最底部渐变色背景用一个contanier，无须指定位置，全视图扩展；载放logo图标在上一层，用Image。最后两个Text同级放在最上层。Image，Text各用Positioned包裹去指定位置。

登录内容模块是最外层是一个Contanier容器，去控制背景色和圆角。然后是一个Column元素，逐行排列。

第一行为Image，

第二行为Text，

第三行可以看成一个小Column，分两块进行布局

第四行可以看成一个小Column，分两块进行布局

第五行可以看作一个TextButton，

第六行可以看作一个Row，分三块进行布局

通过上面这样一步一步的分析后，基本上对大致的布局有了一个了解，最外层的控件大致选对（只要能实现的话，就是复杂度以及效率的问题），然后一步一步的拆解每一行的元素，如果有重复的或者觉得可以封装出来的部分，则进行下一步。

每一行的拆解，大致也是按照这个思路来进行，因此笔者在这里就不做讲解了。

在做到第三第四行的时候，发现这两个很相似，而且设计到一些交互逻辑，笔者就想对第三第四行的这种展示进行封装，觉得今后的布局可能会用到，因此在这一步，可以先把这一块儿抽离出一个控件。利用TextField来实现这种输入操作，具体的实现笔者不再详细的描述了。

经过这一步，整体的规划设计图已经有了，各个组件也都有了，接下来的工作就是组装了。

具体布局设计到一些细节的地方，例如整体Column的居中对齐（crossAxisAlignment）、间隔（Padding或Container包裹，笔者更喜欢用SizedBox占位）、居左居右居中（Align）、点击事件（GestureDetector）以及圆角（BorderRadius）等一些特殊情况。

像第六行row是放在底部的，就可以在第六行前面增加一个Spacer()去填充空白区域。

对文字颜色大小等，可以用TextStyle直接设置。

对于输入框的删除按钮，可以用Offstage这种Flutter特有的控制显示隐藏的控件。