user-interface - flutter 如何在小部件周围/容器内部绘制自定义边框

Question

我正在尝试实现一个Flutter UI，其外观类似于此图像；



目前，我正在尝试实现边界，基本上是将顶部和底部切掉的边界，甚至可能切掉顶部，底部和两边只具 Angular 边界。

我尝试了各种CustomPaint方法，但是它们都很复杂，必须按每个小部件完成。我觉得这应该很简单，但是我找不到办法。

如何创建一个小部件来包装任何给定的小部件(例如FlatButton，Card或TextSpan)，然后在其子级周围创建此边框？

甚至更好的是，是否有可能为整个应用程序/屏幕创建包装小部件，从而在特定小部件周围放置自定义边框？因此，如果小部件树包含任何FlatButton，它们将具有CustomBorder，但说所有Text都没有？

Answer 1

自定义边框类

class TechBorder extends StatelessWidget {
  final Widget child;
  final Color borderColor;
  final double borderWidth, leftBorderLength, rightBorderLength;

  //This is just a sample, modify it as your requirement
  //add extra properties like padding,color etc.

  TechBorder(
      {Key k,
      @required this.child,
      @required this.borderColor,
      @required this.borderWidth,
      @required this.leftBorderLength,
      @required this.rightBorderLength,})
      : super(key: k);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
                  border: Border(
                      left: BorderSide(color: borderColor, width: borderWidth),
                      right:
                          BorderSide(color: borderColor, width: borderWidth)),
                  color: Colors.transparent),
        ),
        Container(
            color: Colors.transparent,
            child: Stack(children: [
              Positioned(
                  top: 0,
                  left: 0,
                  child: Container(
                      color: borderColor,
                      width: leftBorderLength,
                      height: borderWidth)),
              Positioned(
                  bottom: 0,
                  left: 0,
                  child: Container(
                      color: borderColor,
                      width: leftBorderLength,
                      height: borderWidth)),
              Positioned(
                  right: 0,
                  child: Container(
                      color: borderColor,
                      width: rightBorderLength,
                      height: borderWidth)),
              Positioned(
                  bottom: 0,
                  right: 0,
                  child: Container(
                      color: borderColor,
                      width: rightBorderLength,
                      height: borderWidth)),
            ])),
        Padding(
          padding: const EdgeInsets.all(10.0),
          child: child,
        )
      ],
    );
  }
}

用法

Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(
                      'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX18042265.jpg',
                    ),
                    fit: BoxFit.fill)),
            padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
            child: TechBorder(
              borderWidth:3.0,
              leftBorderLength:25,
              rightBorderLength:25,
                borderColor: Colors.blueAccent,
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                          padding: EdgeInsets.only(top: 5, bottom: 5),
                          child: Text('SCREEN:  Ox1b o1197hgk500',
                              style: TextStyle(
                                  color: Colors.blueAccent, fontSize: 17))),
                      Padding(
                          padding: EdgeInsets.only(top: 5, bottom: 5),
                          child: Row(
                            children: <Widget>[
                              Text('3518',
                                  style: TextStyle(
                                      color: Colors.blueAccent, fontSize: 17)),
                              Container(
                                  margin: EdgeInsets.only(left: 15),
                                  color: Colors.blueAccent,
                                  height: 12,
                                  width: 80),
                              SizedBox(width: 8),
                              Container(
                                  color: Colors.blueAccent,
                                  height: 12,
                                  width: 100)
                            ],
                          )),
                      Padding(
                          padding: EdgeInsets.only(top: 5, bottom: 5),
                          child: Text('Other fields gos here...',
                              style: TextStyle(
                                  color: Colors.blueAccent, fontSize: 17))),
                    ])))