Flutter Widget之Container、AspectRatio、FittedBox、Offstage

Flutter布局类控件

前面的博客中我们介绍了一些常用的Flutter控件例如 文本控件按钮控件图片控件等并且单独的用了用、
但是,在开发过程中,我们的这些基本控件一般都是要放到布局中按照一定的顺序及距离进行排列以达到我们想要的效果。
类似于Android中的LinearLayout、RelativeLayout、FrameLayout等
所以,本期我们来看看布局类的控件。

在Flutter中,布局类控件大致分为以下两种
1. 只有一个子控件布局控件(child)
2. 可以有多个子控件的布局控件(children)

布局类的控件有很多,可以看官网的介绍
https://flutter.io/docs/development/ui/widgets/layout

只有单个子控件的布局控件

只有一个子控件的布局控件都有一个child属性,用于接收子控件,不同容器类的控件属性不同,作用也不同

下面我们来看看常用的

控件名称 作用
Container 可以设置宽高,颜色,定位,间距等,功能较多,比较常用,可以看做是很多其他布局控件的集合版
Padding 主要用于给子控件添加间距
Center 使子控件居中
Align 可以调整子控件相对于自身的对齐方式,并且可以设置宽高
FittedBox 设置子控件相对于父控件宽高的显示模式
AspectRatio 设置子控件的宽高比
ConstrainedBox 用于设置其子控件的宽高度,此时子控件本身设置的宽高度无效
Offstage 用于控制其子控件的显示与隐藏
SizedBox 可指定子控件的宽度及高度
Transform 可以控制子控件的平移,旋转以及缩放

Container

我们来着重看一下Container控件,这个可以说是功能最强大的,也是非常常用的布局类控件了
首先我们来看一下其构造方法

  Container({
    Key key,
    this.alignment,		//对齐方式
    this.padding,		//内间距
    Color color,		//颜色
    Decoration decoration,	 //背景装饰
    this.foregroundDecoration,  //前景装饰
    double width,  //宽度
    double height, //高度
    BoxConstraints constraints,  /约束
    this.margin,  //外边距
    this.transform,  //变换
    this.child,  //子控件
  })

可以看到,很多属性跟之前的基础控件属性用法一致,我们先来简单的用一用。

Container(
      width: 200,
      height: 100,
      color: Colors.cyan,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.white,
        ),
      ),
    );

长这样。
在这里插入图片描述

下面我们来看看之前没有用过的属性

decoration
翻译后叫做“装饰器”,这个属性就是用来设置背景样式的,用decoration来设置样式可以更加的多样化。
decoration接收一个Decoration类型的值,Decoration是一个抽象类。
其继承关系如下,其中BoxDecorationShapeDecoration是配合Container使用的,而BoxDecoration中的功能比较齐全,基本上包含了ShapeDecoration中的所有属性,所以我们重点看一下BoxDecoration即可

在这里插入图片描述

BoxDecoration
先来看看其构造方法

const BoxDecoration({
    this.color,    //颜色
    this.image,   //图片
    this.border,  //边框
    this.borderRadius,   //边角
    this.boxShadow,   //阴影
    this.gradient,   //渐变
    this.backgroundBlendMode,//背景混合模式
    this.shape = BoxShape.rectangle, //形状
  })

我们可以设置颜色,图片,边框,渐变,形状等,需要注意的是如果在decoration中设置了颜色或图片,那么container自身的color就不要设置了,不然会冲突

Container(
      width: 200,
      height: 100,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.blueAccent, width: 1),
          boxShadow: [BoxShadow(color: Colors.redAccent, offset: Offset(2, 2))],
          gradient: LinearGradient(
            colors: [Colors.orangeAccent, Colors.redAccent, Colors.red],
          ),
          shape: BoxShape.circle),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

在这里插入图片描述

foregroundDecoration
前景装饰,一般foregroundDecoration和decoration不会同时使用,其使用方式跟decoration一致

Container(
      width: 200,
      height: 100,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      foregroundDecoration: BoxDecoration(
          shape: BoxShape.rectangle,
          gradient: LinearGradient(colors: [
            Colors.blueAccent,
            Colors.redAccent,
          ])),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

在这里插入图片描述

constraints
其值是BoxConstraints类型的,主要是用来限制Container的宽高,一般用来设置最大最小宽高度。

Container(
      width: 200,
      height: 100,
      color: Colors.blueAccent,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      constraints: BoxConstraints(
        maxWidth: 100,
        maxHeight: 50,
      ),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

在这里插入图片描述

transform
变换,该属性可以设置旋转、平移、缩放。接收一个Matrix4类型的值,Matrix4中的方法有很多,也比较复杂,建议还是多看看API,都试一下。

Container(
      width: 200,
      height: 100,
      color: Colors.blueAccent,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      transform: Matrix4.skewX(10),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

在这里插入图片描述

Container相对于其他布局类容器时功能最齐全的一个,也就是说我们可以使用Container代替大部分的单个子控件的其他布局控件例如Padding、Center、ConstrainedBox等。这里就不再介绍了,比较简单,大家自行试一下就知道了。

下面我们来看看Container替代不了的其他控件


AspectRatio

这个控件可以通过设置宽高比来设置子控件的宽高

AspectRatio(
      aspectRatio: 3,//宽高比为3:1
      child: Container(
        color: Colors.blue,
        child: Text("AspectRatio"),
      ),
    );

在这里插入图片描述


FittedBox

该控件可以设置子控件的显示模式,类似于图片中的缩放模式

Container(
      color: Colors.redAccent,
      width: 200,
      height: 100,
      child: FittedBox(
        fit: BoxFit.fitWidth,
        child: Text("FittedBox"),
      ),
    );

在这里插入图片描述


Offstage

该控件可以控制显示与隐藏, offstage: false即为隐藏,true为显示

Offstage(
      offstage: false,
      child: Text("Offstage"),
    );

好了,单个子控件的布局类控件大概就是这些,下一篇博客我们看看可以有多个子控件的布局类控件


如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我的 Flutter 博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值