Flutter之Container用法详解

时间  2019-11-16
标签 flutter container 用法 详解 繁體版
原文   原文链接

最近开始接触Flutter，网上对Flutter评价很高，加上是谷歌这种大公司研发推广的，决定先入坑。css

废话很少说，直奔主题！学习框架，首先要将里面经常使用控件熟练使用，后面能够逐步深刻、究其原理。前端

前言

相关文章:Flutter学习目录git

github地址:Flutter学习github

文章结构bash

  • Color Property
  • Child Property
  • Alignment Property
  • Constraints Property
  • Margin Property
  • Padding Property
  • Decoration Property
  • ForegroundDecoration Property
  • Transform Property

介绍

Container相似于iOS中的UIView，具备绘制、定位、调整大小功能。一般用来装载其它子控件，假如Container没有子控件，它将自动填充整个屏幕；反之，会根据子控件大小，调整自身大小，从而达到自适应效果。框架

注意:

使用Container时，一般要有一个父控件，通常状况下不单独使用Container。经常使用的父控件有Center widget、Padding Widget、Column Widget、Row Widget、Scaffold Widget。less

1、Color Property

这个属性用于设置Container的背景颜色，相似于iOS中的UIView的backgroundColor。使用以下：ide

  • Colors Class
//Container颜色属性之Colors
class Color_Property_Colors extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          //color: Colors.green,//正常颜色
          //color:Colors.green[200],//带有阴影(至关因而透明度)
          color: Colors.green.shade200,//同上
        ),
    );
  }
}
复制代码

呈现效果以下: 布局

图1 Container之Colors属性

  • Color Class
//Container颜色属性之Color
class Color_Property_Color extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        //color: Color(0xFFFFFFFF),//必定是8位,不然报错
        //color: Color.fromARGB(255, 66, 165, 245),
        color: Color.fromRGBO(66, 165, 245, 1.0),//做用同上
      ),
    );
  }
}
复制代码

呈现效果以下: post

图2 Container之Color属性

注意:

一、使用8位16进制而不是6位 二、.fromARGB含义 A = Alpha or opacity, R = Red, G = Green, B = Blue 三、.fromRGBO含义 R = Red, G = Green, B = Blue, O = Opacity

2、Child Property

如前言所述，若是Container里面没有子控件，它就会填充整个屏幕；若是有子控件，Container就会自动适应子控件大小。 另外，Container只能容纳一个子控件，若是想容纳更多的子控件,能够将子控件设置为Row、Column、Stack(这三个子控件都有一个children属性)

  • 添加子控件
//Container属性之Child
class Child_Property extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromRGBO(66, 165, 245, 1.0),
        child: Text("Flutter Cheatsheet"),
      ),
    );
  }
}
复制代码

呈现效果以下:

图3 添加子控件

3、Alignment Property

Alignment属性主要是针对于Container内部的子控件布局。 主要有如下几个属性：Alignment、FractionalOffset、AlignmentDirectional

  • Alignment 代码以下:
//Container属性之Alignment
class Alignment_Property extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        child: Text("Flutter Cheatsheet",
             style: TextStyle(
               fontSize: 30.0
             ),
        ),
        //不加这句话，Container会自适应child大小;加上之后会充满屏幕
        //alignment: Alignment(0.0, 0.0),
        alignment: Alignment.center,//等价于上面
      ),
    );
  }
}
复制代码

效果以下:

图4 Container属性之Alignment

Alignment坐标系图以下:

图5 Alignment坐标系

经常使用等价属性:

Alignment.bottomCenter 对应 Alignment(0.0, 1.0)

Alignment.bottomLeft 对应 Alignment(-1.0, 1.0)

Alignment.bottomRight 对应 Alignment(1.0, 1.0)

Alignment.center 对应 Alignment(0.0, 0.0)

Alignment.centerLeft 对应 Alignment(-1.0, 0.0)

Alignment.centerRight 对应 Alignment(1.0, 0.0)

Alignment.topCenter 对应 Alignment(0.0, -1.0)

Alignment.topLeft 对应 Alignment(-1.0, -1.0)

Alignment.topRight 对应 Alignment(1.0, -1.0)

  • FractionalOffset 这个属性跟上面讲的Alignment很是类似，惟一的不一样就是坐标系： Alignment坐标系是X:-1.0--1.0;Y:-1.0--1.0， FractionalOffset坐标系是X:0.0--1.0，Y:0.0--1.0。

FractionalOffset坐标系图以下:

图6 FractionalOffset坐标系

代码以下:

