Flutter组件——Container

Container组件

Container组件是一个非常重要的组件有点类似于html中的div。

• alignment

  这个是设置子组件的布局的，注意是子组件，它接受一个Alignment对象，我们可以使用Alignment(x, y)来构造它，或者我们也可以使用它已经定义好的几个常量来构造它

  

• padding

  这个是设置内边距的，接受一个EdgeInsetsGeometry, 我们可以将它的子类EdgeInsets对象赋值给它，我们可以使用const EdgeInsets.all(double value)，const EdgeInsets.only等方式声明

• margin

  它是设置Container的外边距，接受参数和padding一样

• height，width

  它们是设置宽和高的，里面接受一个double

• decoration

  绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。

  其中它接受一个Decoration，我们可以使用它的子类BoxDecoration来赋值给它。

  在BoxDecoration中也有许多参数

  • color 设置颜色的

  • image 设置背景图片，可以添加一个DecorationImage对象

  • border 设置边，接受一个BoxBorder，我们可以使用Border.all(width: 1.5, style: BorderStyle.solid, color: Colors.deepPurple),这样的发情时来构造它。

  • borderRadius 设置边角的，可以增加弧度，接受一个BorderRadius对象，我们可以使用BorderRadius.all来构造

  • gradient 设置颜色渐变效果，接受一个Gradient对象

• child

  接受一个孩子，孩子里面可以放置子组件

代码示例

Container(
            alignment: Alignment.bottomCenter,
            padding: const EdgeInsets.all(20.0),
            margin: const EdgeInsets.all(100.0),
            height: 500.0,
            width: 200.0,
            decoration: BoxDecoration(
              border: Border.all(width: 1.5, style: BorderStyle.solid, color: Colors.deepPurple),
              borderRadius: BorderRadius.circular(1.0),
              gradient: LinearGradient(colors: [
                Colors.deepPurple,
                Colors.deepOrange,
                Colors.pink,
                Colors.greenAccent
              ])
            ),
            child: Image.network('https://francisqiang.github.io/images/avatar.gif',
              fit: BoxFit.fitWidth,
              color: Colors.deepOrangeAccent,
              colorBlendMode: BlendMode.darken,
            ),
          ),