flutter控件大全,flutter 组件

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 ; 使用如下

相关问答

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

Q2: Flutter初探--常用依赖包

国外地址：

国内镜像：

以 flutter_screenutil 为例

路由框架 annotation_route

状态管理 provider

UI适配 flutter_screenutil

刷新控件 flutter_easyrefresh

网络请求 dio

toast控件 fluttertoast

图表库 charts_flutter

网络监听 connectivity

事件总线 event_bus

日历组件 table_calendar

官方webview webview_flutter

第三方webview flutter_webview_plugin

该篇文章为常用依赖包总结，用来记录所需要的常用依赖包，后续会不断扩充内容~

Q3: Flutter快速上手1.8：基础控件之Switch和CupertinoSwitch

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2

我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~

Q4: Flutter 之 Sliver 系列控件

SliverAppBar 控件，一个 MD 的 AppBar 。属性和 AppBar 类似，但做的效果比 AppBar 更加强大。相同的属性具体可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介绍。那么还有些没有的属性：

结合 elevation 使用，当elevation 不为 0 的时候，是否显示阴影

AppBar 展开时候的高度

true 的时候下滑AppBar优先滑动展示，展示完成后才给滑动控件滑动

snap 为 true, 则 floating 也要为 true 。true 的时候根据手指松开的位置展开或者收缩AppBar

appBar 收缩到最小高度的时候 appBar 是否可见

SliverAppBar 往往做为 CustomScrollView 的第一个子元素，根据滚动控件的偏移量或者浮动的位置来改变 SliverAppBar 的高度。所以具体用法如下

另外在上面设计到 FlexibleSpaceBar 控件，FlexibleSpaceBar 有个 collapseMode 属性

为 Sliver 系列控件添加一个 padding 。如给上面 SliverAppBar 添加一个 Padding 。

多行多列的列表控件，相当于 Android 的 GridView，有两个属性

SliverChildDelegate，这里有两种方式创建

SliverGridDelegate，也是有两种方式创建

结合上面展示效果

和上面 delegate 属性一样，需要创建一个 SliverChildDelegate 。

比 SliverList 多一个 itemExtent 属性，设置 item 的高度 。item 里面的子控件无法再改动高度。

上面 SliverAppBar 就是结合 SliverPersistentHeader 实现的效果，SliverPersistentHeader 需要一个 SliverPersistentHeaderDelegate 。 实现 SliverPersistentHeaderDelegate 有 4 个方法需要重写

至于效果，具体效果具体分析。

有一个 Widget 属性，主要作用是在 CustomScrollView 里面添加多种不同布局的样式。

占满一屏或者比一屏更多的布局，

滑动剩余部分展示的布局

Q5: Flutter TextFormField 控件

一个FormField包含TextField,它将TextField小部件包装在FormField中。

表单(From)使一次进行保存、重置或验证多个字段变得更容易。要在没有表单(From)的情况下使用，请将GlobalKey传递给构造函数，并使用GlobalKey.currentState保存或重置表单字段。

指定控制器时，initialValue必须为null(默认值)。如果controller为null，那么TextEditingController将被自动构造，其文本将初始化为initalValue或空字符串。如果这个FormField是滚动容器的一部分，该容器懒加载它的子对象，比如ListView或CustomScrollView，那么应该指定一个控制器。控制器的生命周期应该由滚动容器的有状态小部件祖先来管理。