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教程