Flutter(四)——基础组件

本文目录

前言
基础组件
- Text
- - 常用属性使用
- Icon
- Image
- Button
- FlutterLogo

前言

你如果做过Android开发，那一定熟悉里面各种官方提供的布局，比如LinearLayout，RelativeLayout等，你也一定和博主一样写过很多自定义控件，如果你学过Kotlin，并且用XML的DSL框架Anko声明Android组件，你会发现这与Flutter那种嵌套布局写法极为相似，下面是整个Flutter布局图：
我们将通过几篇博文讲述一些Flutter布局，对齐方式以及使用场景，下面我们开始学习基础组件。

基础组件

基础组件是组件的鼻祖，flutter必须要掌握的知识。在组件的划分上，Container，Row，Column都属于基础组件。但是Container又属于单一子元素组，而Row，Column又属于多子元素组件。

Text

Text组件，相当于Java开发Android时的TextView，基本的使用代码如下：

Text("hello world");

顾名思义，就是专门输出基本文字的控件，不过，这样使用肯定会很单调，毕竟Java开发Android时的文本控件又非常多的玩法，比如跑马灯等等，同样我们Flutter中也可以通过各种样式定义出来更多的Text玩法，博主专门列了一个表格，详细说明它的常用属性。

属性	数值
textAlign	对齐方式
maxLines	最大行数
textScaleFactor	缩放因子，默认值为1.0
overflow	配合maxLines使用，超出最大行数时，可以用省略号或渐变效果隐藏多余行数
style	TextStyle对象，其属性又color，fontFamily，background，fontSize，下划线等
textSpan	配置Text.rich使用，被包装成RichText，可实现类似富文本的效果

其中常用的属性就是style，textAlign以及maxLines和overflow组合使用，比如在一个详情列表里面，内容太长就可以使用后一种组合方式。

常用属性使用

比如这里，我们先使用maxLines和overflow的组合使用，代码如下：

Text('You have pushed the button this many times:You have pushed the button this many times:You have pushed the button this many times:You have pushed the button this many times:',maxLines: 1,overflow: TextOverflow.ellipsis,
),

这里设置文本最大行数为一行，但其实文字非常长，已经超出了范围，所以，我们设置overflow，让它将多余的内容用省略号显示:
接着，我们在使用样式style，和textAlign，代码如下：

Text('You have',maxLines: 1,style: TextStyle(fontSize: 33,fontStyle: FontStyle.italic,color: Color.fromARGB(255, 123, 233, 188)),textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,
),

这里我们设置了文字的各种style，比如设置文字大小33，样式为斜体，颜色随便设置了一个ARGB值，也设置了文字居中显示，效果如下：

其他属性，需要使用时，查询文档就行，不需要死记硬背，对于Text，博主这里就讲到这里，下面我们将介绍另一个基础组件Icon。

Icon

从名字我们就知道，这是一个图标，在Android系统中支持系统自带的图标，mipmap存放的就是Icon类型图片，使用的方式如下：

Icon(Icons.search,color: Colors.red,),

这里设置了图标的样式为搜索框样式，设置搜索框图标的颜色为红色，显示的效果如下：

内置的Icon系统图标其实有很多种类，如下图所示，这里就不多做讲解，后续需要使用，可以对应选择自己需要的图标：
备注：这些系统自带的图标，全部都是矢量图标，不管放大或者缩小，都不会和像素图片一样失真，所以可以放心大胆的随意使用，如果这些图标都不能满足你的需求，可以去阿里妈妈的适量图标字体库选择。

Image

在使用Java开发Android项目的时候，我们经常用到ImageView控件，flutter给我们也提供了类似的组件Image，我们先来看看基本的使用方式：

Image(image: AssetImage("images/timg.gif"),width: 200,),

这里使用起来也是很简单，直接引用你的资源文件图片文件，而且flutter的Image可以直接显示动图，而Java开发的ImageView就不行，这一点来看，flutter真心很强大，显示效果如下：
当然你如果直接把代码复制到你的项目中，直接使用肯定不行，因为flutter需要将引用的图片配置到pubspec.yaml文件中才能使用，代码如下：

flutter:assets:- images/timg.gif

所有从引用的非系统资源，都需要在这里进行声明。当然我们还可以直接引用网络中的图片直接显示，代码如下：

Image(image: NetworkImage("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1888248698,138867488&fm=26&gp=0.jpg"),width: 200,),

除了上述两种方式之外，图片还支持通过Image.file和Image.memory的方式进行加载。可以看出，图片的加载方式有很多途径，可以是本地，网络，内存，文件等，而每种方式都继承了各自的ImageProvider。

Button

Button就是按钮。Flutter中常用的按钮有以下几种：RaisedButton，FlatButton，IconButton，FloatingActionButton，OutlineButton等。当然，我们也可以根据实际情况进行按钮的自定义，我们先来看看如何使用Button，代码如下：

RaisedButton(color: Colors.blue,child: Text("波纹效果按钮"),textColor: Colors.white,onPressed: ()=>{},
),
FlatButton(textColor: Colors.blue,child: Text("扁平无背景按钮"),onPressed: (){print("FlatButton");},
),
OutlineButton(textColor: Colors.blue,child: Text("边框背景高亮按钮"),onPressed: (){print("OutlineButton");
},
),

代码其实很简单，这里不需要多做讲解，至于FloatingActionButton，默认项目又下角一直都有，IconButton就是可以点击的Icon，这里也不多赘述，上述代码实现效果如下图所示：

FlutterLogo

顾名思义，这就是一个Flutter的Logo，基础的使用方式如下：

FlutterLogo(size: 100.0,colors: Colors.red,
),

显示的效果如下图所示，不过这个控件可能用的很少：

不过这个Logo还是有一个小的用途，那就是拿它做占位图，毕竟开发项目时，更新图片比较费时，拿这个图先用一下，项目测试没问题后，在把这个Logo更换为具体的图片。