美文网首页程序员
Flutter学习笔记19-Container

Flutter学习笔记19-Container

作者: zombie | 来源:发表于2020-10-22 14:03 被阅读0次

    Container是一个组合类容器,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器。
    源码如下:

    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,
    })
    

    Container的大小可以通过width、height属性来指定,也可以通过constraints来指定;如果它们同时存在时,width、height优先。Container内部会根据width、height来生成一个constraints。
    color和decoration是互斥的,如果同时设置它们则会报错。当指定color时,Container内会自动创建一个decoration。
    代码示例:

    class ContainerDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.only(top: 50.0, left: 100),
          constraints: BoxConstraints.tightFor(width: 200.0, height: 100.0),
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: [Colors.red, Colors.orange],
              center: Alignment.center,
              radius: .98,
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black54,
                offset: Offset(2.0, 2.0),
                blurRadius: 4.0,
              ),
            ],
          ),
          transform: Matrix4.rotationZ(.2),
          alignment: Alignment.center,
          child:
              Text('10.10', style: TextStyle(color: Colors.white, fontSize: 40.0)),
        );
      }
    }
    
    
    代码运行效果图如下:

    代码传送门

    相关文章

      网友评论

        本文标题:Flutter学习笔记19-Container

        本文链接:https://www.haomeiwen.com/subject/bnwumktx.html