Question

我有以下代码：

return Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5.0),
        ),
        child: InkWell(
          onTap: () {
            ....
          },
          child: Container(
            decoration: BoxDecoration(
              border: Border(
                  top: BorderSide(
                color: Theme.of(context).primaryColor,
                width: 3.0,
              )),
              //borderRadius: BorderRadius.only(topLeft: const Radius.circular(5.0), topRight: const Radius.circular(5.0)),
            ),
            height: 133,
            child: ...,
          ),
        ));
  }

问题是我试图在顶部边框上设置颜色并将边框半径指定为5。据我所知，我无法为卡片的顶部边框分配颜色。您必须一直进行设置。但是您可以在容器上执行此操作。问题在于，向容器添加半径会使容器中的内容消失。

Answer 1

这是一个有趣的机制...尽管不理想，我想您可以用Column包裹您的孩子并制作自己的自定义边框元素，以免与您的内容冲突。

类似这样的东西：

class MyTopBorder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: const Radius.circular(5.0),
          topRight: const Radius.circular(5.0),
        ),
        color: Theme.of(context).primaryColor,
      ),
      height: 3.0,
    );
  }
}

，然后将其添加到您的Card：

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(5.0),
  ),
  child: InkWell(
    onTap: () {
      // ...
    },
    child: Column(
      children: <Widget>[
        MyTopBorder(),
        Container(
          height: 133,
          child: Text("..."),
        ),
      ],
    ),
  ),
),

边境集装箱和卡

1 个答案: