4-Flutter常用组件--容器

一.DecoratedBox装饰容器

在其子项 绘制之前或之后 绘制装饰的小部件
decoration :装饰器
position：decoration 是放在child上面还是下面
child：子控件

1.BoxDecoration

装饰器，主要用于decoration属性

1. backgroundBlendMode →BlendMode
   应用于框的颜色或渐变背景的混合模式。[…]
2. border →边框
   在背景色、渐变或图像上方绘制的边框。[…]
3. borderradius→borderradiusgometry
   如果非空，则此框的角将按此边界半径舍入。[…]
4. boxshadow→list
   此框在框后投射的阴影列表。[…]
5. color→颜色
   填充框背景的颜色。[…]
6. gradient →梯度
   填充框时使用的渐变。
7. image→装饰图像
   在背景色或渐变色上绘制的图像。[…]
8. IScomplex→布尔
   这个装饰是否复杂到可以从缓存它的绘画中溢出。
9. shape →盒形
   填充背景色、渐变和图像的形状，并将其投射为BoxShadow。[…]

class MyBoxHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Box组件"),
      ),
      body: Center(
          child: Container(
        height: 300,
        width: 300,
        //控件背景色
        color: Colors.grey,
        child: DecoratedBox(
          //decoration是当做背景还是前景
          position: DecorationPosition.background,
          //装饰边框
          decoration: BoxDecoration(
            //控件背景图
            image: DecorationImage(
              image: ExactAssetImage("images/1.jpg"),
              fit: BoxFit.cover,
            ),
            //边框
            /*border: Border(
                bottom: BorderSide(width:10,color: Colors.pinkAccent),
              top: BorderSide(width:10,color: Colors.cyanAccent),
              left: BorderSide(width:10,color: Colors.red),
              right: BorderSide(width:10,color: Colors.amberAccent),
            ),*/
            //圆角边框，当Radius=宽或是高的一般时就变成圆形，
            //不能跟border属性同时存在
            borderRadius: BorderRadius.circular(150),
            shape: BoxShape.rectangle,
          ),
          //
          child: Text("演示文稿",style: TextStyle(fontSize: 30,),),
        ),
      )),
    );

二.FittedBox填充容器

alignment → 对齐方式
fit → BoxFit 属性如下

class MyBoxHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Box组件"),
      ),
      body: Center(
        child: Container(
          height: 100,
          width: 150,
          color: Colors.grey,
          child: FittedBox(
              child:Text("演示文稿演示文稿",style: TextStyle(color: Colors.red),) ,
            fit: BoxFit.fitWidth,
          ),
        ),
      ),
    );
  }
}

三.OverflowBox溢出容器

子控件可以超过父容器

class MyBoxHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Box组件"),
      ),
      body: Container(
        height: 300.0,
        width: 300.0,
        color: Colors.cyanAccent,
        padding: const EdgeInsets.all(10.0),
        //margin: EdgeInsets.all(40.0),
        child: OverflowBox(
          //maxHeight必须大于  父容器的剩余变量，比如这里280.0<=h<=我们的设定值，280.0<=w<=我们的设定值
          //这里的280就是父容器的剩余空间。maxHeight必须大于父容器的剩余空间
          maxHeight: 400.0,
          maxWidth: 450.0,
          child: Container(
            //alignment: Alignment.topLeft,
            padding: EdgeInsets.all(10.0),
            height: 330.0,
            width: 330.0,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

四.RotatedBox旋转容器

quarterTurns → int
旋转角度，一般是顺时针旋转，每次旋转90度

五.SizedBox固定宽高容器

具有指定宽高的容器
如果有子控件，子控件的宽高会受到限制，但是如果SizedBox的width或height为null，则此小部件将自行调整大小以匹配该维度中孩子的大小。

如果没有子控件，SizedBox会在给定父母约束的情况下尝试将自身的尺寸调整为尽可能接近指定的高度和宽度。 如果height或width为null或未指定，则将其视为零。

SizedBox.expand构造函数可用于制作一个SizedBox，其大小可调整以适合父级。 等效于将width和height设置为double.infinity

SizedBox.fromSize({Key key, Widget child, Size size })
指定具体宽高

SizedBox.shrink({Key key, Widget child })
创建一个将变为其父级允许的尺寸的盒子。