BoxDecoration

BoxDecoration

DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等

BoxDecoration继承自Decoration，描述如下：

The BoxDecoration class provides a variety of ways to draw a box.
BoxDecoration类提供了多种绘制box的方法。
The box has a border, a body, and may cast a boxShadow.
box有border，body，boxShadow
The shape of the box can be a circle or a rectangle. If it is a rectangle, then the borderRadius property controls the roundness of the corners.
box的形状可以是circle或者rectangle。如果是rectangle，通过 borderRadius 属性控制圆角
The body of the box is painted in layers. The bottom-most layer is the color, which fills the box. Above that is the gradient, which also fills the box. Finally there is the image, the precise alignment of which is controlled by the DecorationImage class.
box的body是分层绘制的。 最底层是color，它填充了box。 在此之上的是gradient，渐变也填充了box。 最后是图像，其对齐由DecorationImage类控制。
The border paints over the body; the boxShadow, naturally, paints below it.
boder在body上绘制，boxShadow在其下方绘制。

构造方法

BoxDecoration({Color color, DecorationImage image, BoxBorder border, BorderRadiusGeometry borderRadius, List<BoxShadow> boxShadow, Gradient gradient, BlendMode backgroundBlendMode, BoxShape shape: BoxShape.rectangle })

官方文档的例子(图片加载不了，就换了个)

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  color: const Color(0xff7c94b6),
                  image: const DecorationImage(
                    image: NetworkImage("https://i.picsum.photos/id/237/200/300.jpg"),
                    fit: BoxFit.contain,
                  ),
                  border: Border.all(
                    color: Colors.black,
                    width: 8,
                  ),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            )
        )
    );
  }
}

参考如下的教程：

• Flutter — BoxDecoration Cheat Sheet

Color

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
              child: Container(
                color: Colors.purple,
                child: FlutterLogo(
                  size: 200,
                ),
              )
            )
        )
    );
  }
}

Gradient

  /// A gradient to use when filling the box.
  ///
  /// If this is specified, [color] has no effect.
  ///
  /// The [gradient] is drawn under the [image].
  final Gradient gradient;

LinearGradient

LinearGradient继承自Gradient，表示的一个2D的线性渐变

gradient有2个锚点，begin和end。起点对应于0.0，终点对应于1.0。用分数表示。
colors由颜色列表表示，至少2个颜色。如果指定了stops列表，其length需与colors列表相同。
然后根据tileMode进行着色
通常与BoxDecoration一起使用

构造方法：

LinearGradient({AlignmentGeometry begin: Alignment.centerLeft, AlignmentGeometry end: Alignment.centerRight, @required List<Color> colors, List<double> stops, TileMode tileMode: TileMode.clamp, GradientTransform transform })

一个简单的例子：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  color: Colors.purple,
                  gradient: LinearGradient(
                    colors: [Colors.red, Colors.blue],
                  )
                ),
              ),
            )
        )
    );
  }
}

可以指定begin和end，它们都是Alignment类型，其有一些列的值，如：

  /// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);

  /// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);

  /// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);

  /// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);

  /// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);

  /// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);

  /// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);

  /// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);

  /// The bottom right corner.
  static const Alignment bottomRight = Alignment(1.0, 1.0);

但也可以使用Alignment(x, y)这种形式

Alignment(x, y) in a rectangle with height h and width w describes the point (x * w/2 + w/2, y * h/2 + h/2) in the coordinate system of the rectangle.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  color: Colors.purple,
                  gradient: LinearGradient(
                    colors: [Colors.red, Colors.blue],
                    begin: Alignment(-1.0, -1.0),
                    end: Alignment.centerRight,
                  )
                ),
              ),
            )
        )
    );
  }
}

TileMode

TileMode可能的值是：

• TileMode.clamp
• TileMode.mirror
• TileMode.repeated

RadialGradient

RadialGradient径向渐变有一个center 和radius。

构造方法

RadialGradient({AlignmentGeometry center: Alignment.center, double radius: 0.5, @required List<Color> colors, List<double> stops, TileMode tileMode: TileMode.clamp, AlignmentGeometry focal, double focalRadius: 0.0, GradientTransform transform })

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
              child: Container(
                  decoration: new BoxDecoration(
                      color: Colors.purple,
                      gradient: new RadialGradient(
                          colors: [Colors.red, Colors.blue],
                          center: Alignment(0.0, 0.0),
                          radius: 0.5
                      ),

                  ),
                  child: new FlutterLogo(
                    size: 200.0,
                  )
              )
            )
        )
    );
  }
}

效果如下：

Image

image是绘制在背景color和gradient之上的，是DecorationImage类型

构造方法

DecorationImage({@required ImageProvider image, ColorFilter colorFilter, BoxFit fit, AlignmentGeometry alignment: Alignment.center, Rect centerSlice, ImageRepeat repeat: ImageRepeat.noRepeat, bool matchTextDirection: false })

这里一定要提供一个image，使用NetworkImage

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
              child: Container(
                  decoration: new BoxDecoration(
                      color: Colors.purple,
                      gradient: new RadialGradient(
                          colors: [Colors.red, Colors.blue],
                          center: Alignment(0.0, 0.0),
                          radius: 0.5
                      ),
                      image: DecorationImage(
                        image: NetworkImage('http://jlouage.com/images/author.jpg')
                      )
                  ),
                  child: new FlutterLogo(
                    size: 200.0,
                  )
              )
            )
        )
    );
  }
}

boxShadow

BoxShadow有几个重要的属性：

• color - 阴影颜色
• blurRadius - 模糊值
• spreadRadius - 扩展阴影的半径
• offset - x 和 y 方向偏移量

  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
                child: Container(
                    decoration: new BoxDecoration(
                      color: Colors.purple,
                      gradient: new RadialGradient(
                          colors: [Colors.red, Colors.blue],
                          center: Alignment(0.0, 0.0),
                          radius: 0.5),
                      image: DecorationImage(
                          image: NetworkImage(
                              'http://jlouage.com/images/author.jpg')),
                      boxShadow: [
                        BoxShadow(color: Colors.grey, blurRadius: 8.0, spreadRadius: 8.0, offset: Offset(5.0, 5.0))
                        ],
                      ),
                    child: new FlutterLogo(
                      size: 200.0,
                    )
                )
            )
        )
    );
  }
}

Border

A border to draw above the background color, gradient, or image.
border是绘制在color gradient image之上的

处理使用Border.all之外，还可以使用

Border({BorderSide top: BorderSide.none BorderSide right: BorderSide.none BorderSide bottom: BorderSide.none BorderSide left: BorderSide.none })

有4个参数，top, bottom, left and right，每个都是BorderSide类

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
                child: Container(
                    decoration: new BoxDecoration(
                      color: Colors.purple,
                      border: Border(top: BorderSide(color: Colors.green, width: 5.0, style: BorderStyle.solid))
                      ),
                    child: new FlutterLogo(
                      size: 200.0,
                    )
                )
            )
        )
    );
  }
}

borderRadius

borderRadius用来设置圆角

BorderRadius.all创建的是相同大小的圆角

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('BoxDecoration示例'),
            ),
            body: Center(
                child: Container(
                    decoration: new BoxDecoration(
                      color: Colors.orange,
                      border: Border.all(color: Colors.green, width: 5.0, style: BorderStyle.solid),
                      borderRadius: BorderRadius.all(Radius.circular(20.0)),
                      ),
                    child: new FlutterLogo(
                      size: 200.0,
                    )
                )
            )
        )
    );
  }
}

也可直接使用BorderRadius.circular(20.0)