[移动开发]flutter-BoxDecoration属性

上面讲了圆图片的加载，实际中很多文本都是有边框圆角的，本文简单的列两个例子

flutter BoxDecoration的解释

const BoxDecoration({
this.color, // 底色
this.image, // 背景图
this.border, // 边框颜色
this.borderRadius, // 圆角大小
this.boxShadow, // 阴影
this.gradient, // 渐变
this.shape = BoxShape.rectangle, // 形状
})

很多项目中是有边框为1的宽度，带圆角的问题：

class  MyBoxDecorationBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 15,top: 15,bottom: 15,right: 15),
      padding: EdgeInsets.only(left: 12, right: 12, top: 5, bottom: 5),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.cyanAccent, width: 1),//边框
        borderRadius: BorderRadius.all(//圆角
          Radius.circular(20.0),
        ),
      ),
      child: Text(
      "圆角带边框",
      style: TextStyle(
      color: Colors.cyanAccent,
      ),
    ),
    );
  }
}

实际开发中会遇到一个带边框的左上角右下角圆行
这个时候我们只需要更改 borderRadius: BorderRadius.only( )：

class MyBoxDecorationBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 15, top: 15,bottom: 15, right: 15),
      padding: EdgeInsets.only(left: 12, right: 12, top: 5, bottom: 5),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.red, width: 1), //边框
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
      ),
      child: Text(
        "特定圆角10",
        style: TextStyle(
          color: Colors.red,
        ),
      ),
    );
  }
}

渐变的图形：

class MyBoxDecorationBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 15, top: 15, bottom: 15, right: 15),
      padding: EdgeInsets.only(left: 12, right: 12, top: 5, bottom: 5),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 1), //边框
        borderRadius: BorderRadius.all(
          //圆角
          Radius.circular(20.0),
        ),
        gradient: LinearGradient(
            // 渐变从左到右
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            // 渐变从上到右
            //   begin: Alignment.topCenter,
            //   end: Alignment.bottomCenter,
            //渐变从左上到右下
            // begin: Alignment.topLeft,
            // end: Alignment.bottomRight,
            colors: [Colors.blueAccent, Colors.yellowAccent]),
      ),
      child: Center(
        child: Text(
          "全圆角带边框背景渐变",
          style: TextStyle(
            color: Colors.red,
          ),
          textAlign: TextAlign.center, //
        ),
      ),
      //给背景给个宽高
      width: 200,
      height: 200,
    );
  }
}

也就可以直接设置圆形的图

class MyBoxDecorationBodynew extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 300,
          height: 300,//直径
          decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(150),//半径的圆
              // 圆形图片
              image: DecorationImage(
                  image: NetworkImage( 'https://...'),
                  fit: BoxFit.cover
              )
          ),
        ),
      ),
    );
  }
}

BoxDecoration还有很多属性大家可以自己取学习一波