Container学习

281 阅读1分钟

如果只用Container包装子控件而没有任何其他参数的设置,代码如下:

     body:new Container(
      color:  Colors.blue,
      child: Text('老金说事'),
      alignment: Alignment.center,
      height: ScreenUtil.getScreenH(context)/8,
      width: ScreenUtil.getScreenW(context),
      margin: EdgeInsets.all(20),
    )

背景是圆角矩形

     body:new Container(
      child: Text('老金说事'),
      alignment: Alignment.center,
      height: 50,
      width: ScreenUtil.getScreenW(context),
      margin: EdgeInsets.only(top: 20),
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration:  BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: Colors.blue
      ),
    )

除了背景我们可以设置边框效果,代码如下:

  body:new Container(

      child: Text('老金说事'),
      alignment: Alignment.center,
      height: 50,
      width: ScreenUtil.getScreenW(context),
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration:  BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: Colors.blue,
            width: 2,
          )
      ),

    )

我们也可以通过此方式创建圆角图片和圆形图片,代码如下:

       body:new Container(

      alignment: Alignment.center,
      height: 200,
      width: 200,
      margin: EdgeInsets.all(20),
      decoration:  BoxDecoration(
        image: DecorationImage(
            image: NetworkImage(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: Colors.blue,
            width: 2,
          )
      ),

    )
);

     body:new Container(
      alignment: Alignment.center,
      height: 200,
      width: 200,
      margin: EdgeInsets.all(20),
      decoration:  BoxDecoration(
        image: DecorationImage(
            image: NetworkImage(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
          shape: BoxShape.circle,
          border: Border.all(
            color: Colors.blue,
            width: 2,
          )
      ),

    )
);