Flutter | 如何在小部件周围/容器内绘制自定义边框

Question

我想实现一个Flutter UI，其外观类似于此图像：

目前，我正在尝试实现边框，基本上是有上下切口的边框，甚至可能将顶部、底部和两侧都切掉，只保留角落。

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

如何创建一个小部件来包装任何给定的小部件，比如一个FlatButton、一个Card或一个TextSpan，然后在其子节点周围创建这个边框呢？

或者更好的是，是否可以为整个应用程序/屏幕创建一个包装器小部件，以在特定小部件周围放置自定义边框？因此，如果小部件树包含任何FlatButton，它们都将具有CustomBorder，但所有Text则不会？

- Jamie Lindsey

---

分享一下你已经尝试过的东西。 - shb

@shb，我很感激你对这条评论的看法，但是我已经尝试了三天，使用了各种方法和技巧的混合，其中我没有历史记录，也没有一个能够接近我所需的结果，因此即使尝试分享我到目前为止所尝试的内容也是毫无意义的。但是我确实说过我尝试在我的技术中使用CustomPaint，但是对于这样一个简单的任务来说，它是非常复杂的代码，并且它并没有达到我想要的效果。 - Jamie Lindsey

@pskink 谢谢您的建议，但我仅凭Decoration API类的链接是不可能开始实现这个目标的。我感谢您指引我正确的方向，但也许您可以指点我更详细一些？因为我对Dart/Flutter还比较新手。 - Jamie Lindsey

好的，谢谢。我会尝试一下。 - Jamie Lindsey

我不知道如何修复左上角...你是说你也不知道吗？我以为你知道如何解决这个问题，只是用了一种奇怪的方式，如果我错了，我很抱歉。所以我们都不知道如何让左上角完美地对齐？ - Jamie Lindsey

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))),
                    ])))

- Naveen Avidi

---

嘿，哇，谢谢，我现在会尝试这个并进行一些调整以适应我的需求，但这基本上就是我需要的东西了。昨天我花了几个小时被一个试图“教”我而不是提供一些示例代码让我使用的人引导着玩游戏，所以感谢你，我很感激。 - Jamie Lindsey