如何缩短边框的长度？

html5 • • 问答

我需要一个带有这些边框（角落里的那些）的容器。

这是我的代码：

Container(
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(color: Colors.black, width: 8),
            left: BorderSide(color: Colors.black, width: 8),
          ),
        ),
        padding: EdgeInsets.all(15),
        height: 265,
        width: 265,
        margin: EdgeInsets.symmetric(
          vertical: size.height * 0.1,
          horizontal: size.width * 0.1,
        ),
        child: Placeholder(),
      ),

但它看起来像这样：

如何使边框更短？谢谢

回答

您可以使用堆栈。 

Stack(
  children: [
    Container(
      width: 48,
      height: 48,
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(color: Colors.black, width: 8),
          left: BorderSide(color: Colors.black, width: 8),
        ),
      ),
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: Container(
        width: 48,
        height: 48,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(color: Colors.black, width: 8),
            right: BorderSide(color: Colors.black, width: 8),
          ),
        ),
      ),
    ),
    Container(
      padding: EdgeInsets.all(15),
      height: 265,
      width: 265,
      margin: EdgeInsets.symmetric(
        vertical: 16,
        horizontal: 16,
      ),
      decoration: BoxDecoration(
        color: Colors.red,
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            offset: Offset(0, 1),
            blurRadius: 4,
            spreadRadius: 0,
          )
        ],
      ),
      child: Container(),
    ),
  ],
)

以上是如何缩短边框的长度？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>