此篇主要理解
- Container組件的作用
- 怎么使用Container
- Container中的布局方式
- 設(shè)置Container 的寬高以及背景色
- padding布局
- margin布局
- decoration背景漸變色
在HTML中,盒子元素一直是非常重要的html標(biāo)簽.用于區(qū)塊的劃分.而在Flutter中Container組件則作為div來(lái)使用,用于區(qū)域布局.
那么我們?cè)贏PP中間放置一個(gè)Container組件,里面再放置一個(gè)Text組件.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '這里是beline的app',
home: Scaffold(
appBar: AppBar(title: Text('這里是title')),
body: Center(
child: Container(
child: new Text('this is beline App')
)
)),
);
}
}
alignment 屬性
alignment是對(duì)準(zhǔn)的意思,顧名思義,用于Container組件內(nèi)部元素對(duì)齊使用,這里隨便畫(huà)了一張圖來(lái)展示具體的參數(shù)定位
也可以使用提供的對(duì)齊方式例如:
- center 居中對(duì)齊
- centerLeft 中間左對(duì)齊
- bottomCenter 下對(duì)齊 (如果在app中不設(shè)置Container的寬和高,那么Container的寬和高是等于父級(jí)的100%寬和100%高的)
- bottomLeft 下左對(duì)齊
- bottomRight 下右對(duì)齊
還有一些沒(méi)有一一列出,但是我們可以從命名看出,除了center外,都是通過(guò)兩個(gè)方向來(lái)表達(dá)對(duì)齊方式,前一個(gè)單詞表示縱向軸,第二個(gè)單詞表示橫向軸,例如topRight,既為上方的右邊對(duì)齊方式
高和寬設(shè)置(height,width) 以及 背景色(color)
在Flutter中,高和寬的設(shè)置和css一樣,都是通過(guò)height和width進(jìn)行設(shè)置,只是設(shè)置的時(shí)候我們需要注意,使用的單位都需要是浮點(diǎn)類(lèi)型,例如500.0
為了直觀看的出來(lái)我們的這個(gè)Container組件具體設(shè)置的大小,我們?cè)O(shè)置一個(gè)背景色方便辨認(rèn).color屬性,調(diào)用顏色組件colors設(shè)置即可
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '這里是beline的app',
home: Scaffold(
appBar: AppBar(title: Text('這里是title')),
body:Center(
child: Container(
child: new Text(
'Is beline App',
style: TextStyle(fontSize: 40.0,backgroundColor: Color.fromARGB(255, 144, 213, 43))
),
alignment: Alignment.bottomCenter,
width: 500.0,
height: 400.0,
color: Colors.lightBlue,
),
),
),
);
}
}
這里需要注意,顏色組件中有一個(gè)容易忽視的地方,
color: colors.linghtBluecolors組件是有s的,新學(xué)習(xí)的時(shí)候很容易寫(xiě)掉.
image.png
padding布局
在CSS當(dāng)中,padding是一個(gè)非常常用的屬性,這里就不過(guò)多講解具體作用.只把用法進(jìn)行講解
在Container組件中,加入padding屬性,后面需要設(shè)置一個(gè)常量,例如:sonst EdgeInsets.all(10.0),就等于我們?cè)赾ss中的padding:10px來(lái)理解,上下左右,全部padding的值為10.
如果需要單獨(dú)設(shè)置4個(gè)方向的值,我們可以調(diào)用EdgeInsets.fromLTRB方法
padding: const EdgeInsets.fromLTRB(left, top, right, bottom)
margin布局
只要學(xué)會(huì)使用了padding的使用之后,margin就很容易掌握了
margin: const EdgeInsets.all(15.0),
完整代碼:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '這里是beline的app',
home: Scaffold(
appBar: AppBar(title: Text('這里是title')),
body: Center(
child: Container(
child: new Text(
'this is beline App',
style: TextStyle(fontSize: 40.0),
),
alignment: Alignment.topCenter,
width: 375.0,
height:350.0,
color: Colors.lightBlue,
padding: const EdgeInsets.fromLTRB(32.0, 100.0, 50.0, 10.0),
margin: const EdgeInsets.all(15.0),
)
)),
);
}
}
decoration背景漸變色和邊框
在使用decoration之前我們需要把前面使用到的color屬性去掉,因?yàn)橥瑫r(shí)使用color和decoration屬性會(huì)沖突導(dǎo)致編譯器報(bào)錯(cuò).
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightBlue, Colors.green,Colors.deepOrange]
)
),
上面的demo中,我們通過(guò)三個(gè)顏色,把Container的背景做成了橫向漸變效果,同時(shí)使用vscode編譯器可以在鼠標(biāo)指向?qū)?yīng)的顏色屬性的時(shí)候,看到通過(guò)加[100]的方式顯示顏色的深度
邊框?qū)傩詁order也是需要在decoration對(duì)象下來(lái)設(shè)置的.分別傳入邊框?qū)挾群皖伾?/p>
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightBlue, Colors.green,Colors.deepOrange]
),
border:Border.all(width: 5.0, color: Colors.redAccent)
),
