flutter基础用法,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初学 —— 常用控件使用

在编写几个 Flutter 项目后，发现 Flutter 的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案；而 Dart 语言也与 Java 、 Kotlin 类似，所以对 Android 开发者来说门槛非常低；特意记录一下常用的控件及其使用：

StatelessWidget 不需要额外的创建 State

StatefulWidget 创建 State 类，并可以在其中保存一些状态

only 可以单独设置每个方向的内边距

类似于 LinearLayout 中的 orientation 设置为 vertical ， mainAxisAlignment 表示竖向的一个对齐方式， crossAxisAlignment 表示横向的对齐方式

与 Column 相反，主轴是横向，对齐方式类似， crossAxisAlignment 表示竖向的对齐方式

类似 SizedBox ，一个容器，但是主要功能是有一个 decoration —— 装饰器，作用是绘制背景，或者使用 item 中的阴影

栈，先入后出，类似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定显示在某一个位置

配合多 child 使用，会填充剩余的空间

Image 功能强大，使用不同的方法可以加载不同来源的图片

看到这些方法，突然觉得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形状的图片，无论是圆形还是五角星都不在话下，然而 Android 要实现不规则的形状，可是要下不少功夫的。

名字和 Android 的一模一样，但是用法却比 Android 的简单很多：

主要就是 itemCount 与 itemBuilder ,其余就是配置样式， itemBuilder 需要返回一个 widget ，当然了，每个 ListView 都有其对应的 item ，在里面的方法中编写 widget 即可

与 ListView 类似，但是需要有一个 delegate 类，作用是设置有多少列，每一列之间的间距是多少

GridView 没有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的样式， Flutter 中通常是使用装饰器来处理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Q2: Flutter网络请求之dio的初步使用

dio 是一个国产巨佬写的一个Flutter的网络请求库，写这篇的文章的时候更新到3.x版本了。这里是他的 官方中文 使用链接： dio

按照原作者所说：

我这里这个时候的是一个3.0.9版本，这里的 ^ 符号，表示3.多的库比如说3.1.1啥的，也能更新下来。

dio 的原作者给了我们一个简单的例子

我们基础的使用，请求一个URL，这里就直接是 Dio().get(".****.com") 。这样就可以通过get方式来请求我们的链接。

在我们项目中，我们当然不能直接使用 Dio().get(".****.com") 这样的方法，那样的话如果以后我们要更换网络请求的库的话，我们要修改的地方，就会非常的多。类似的问题，曾经在iOS开发的历史上出现过一次。最初的时候iOS的开发者大多使用的是一个叫 ASI 的库，但是在过了几年的时候，这个库不在维护了。这时候，我们就会去找一个新的网络库来代替他。当时如果我们有500个文件中都直接使用 ASI ，我们就需要改动500个地方。这样的体力和眼力消耗，实在是太惊人了。所以，我们一般会自己创建一个专门的 网络管理 的类 NetworkManager 。在 NetworkManager 里，我们把调用方法抽取出一个基础的方法，使用的时候，基于这个基础的方法来调用。这样，我们就能很方便的去进去使用和维护。

这个时候我们就可以使用我们创建的类来直接调用我们的方法了。

这样，我们的 dio 的初步使用就完成了。下一篇文章来写 dio 的进阶使用。

Q3: Flutter（二）StatefulWidget基础组件

MaterialApp 是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。MaterialApp这个组件里面的参数比较多，而且一般在应用入口会用到，所以这里把它内部的所有参数都列出来了

基本用法：

可以看到我们在 App 的最外层直接使用了 MaterialApp ，可以指定App的名称（ title ），App的主题样式（ theme ），首页的组件（ home ），路由跳转配置）（ routes ），关于路由跳转我们在后面的章节中会介绍

Scaffold 实现了基本的 Material Design 布局结构， Scaffold 在英文中的解释为角手架，我们可以理解为楼体中的钢架结构，通过它可以构建一个页面

在Flutter应用开发中，我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面

下面是 MaterialApp + Scaffold 的组合的基本用法

AppBar 就是顶部的导航栏组件，支持自定义标题，左右两侧的工具栏按钮等

BottomNavigationBar 是底部的菜单栏组件

使用方法：

一般我们会定义一个全局变量如 _currentIndex 用于记录当前选中的下标。然后在 onTap 属性的回调方法中调用

setState(() { _currentIndex = index;}); 更新 _currentIndex 就可以实现底部菜单的切换。 BottomNavigationBar 一般会配合 BottomNavigationBarItem 一起使用（如下所示）

RefreshIndicator 是Flutter中的下拉刷新组件，一般配合 ListView 组件一起使用

Image 就类似于android中的 ImageView ，可以自定义图片显示的宽高

从网络中加载图片

从本地（File文件）加载图片

从本地资源加载图片

可以将byte数组加载成图片

TextField 就类似于android的 EditText

PageView 就类似于android中的 ViewPager

Q4: Flutter基础篇——常用Widget

对于初学flutter的朋友来说，要知道，flutter的UI万物皆Widget。

flutter所写的页面的结构可以被看成套娃，一层套一层，一层套一层，一层套一层。。。。。。

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

Text ： 该 widget 可让创建一个带格式的文本。

Row 、 Column ： 这些具有弹性空间的布局类Widget可让您在水平（ Row ）和垂直（ Column ）方向上创建灵活的布局。

Stack ：取代线性布局 (和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于 Stack 的上下左右四条边的位置。

Container ： Container 可让您创建矩形视觉元素。 您可以为 Container 装饰一个 BoxDecoration , 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container 可以使用矩阵在三维空间中对其进行变换。

具体的演示见我另外的博客

有一部分Widget都有一个 child 属性，用于容纳唯一的子Widget。

例如：Container、Center、Padding、Align等Widget。

还有一部分Widget允许存在多个子Widget，用 children 作为属性。

例如：Row、Column、Stack等Widget。

在StatefulWidget调用createState之后，框架将新的状态插入树种，然后调用状态对象的initState。子类化State可以重写initState，以完成仅需要一次执行的工作。当然在initState的实现中需要调用super.initState

当一个状态对象不再需要时，框架调用状态对象的dispose。也可以通过覆盖dispose方法来执行清理工作。

OVER~