Flutter

Flutter（一）StatelessWidget基础组件

2020-08-03  本文已影响0人  Geekholt

因为笔者本身主要从事是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,//是否启用镜像，向左还是向右
    }
);

  1. 将下载的 iconfont.ttf 复制到项目 fonts 目录

  2. 配置 pubspec.yaml 文件，将字体文件引入（如果没有fonts文件夹需要先创建）

fonts:
  - family: iconfont
    fonts:
      - asset: fonts/iconfont.ttf
  1. 查看iconfont.css，将content字段中 \替换成0x即可得到对应的code
  2. 通过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相关组件的作用以及一些基本的用法，对于我自己来说也起到一个归纳整理的作用，但是每个组件里面其实还有很多属性文章中没有用到，这些大家可以自己实际在项目中试一试，如果想详细了解某一个组件，网上也有很多文章讲的比较详细的，所以这里针对每一个组件就不说的那么细了

上一篇下一篇

猜你喜欢

热点阅读