1. Container組件
1.1 Container介紹
Container在開發(fā)中被使用的頻率是非常高的，特別是我們經(jīng)常會(huì)將其作為容器組件亩鬼。
下面我們來看一下Container有哪些屬性：
Container({
this.alignment,
this.padding, //容器內(nèi)補(bǔ)白，屬于decoration的裝飾范圍
Color color, // 背景色
Decoration decoration, // 背景裝飾
Decoration foregroundDecoration, //前景裝飾
double width,//容器的寬度
double height, //容器的高度
BoxConstraints constraints, //容器大小的限制條件
this.margin,//容器外補(bǔ)白，不屬于decoration的裝飾范圍
this.transform, //變換
this.child,
})
大多數(shù)屬性在介紹其它容器時(shí)都已經(jīng)介紹過了，不再贅述雄可，但有兩點(diǎn)需要說明：
- 容器的大小可以通過width、height屬性來指定缠犀，也可以通過constraints來指定数苫，如果同時(shí)存在時(shí)，width辨液、height優(yōu)先虐急。實(shí)際上Container內(nèi)部會(huì)根據(jù)width、height來生成一個(gè)constraints滔迈；
- color和decoration是互斥的止吁，實(shí)際上，當(dāng)指定color時(shí)燎悍，Container內(nèi)會(huì)自動(dòng)創(chuàng)建一個(gè)decoration敬惦；
1.2. Container演練
簡(jiǎn)單進(jìn)行一個(gè)演示：
image.png
1.3. BoxDecoration
Container有一個(gè)非常重要的屬性 decoration：
- 他對(duì)應(yīng)的類型是Decoration類型，但是它是一個(gè)抽象類谈山。
- 在開發(fā)中俄删，我們經(jīng)常使用它的實(shí)現(xiàn)類BoxDecoration來進(jìn)行實(shí)例化
BoxDecoration常見屬性：
const BoxDecoration({
this.color, // 顏色，會(huì)和Container中的color屬性沖突
this.image, // 背景圖片
this.border, // 邊框奏路，對(duì)應(yīng)類型是Border類型畴椰，里面每一個(gè)邊框使用BorderSide
this.borderRadius, // 圓角效果
this.boxShadow, // 陰影效果
this.gradient, // 漸變效果
this.backgroundBlendMode, // 背景混合
this.shape = BoxShape.rectangle, // 形變
})
部分效果演示：
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("HelloWorld"),
),
body: MyHomeBody(),
),
);
}
}
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
buildContainerRadius(),
SizedBox(height: 30,),
buildContainer(),
],
),
);
}
Container buildContainerRadius() {
return Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
image: DecorationImage(
image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
),
),
);
}
Container buildContainer() {
return Container(
// color: Color.fromRGBO(3, 3, 255, 0.5),
width: 150,
height: 150,
child: Icon(Icons.pets,size: 32,color: Colors.white,),
decoration: BoxDecoration(
color: Colors.amber,
border: Border.all(
color: Colors.redAccent,
width: 3,
style: BorderStyle.solid
),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
offset: Offset(5,5),
color: Colors.purple,
blurRadius: 5
),
],
gradient: LinearGradient(
colors: [
Colors.green,
Colors.red
],
),
),
);
}
}
image.png
學(xué)習(xí)內(nèi)容來自Flutter從入門到實(shí)戰(zhàn)
