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

Question

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

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

因为垂直填充与容器的高度相同，因此没有空间让文本显示出来。

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

=== 根据评论更新：

您不能同时添加 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),
          ),
        ],
      ),
    ),
  ],
),