Container: 使用
1.严格控制大小
2.完善的装饰: 背景色,背景图,边框
3.间隔 padding margin
demo
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('布局控件 - Container'),
),
body: Container(
key: Key('yuotng.com'), // 指定一个具体的key
// color: Colors.yellowAccent, //背景色
decoration: BoxDecoration( // 和背景色的不可同时设置
color: Colors.green, //背景色
image: DecorationImage(
image: NetworkImage('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
colorFilter: ColorFilter.mode(Colors.white, BlendMode.multiply), // 滤镜
fit: BoxFit.fitWidth, // 填充方式
// centerSlice: Rect.fromLTRB(0, 0, 0, 0),
repeat: ImageRepeat.repeat,
matchTextDirection: false,
),
borderRadius: BorderRadius.all( Radius.circular(20.0)),
boxShadow: [
BoxShadow(
offset: Offset(6, 6),
color: Colors.red,
),
BoxShadow(
offset: Offset(6, 10),
color: Colors.green,
),
BoxShadow(
offset: Offset(6, 14),
color: Colors.black45,
),
],
border: Border.all(
color: Colors.red,
width: 4,
style: BorderStyle.solid,
),
),
width: 400.0, //container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
height: 400.0, //container的高度，设置为double.infinity可以强制在高度上撑满
child: Text(
'content',
style: TextStyle(
backgroundColor: Colors.red,
),
),
padding: EdgeInsets.all(90.0),
margin: EdgeInsets.all(20.0),
constraints: BoxConstraints.expand( // 会更改width height
width: 180,
height: 180,
),
alignment: Alignment.topLeft,
transform: Matrix4.rotationZ(0.3), //变形参数
// foregroundDecoration: BoxDecoration( // 绘制在child前面的装饰
// color: Colors.red,
// ),
),
),
);
}
}
1.1 组成
Container的组成如下：
最里层的是child元素；
child元素首先会被padding包着；
然后添加额外的constraints限制；
最后添加margin。
Container的绘制的过程如下：
首先会绘制transform效果；
接着绘制decoration；
然后绘制child；
最后绘制foregroundDecoration。
Container自身尺寸的调节分两种情况：
Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。
1.2 布局行为
由于Container组合了一系列的widget，这些widget都有自己的布局行为，因此Container的布局行为有时候是比较复杂的。
一般情况下，Container会遵循如下顺序去尝试布局：
对齐（alignment）；
调节自身尺寸适合子节点；
采用width、height以及constraints布局；
扩展自身去适应父节点；
调节自身到足够小。
进一步说：
如果没有子节点、没有设置width、height以及constraints，并且父节点没有设置unbounded的限制，Container会将自身调整到足够小。
如果没有子节点、对齐方式（alignment），但是提供了width、height或者constraints，那么Container会根据自身以及父节点的限制，将自身调节到足够小。
如果没有子节点、width、height、constraints以及alignment，但是父节点提供了bounded限制，那么Container会按照父节点的限制，将自身调整到足够大。
如果有alignment，父节点提供了unbounded限制，那么Container将会调节自身尺寸来包住child；
如果有alignment，并且父节点提供了bounded限制，那么Container会将自身调整的足够大（在父节点的范围内），然后将child根据alignment调整位置；
含有child，但是没有width、height、constraints以及alignment，Container会将父节点的constraints传递给child，并且根据child调整自身。
另外，margin以及padding属性也会影响到布局。
属性解析
key：Container唯一标识符，用于查找更新。
alignment：控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
padding：decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
foregroundDecoration：绘制在child前面的装饰。
width：container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
height：container的高度，设置为double.infinity可以强制在高度上撑满。
constraints：添加到child上额外的约束条件。
margin：围绕在decoration和child之外的空白区域，不属于内容区域。
transform：设置container的变换矩阵，类型为Matrix4。
child：container中的内容widget。
网友评论