//Container属性之FractionalOffset
class Alignment_FractionalOffset extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        child: Text("Flutter Cheatsheet",
          style: TextStyle(
              fontSize: 30.0
          ),
        ),
        //不加这句话，Container会自适应child大小;加上之后会充满屏幕
        //alignment: FractionalOffset(0.5, 0.5),
        alignment: FractionalOffset.center,//等价于上面
      ),
    );
  }
}
复制代码

经常使用等价属性以下

FractionalOffset.bottomCenter 对应 FractionalOffset(0.5, 1.0)

FractionalOffset.bottomLeft 对应 FractionalOffset(0.0, 1.0)

FractionalOffset.bottomRight 对应 FractionalOffset(1.0, 1.0)

FractionalOffset.center 对应 FractionalOffset(0.5, 0.5)

FractionalOffset.centerLeft 对应 FractionalOffset(0.0, 0.5)

FractionalOffset.centerRight 对应 FractionalOffset(1.0, 0.5)

FractionalOffset.topCenter 对应 FractionalOffset(0.5, 0.0)

FractionalOffset.topLeft 对应 FractionalOffset(0.0, 0.0)

FractionalOffset.topRight 对应 FractionalOffset(1.0, 0.0)

  • AlignmentDirectional 说到这个属性，就要提到一个小插曲: 网上说AlignmentDirectional有2个坐标系，是由于TextDirection.ltr和TextDirection.rtl，可是通过本人的亲身实验，这种观点是不对的，不知道是否是因为官方官方框架更新的原。 最终结论：这个属性跟Alignment用法是彻底同样(既然彻底同样，何须画蛇添足呢?)。

坐标系图以下:

图7 AlignmentDirectional坐标系

代码以下:

//Container属性之AlignmentDirectional
class Alignment_AlignmentDirectional extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        child: Text("Flutter",
          style: TextStyle(
              fontSize: 15.0
          ),
          //textDirection: TextDirection.ltr,//正常,从左向右(不影响alignment)
          textDirection: TextDirection.ltr,//从右向左(不影响alignment)
        ),
        //不加这句话，Container会自适应child大小;加上之后会充满屏幕
        alignment:AlignmentDirectional(-1.0, 1.0),
        //alignment: AlignmentDirectional.bottomStart,//等价于上面
      ),
    );
  }
}
复制代码

经常使用等价属性:

AlignmentDirectional.bottomCenter 对应 AlignmentDirectional(0.0, 1.0)

AlignmentDirectional.bottomEnd 对应 AlignmentDirectional(1.0, 1.0)

AlignmentDirectional.bottomStart 对应 AlignmentDirectional(-1.0, 1.0)

AlignmentDirectional.center 对应 AlignmentDirectional(0.0, 0.0)

AlignmentDirectional.centerEnd 对应 AlignmentDirectional(1.0, 0.0)

AlignmentDirectional.centerStart 对应 AlignmentDirectional(-1.0, 0.0)

AlignmentDirectional.topCenter 对应 AlignmentDirectional(0.0, -1.0)

AlignmentDirectional.topEnd 对应 AlignmentDirectional(1.0, -1.0)

AlignmentDirectional.topStart 对应 AlignmentDirectional(-1.0, -1.0)

4、Constraints Property

布局属性，主要讲的是怎么肯定控件的大小；其中常用的就是BoxConstraint。BoxConstraint包含minWidth、maxWidth、minHeight、maxHeight，详细介绍以下:

  • Container无子控件(场景1) 代码以下:
//Container属性之Constraints Property
class Constraints_Property extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.green,
          constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 200,
            minWidth: 150,
            minHeight: 150,
          ),
        ),
      ),
    );
  }
}
复制代码

呈现效果以下:

图8 Container之Constraints无子控件

前面说过若是Container没有子控件，Container将填充整个屏幕，可是这里设置maxHeight、maxWidth。

  • Container有子控件(场景2) 代码以下:
//Container属性之Constraints(有子控件)
class Constraints_Property_HasChild extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.green,
          child: Text("Flutter"),
          constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 200,
            minWidth: 150,
            minHeight: 150,
          ),
        ),
      ),
    );
  }
}
复制代码

呈现效果以下:

图9 Container之Constraints有子控件

这里虽然有一个子控件，Container会调整自身大小来适应内部子控件，可是因为设置了min-width和min-height。因此Container不会彻底和子控件同样大，除非子控件尺寸大于min-width和min-height。

尝试更改子控件大小，代码以下:

//Container属性之Constraints(有子控件)
class Constraints_Property_HasChild extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.green,
          //child: Text("Flutter"),
          child: Text("Flutter Cheatsheet Flutter Cheatsheet"),
          constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 200,
            minWidth: 150,
            minHeight: 150,
          ),
        ),
      ),
    );
  }
}
复制代码

