最近開始接觸Flutter斥黑，網(wǎng)上對Flutter評價很高揖盘，加上是谷歌這種大公司研發(fā)推廣的，決定先入坑锌奴。
廢話不多說兽狭，直奔主題！學習框架鹿蜀，首先要將里面常用控件熟練使用箕慧，后面可以逐步深入、究其原理茴恰。
前言
相關文章：Flutter學習目錄
github地址：Flutter學習
文章結(jié)構(gòu)
- Color Property
- Child Property
- Alignment Property
- Constraints Property
- Margin Property
- Padding Property
- Decoration Property
- ForegroundDecoration Property
- Transform Property
介紹
Container類似于iOS中的UIView颠焦，具有繪制、定位往枣、調(diào)整大小功能伐庭。通常用來裝載其它子控件粉渠，假如Container沒有子控件，它將自動填充整個屏幕圾另；反之霸株，會根據(jù)子控件大小，調(diào)整自身大小集乔，從而達到自適應效果去件。
注意:
使用Container時，通常要有一個父控件扰路，一般情況下不單獨使用Container尤溜。常用的父控件有Center widget、Padding Widget幼衰、Column Widget靴跛、Row Widget、Scaffold Widget渡嚣。
一梢睛、Color Property
這個屬性用于設置Container的背景顏色，類似于iOS中的UIView的backgroundColor识椰。使用如下：
- 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,//同上
),
);
}
}
呈現(xiàn)效果如下:
- 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),//作用同上
),
);
}
}
呈現(xiàn)效果如下:
注意:
1绝葡、使用8位16進制而不是6位
2、.fromARGB含義
A = Alpha or opacity, R = Red, G = Green, B = Blue
3腹鹉、.fromRGBO含義
R = Red, G = Green, B = Blue, O = Opacity
二藏畅、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"),
),
);
}
}
呈現(xiàn)效果如下:
三、Alignment Property
Alignment屬性主要是針對于Container內(nèi)部的子控件布局猿挚。
主要有以下幾個屬性：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,//等價于上面
),
);
}
}
效果如下:
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坐標系圖如下:
代碼如下:
//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
說到這個屬性，就要提到一個小插曲:
網(wǎng)上說AlignmentDirectional有2個坐標系碱妆，是因為TextDirection.ltr和TextDirection.rtl，但是經(jīng)過本人的親身實驗昔驱，這種觀點是不對的疹尾，不知道是不是由于官方官方框架更新的原。
最終結(jié)論：這個屬性跟Alignment用法是完全一樣(既然完全一樣骤肛，何必多此一舉呢?)纳本。
坐標系圖如下:
代碼如下:
//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)
四腋颠、Constraints Property
布局屬性繁成，主要講的是怎么確定控件的大小淑玫；其中經(jīng)常使用的就是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,
),
),
),
);
}
}
呈現(xiàn)效果如下:
前面說過如果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,
),
),
),
);
}
}
呈現(xiàn)效果如下:
這里雖然有一個子控件冀泻，Container會調(diào)整自身大小來適應內(nèi)部子控件，但是由于設置了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,
),
),
),
);
}
}
呈現(xiàn)效果圖如下：
從上面這張圖可以看出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(),
),
),
);
}
}
呈現(xiàn)效果如下:
此時發(fā)現(xiàn)Container是充滿整個屏幕的康嘉，我們也可以限制充滿屏幕大小，比如說1/2寬跟继、1/3高等种冬。
五、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),
),
),
);
}
}
呈現(xiàn)效果如下：
- 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,
),
),
),
);
}
}
呈現(xiàn)效果如下:
- 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)
),
),
);
}
}
呈現(xiàn)效果:
- 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,
)
),
),
);
}
}
呈現(xiàn)效果如下:
六旱物、Padding Property
這個用于設置主控件內(nèi)部子控件之間的間距。和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),//設置內(nèi)部Text控件邊距
color: Colors.green,
child: Text("Flutter Cheatsheet"),
//不設置這個Container和子控件一樣大小、這樣margin設置也就沒有意義了
constraints: BoxConstraints.expand(),
),
),
);
}
}
呈現(xiàn)效果如下:
七夕凝、Decoration Property
- BoxDecoration Class
- FlutterLogoDecoration Class
- ShapeDecoration Class
- UnderlineTabIndicator Class
由于涉及篇幅較長宝穗，后續(xù)會重新文章詳細講解，敬請關注码秉。
八讽营、ForegroundDecoration Property
- BoxDecoration Class
- FlutterLogoDecoration Class
- ShapeDecoration Class
- UnderlineTabIndicator Class
由于涉及篇幅較長，后續(xù)會重新文章詳細講解泡徙，敬請關注
九橱鹏、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),
),
);
}
}
效果圖如下:
