1. Container组件
1.1 Container介绍
Container在开发中被使用的频率是非常高的,特别是我们经常会将其作为容器组件。
下面我们来看一下Container有哪些属性:
Container({
this.alignment,
this.padding, //容器内补白,属于decoration的装饰范围
Color color, // 背景色
Decoration decoration, // 背景装饰
Decoration foregroundDecoration, //前景装饰
double width,//容器的宽度
double height, //容器的高度
BoxConstraints constraints, //容器大小的限制条件
this.margin,//容器外补白,不属于decoration的装饰范围
this.transform, //变换
this.child,
})
大多数属性在介绍其它容器时都已经介绍过了,不再赘述,但有两点需要说明:
- 容器的大小可以通过width、height属性来指定,也可以通过constraints来指定,如果同时存在时,width、height优先。实际上Container内部会根据width、height来生成一个constraints;
- color和decoration是互斥的,实际上,当指定color时,Container内会自动创建一个decoration;
1.2. Container演练
简单进行一个演示:
image.png
1.3. BoxDecoration
Container有一个非常重要的属性 decoration:
- 他对应的类型是Decoration类型,但是它是一个抽象类。
- 在开发中,我们经常使用它的实现类BoxDecoration来进行实例化
BoxDecoration常见属性:
const BoxDecoration({
this.color, // 颜色,会和Container中的color属性冲突
this.image, // 背景图片
this.border, // 边框,对应类型是Border类型,里面每一个边框使用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
学习内容来自Flutter从入门到实战
网友评论