无法在一侧设置边框半径和一侧的边框颤动

Question

为什么这段代码隐藏了容器的child以及如何解决这个问题。我无法在一侧设置边框半径，在一侧或两侧设置边框

Container(
          child: Text(
            "Test",
            style: TextStyle(
              color: Theme.of(context).primaryColor,
              fontWeight: FontWeight.w800,
              fontFamily: "GE",
              fontSize: 30.0,
            ),
          ),
          width: double.infinity,
          height: 100.0,
          padding: EdgeInsets.symmetric(vertical: 100.0, horizontal: 100.0),
          decoration: BoxDecoration(
            color: Colors.grey[800],
            borderRadius: const BorderRadius.only(
              bottomLeft: const Radius.circular(50.0),
            ),
            border: Border(
              top:
                  BorderSide(width: 16.0, color: Colors.lightBlue.shade600),
              bottom:
                  BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
            ),
          ),
        )

Answer 1

因为垂直填充与容器的高度相同，因此没有 space 文本显示。

您需要减少内边距或增加容器高度。

=== 根据评论更新：

您不能同时添加 border 和 borderRadius，因此会出现错误。

由于您似乎只想在底部和顶部添加颜色，因此您可以改用 boxShadow 和 borderRadius:

decoration: BoxDecoration(
  color: Colors.grey[800],
  borderRadius: const BorderRadius.only(
    bottomLeft: const Radius.circular(50.0),
  ),
  boxShadow: [
    BoxShadow(color: Colors.lightBlue.shade900, spreadRadius: 3),
  ],
),

如果您想在顶部使用与底部不同的颜色，则必须解决这个问题。您可以使用的一种方法是抵消阴影，使其仅充当底部边框颜色。然后将Container包裹在Column中，并在其上方添加另一个细Container作为顶部边框颜色如：

Column(
  children: [
    // top border color
    Container(
      height: 5.0,
      color: Colors.lightBlue.shade600,
    ),
    Container(
      child: Text(
        "Test",
        style: TextStyle(
          color: Theme.of(context).primaryColor,
          fontWeight: FontWeight.w800,
          fontFamily: "GE",
          fontSize: 30.0,
        ),
      ),
      width: double.infinity,
      height: 100.0,
      decoration: BoxDecoration(
        color: Colors.grey[800],
        borderRadius: const BorderRadius.only(
          bottomLeft: const Radius.circular(50.0),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.lightBlue.shade900,
            spreadRadius: 3,
            // offset to act as bottom border color
            offset: Offset(0, 5),
          ),
        ],
      ),
    ),
  ],
),

无法在一侧设置边框半径和一侧的边框颤动

can't set border radius on one side and border on one side flutter

flutter

border

border-radius