因为笔者本身主要从事是Android开发，所以很多角度都是作为一个Android开发者学习Flutter的角度出发，IOS或者H5的开发同学可以选择性阅读
目录
StatelessWidget基础组件展示
前言
StatelessWidget和StatefulWidget这两个组件可以说是Flutter中最基础也是最重要的两个组件，从字面意思理解就是一个是有状态的，一个是无状态的。我原本想对这两个概念进行一番解释的，我自己在学习Flutter的时候也是看了不少对这两个概念的解释的相关文章，但是大部分实际上都是搬运自官网的，所以如果你完全没有接触过Flutter，这里还是先推荐大家看一下官网。然后看完官网的介绍之后，你可能已经懂了这两个组件的区别，或者你可能似懂非懂，其实这些都没有关系的，我认为最重要的还是我们要实际敲一敲代码，使用一下他们，回过头来再看，就非常好理解了，所以这里我还是先不过多的进行解释了
本节直接介绍继承自StatelessWidget的一些常用组件，大家可以通过实际使用来感受一下他们的共同特点，下一节会介绍继承自StatefulWidget相关的组件。看完这两节，自己动手敲一下代码。我相信大家再去理解这两个组件的意义应该就很好理解了
Container
Container其实就可以理解为一个容器，个人认为最大的作用就是可以通过BoxDecoration来设置背景、边框或阴影，以及内外边距、尺寸这些。
这些特点，对于Android开发的同学来说，会觉得这个类的功能是不是太简单了，因为Android中的LinearLayout和FrameLayout等等这些布局组件都包含上述的这些能力，除此之外他们还有各自的布局特性，诸如水平布局，垂直布局，叠加布局等。但是Flutter中把这些特性拆的比较细，Flutter中也有水平（Row）、垂直（Column）、叠加（Stack）这些布局组件，这些我们后面的章节会详细介绍，但是他们的功能几乎仅限于用来布局，并不支持设置背景、内外边距、尺寸这些参数，所以在Flutter中我们还是会经常用到这个Container组件的
Container(
decoration: BoxDecoration(color: Colors.blue),
alignment: Alignment.center,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width:100,
heigt:100,
child: Text("hello world"),
)
Text
Text类似Android中的TextView，可以设置文本内容，字体样式等
Text(
"I am Text",
style: TextStyle(fontSize: 20),
)
Icon
主要用于一些矢量图标，可设置大小颜色，Icons 定义了一系列IconData的枚举值，包含了material design的所有内置图标，所以如果有需要，你可以像下面这样直接使用所需要的图标
Icon(
Icons.android,//设置图标
size: 50,
color: Colors.red,
)
当然你也可以使用矢量图库中的资源，如阿里巴巴的图标库
const IconData(
this.codePoint, //该图标在字体中的编码
{
this.fontFamily,//所属字体
this.fontPackage,//字体所属的包
this.matchTextDirection = false,//是否启用镜像，向左还是向右
}
);
-
将下载的 iconfont.ttf 复制到项目 fonts 目录
-
配置 pubspec.yaml 文件，将字体文件引入（如果没有fonts文件夹需要先创建）
fonts:
- family: iconfont
fonts:
- asset: fonts/iconfont.ttf
- 查看iconfont.css，将content字段中 \替换成0x即可得到对应的code
- 通过IconData使用图标
Icon(
IconData(0xeb95, fontFamily: 'iconfont'),
size: 50,
color: Colors.red,
)
RaisedButton
RausedButton是凸起、有阴影的按钮。只设置按钮样式不设置其他属性的情况下，样式就类似于Android中的Button
RaisedButton(
child: Text("RaisedButton"), // 按钮字样
color: Colors.red, // 背景颜色
splashColor: Colors.blue, // 水波纹颜色
highlightColor: Colors.green, // 长按颜色
textColor: Colors.white, // 文本颜色
padding: EdgeInsets.fromLTRB(10, 10, 10, 10), // 设置四个方向的内边距
shape: RoundedRectangleBorder( // 设置按钮形状为圆角矩形
borderRadius: BorderRadius.all(Radius.circular(10)),
),
onPressed: () {},
),
FlatButton
FlatButton是扁平、无阴影的按钮，与RaisedButton的属性十分类似
大多数使用FlatButton的场景，有点类似于Android中给TextView设置一个点击事件
FlatButton(
child: Text("FlatButton"),
textColor: Colors.red,
onPressed: () {},
)
OutlineButton
OutlineButton是带边框的按钮
OutlineButton(
child: Text("OutlineButton"),
borderSide: BorderSide(color: Colors.red), // 自定义边框颜色
splashColor: Colors.blue,
highlightColor: Colors.green,
textColor: Colors.red,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
onPressed: () {},
)
IconButton
IconButton是带图标的按钮
上面的RaisedButton、FlatButton、OutlineButton都是继承自MaterialButton，MaterialButton再继承自StatelessWidget。而IconButton则是直接继承自StatelessWidget。如果想使用水波纹等点击效果，需要在外面再套一层Material widget，如下所示
Material(
type: MaterialType.circle,
color: Colors.transparent,
clipBehavior: Clip.antiAlias,
child: IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30,
color: Colors.blue,
splashColor: Colors.blue,
highlightColor: Colors.green,
onPressed: () {},
),
)
原因是：点击效果是水波纹的，这个需要在最近的一个Material类控件里绘制，并不是在控件的本体使用。参考https://stackoverflow.com/questions/56231322/why-flutter-iconbutton-animation-shows-under-the-row
Chip
chip组件就是对Android开发中经常需要用到的一个UI样式进行了封装。（具体效果看了上面的图应该就懂了）
Chip(
label: Text("StatelessWidget常用基础组件"),
avatar: Icon(Icons.photo),
)
Divider
Divider顾名思义就是分割线，但是Divider的高度（即线的粗细）是固定的，无法主动设置，所以往往可以用Container代替
Divider(
height: 20, //容器高度，不是线的高度（无法设置线的高度，可以用Container代替）
indent: 10, //左边间距
endIndent: 10, //右边间距
color: Colors.amber,
)
Card
Card类似Android中的CardView，可以设置背景、阴影、外边距（注意不能设置内边距）。一般可以用在列表的Item中
Card(
color: Colors.blue,
elevation: 10, //阴影
clipBehavior: Clip.antiAlias,//抗锯齿
margin: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(10),
child: Text("I am Card"),
),
)
AlertDialog
AlertDialog从名称来看显而易见就是对话框组件，但在Flutter中它和前面这些组件一样，单独使用的话，仅仅是一个UI的样式，即不包含Android中DIalog的各种属性，例如并不包含Dialog外部的半透明蒙层，也没有点击Dialog外部即可dismiss对话框的这些逻辑
但是不用担心，我们可以将AlertDialog组件放入Flutter自带的ShowDialog方法中，使用方式如下
Future<Null> _openAlertDialog(BuildContext context) async {
final action = await showDialog(
context: context,
barrierDismissible: false, //// user must tap button!
builder: (context) {
return AlertDialog(
title: Text("这是标题"),
titlePadding: EdgeInsets.only(top: 10, left: 10),
content: Text("这是内容"),
contentPadding: EdgeInsets.all(10),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("取消")),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("确定"))
],
);
},
);
return null;
}
这样就能显示一个和Android原生体验类似的对话框。当然你也可以不使用AlertDialog，而是使用自己自定义的UI样式
总结
这里主要就是给大家快速展示一下StatelessWdget相关组件的作用以及一些基本的用法，对于我自己来说也起到一个归纳整理的作用，但是每个组件里面其实还有很多属性文章中没有用到，这些大家可以自己实际在项目中试一试，如果想详细了解某一个组件，网上也有很多文章讲的比较详细的，所以这里针对每一个组件就不说的那么细了
网友评论