1. Container 介紹
基礎(chǔ)屬性不做太多介紹，有興趣的可以去Flutter 中文網(wǎng) 了解一下嘉赎。
2. 示范代碼
代碼下載地址米辐。如果對(duì)你有幫助的話(huà)記得給個(gè)關(guān)注，代碼會(huì)根據(jù)我的 Flutter 專(zhuān)題不斷更新务冕。
container.dart 路徑如下
/FMStudyApp/lib/Widgets/BaseWidget/container.dart
3. 基本屬性
優(yōu)雅的編程血当，我們先單獨(dú)創(chuàng)建一個(gè) container.dart 文件，用來(lái)試用 Container 的屬性和效果禀忆。
import 'package:flutter/material.dart';
class FMContainerVC extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text(
"Container",
),
backgroundColor: Colors.lightBlue,
),
body: _container(),
),
);
}
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
);
}
}
4. 顏色與大小
直接使用 color 屬性改變背景色臊旭，使用 width 設(shè)置寬度，使用 height 屬性設(shè)置高度油湖。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
width: 320,
height: 200,
color: Colors.red,
);
}
使用 constraints 屬性來(lái)改變 container 大小
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
color: Colors.red,
);
}
使用約束來(lái)改變 container 的位置與大小巍扛，同時(shí)設(shè)置了大小和約束并且有沖突時(shí)，會(huì)優(yōu)先執(zhí)行約束乏德。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
color: Colors.red,
// 此時(shí)優(yōu)先執(zhí)行約束撤奸，會(huì)擠壓寬度小于 320
margin: const EdgeInsets.only(left: 150, top: 100, right: 30),
);
}
5. Border 邊框設(shè)置
不得不贊一下，flutter 的邊框真的是自定義起來(lái)非常的方便喊括，可以給4個(gè)邊指定不同的顏色胧瓜，也可以給4個(gè)角不同的圓角。
我們先給這個(gè) container 添加一個(gè)邊框郑什，使用 decoration 屬性府喳，BoxDecoration 中的 border 屬性。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
),
);
}
注意：decoration 屬性和 color 屬性不可以同時(shí)使用蘑拯，否則會(huì)如下報(bào)錯(cuò)钝满。在 decoration 屬性里也可以設(shè)置背景色兜粘，如需要同時(shí)使用邊框和背景色，可以在這里設(shè)置弯蚜。
Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package:flutter/src/widgets/container.dart':
Failed assertion: line 283 pos 15: 'color == null || decoration == null'
我們?cè)趤?lái)改變一下邊框的角度
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.circular(30),
),
);
}
container border.png
其實(shí)這樣已經(jīng)能解決大部分需求了孔轴，下邊我們?cè)诮榻B下自定義邊框
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
color: Colors.yellow,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(0),
topRight: Radius.circular(0),
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
),
);
}
container border custom.png
下邊在自定義不同的邊框色
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
border: Border(
top: BorderSide(
width: 3,
color: Colors.cyan,
),
left: BorderSide(
width: 3,
color: Colors.blue,
),
right: BorderSide(
width: 3,
color: Colors.black,
),
bottom: BorderSide(
width: 3,
color: Colors.orange,
),
),
),
);
}
container border colorful.png
注意：使用自定義 border 時(shí)，不可以使用 borderRadius 屬性碎捺，否則會(huì)有如下報(bào)錯(cuò)
A borderRadius can only be given for a uniform Border.
6. 漸變色背景設(shè)置
使用 gradient 屬性給 container 設(shè)置漸變背景色路鹰。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
),
);
}
container gradient.png
7. 設(shè)置背景圖
使用 image 屬性設(shè)置背景圖，其中 centerSlice 可以改變填充大小收厨，可以自行實(shí)驗(yàn)效果晋柱。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.circular(30),
image: DecorationImage(
image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
// centerSlice: Rect.largest,
),
gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
),
);
}
container image.png
8. 陰影
使用 boxShadow 屬性設(shè)置陰影。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.circular(30),
boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
image: DecorationImage(
image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
// centerSlice: Rect.largest,
),
gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
),
);
}
container shadow.png
9. 旋轉(zhuǎn)
使用 transform 屬性設(shè)置旋轉(zhuǎn)诵叁，這里不做太多敘述了雁竞。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.circular(30),
boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
image: DecorationImage(
image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
// centerSlice: Rect.largest,
),
gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
),
transform: Matrix4.rotationZ(0.1),
);
}
container rotate.png
10. child 子控件
使用 child 屬性給 container 添加子控件，使用 padding 屬性設(shè)置子控件的范圍拧额，使用 alignment 來(lái)設(shè)置子控件的居中屬性浓领。
Container _container() {
return Container(
// 在這里嘗試 Container 屬性效果
constraints: BoxConstraints.expand(
width: 320,
height: 200,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.circular(30),
boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
image: DecorationImage(
image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
// centerSlice: Rect.largest,
),
gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
),
transform: Matrix4.rotationZ(0.1),
alignment: Alignment.centerLeft,
padding: const EdgeInsets.all(30),
child: Text(
"Container",
style: TextStyle(
fontSize: 30,
color: Colors.red,
),
),
);
}
padding 屬性，你可以理解為 child 距離該 container 4個(gè)邊框的邊界距離势腮，例如 padding: const EdgeInsets.all(30),
就是距離 child 上方距離 container 上方 30联贩，左右下三個(gè)方向同理