呈现效果图以下：

图10 Container之Constraints有子控件
从上面这张图能够看出Container不能超出max-width和max-height。

  • Container有子控件(场景3) 当Container有子控件，咱们想让Container不去适应子控件，而是充满整个屏幕或父控件，怎么办？ 答案就是使用BoxConstraints.expand()。 代码以下：
//Container属性之Constraints(有子控件、充满整个屏幕)
class Constraints_Property_HasChild_AllScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.green,
          //child: Text("Flutter"),
          child: Text("Flutter"),
          constraints: BoxConstraints.expand(),
        ),
      ),
    );
  }
} 
复制代码

呈现效果以下:

图11 Container之Constraints有子控件

此时发现Container是充满整个屏幕的，咱们也能够限制充满屏幕大小，好比说1/2宽、1/3高等。

5、Margin Property

跟前端的css相似，这个Margin指的是相邻控件之间的距离，主要是用EdgeInsets。

  • EdgeInsets.all()
  • EdgeInsets.symmetric()
  • EdgeInsets.fromLTRB()
  • EdgeInsets.only()

详细以下:

  • EdgeInsets.all() 代码以下:
//EdgeInsets.all()
class Margin_Property_EdgeInsets_all extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.green,
          margin: EdgeInsets.all(20.0),
        ),
      ),
    );
  }
}
复制代码

呈现效果以下：

图12 Margin之EdgeInsets.all

  • EdgeInsets.symmetric() 这个主要用于添加垂直和水平方向上的约束。 代码以下:
//EdgeInsets.symmetric()
class Margin_Property_EdgeInsets_symmetric extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.green,
          margin: EdgeInsets.symmetric(
            vertical: 20.0,
            horizontal: 50.0,
          ),
        ),
      ),
    );
  }
}
复制代码

呈现效果以下:

图13 Margin之EdgeInsets. symmetric

  • EdgeInsets.fromLTRB() 这个主要设置left, top, right,bottom边距。 代码以下:
//EdgeInsets.fromLTRB()
class Margin_Property_EdgeInsets_fromLTRB extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.green,
          margin: EdgeInsets.fromLTRB(20.0, 30.0, 40.0, 50.0)
        ),
      ),
    );
  }
}
复制代码

呈现效果:

图14 Margin之EdgeInsets. fromLTRB

  • EdgeInsets.only() 用于设置哪些是非零的，不设置默认是零。 代码以下:
//EdgeInsets.only()
class Margin_Property_EdgeInsets_only extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
            color: Colors.green,
            margin: EdgeInsets.only(
              left: 20.0,
              bottom: 40.0,
              top: 50.0,
            )
        ),
      ),
    );
  }
}
复制代码

呈现效果以下:

图15 Margin之EdgeInsets.only

6、Padding Property

这个用于设置主控件内部子控件之间的间距。和Margin同样，利用到EdgeInsets。 代码以下:

//EdgeInsets.all
class Padding_Property_EdgeInsets_all extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          margin: EdgeInsets.only(
            left: 20.0,
            bottom: 40.0,
            top: 50.0,
          ),
          padding: EdgeInsets.all(10.0),//设置内部Text控件边距
          color: Colors.green,
          child: Text("Flutter Cheatsheet"),
          //不设置这个Container和子控件同样大小、这样margin设置也就没有意义了
          constraints: BoxConstraints.expand(),
        ),
      ),
    );
  }
}
复制代码

呈现效果以下:

图16 Padding之EdgeInsets.all

7、Decoration Property

  • BoxDecoration Class
  • FlutterLogoDecoration Class
  • ShapeDecoration Class
  • UnderlineTabIndicator Class 因为涉及篇幅较长，后续会从新文章详细讲解，敬请关注简书。

8、ForegroundDecoration Property

  • BoxDecoration Class
  • FlutterLogoDecoration Class
  • ShapeDecoration Class
  • UnderlineTabIndicator Class 因为涉及篇幅较长，后续会从新文章详细讲解，敬请关注简书。

9、Transform Property

在Container属性中添加transform属性，并使用Matrix类设置transform的值，便可达到各类变换效果，代码以下：

//Transform Property
class Transform_Property extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color.fromARGB(255, 66, 165, 245),
      alignment: AlignmentDirectional(0.0, 0.0),
      child: Container(
        padding: EdgeInsets.all(40.0),
        color: Colors.green,
        child: Text("Flutter Cheatsheet"),  
        transform: Matrix4.rotationZ(0.5),
      ),
    );
  }
}
复制代码

效果图以下:

图17 Transform Property

参考文章:

Flutter — Container Cheat Sheet

简书地址

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程