如何在Flutter中更改芯片的形状

Question

我正在尝试创建一个形状，类似于以下图像:

我计划使用 Chips 实现相同的效果。然而，芯片在所有四个边上都有圆角边框。是否有任何方法可以覆盖此设置，并在左侧拥有矩形角和右侧拥有圆角？

- vipin agrahari

Answer 1

您可以使用 Chip 组件的 shape 属性。在该属性中，您可以传递 RoundedRectangleBorder() 并在 RoundedRectangleBorder() 中提及 borderRadius。还有其他 ShapeBorder，如 BeveledRectangleBorder()、StadiumBorder()、OutlineInputBorder()、ContinuousRectangleBorder() 等。

下面是使用 RoundedRectangleBorder() 的代码：

    Chip(
      backgroundColor: Color(0xFFE1E4F3),
      padding: const EdgeInsets.symmetric(vertical: 15,horizontal: 5),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topRight: Radius.circular(20),bottomRight: Radius.circular(20))),
      label: Text("Custom Chip Shape",
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.w600,
          color: Color(0xFF3649AE)
          ),
        )
      );

希望这可以帮助你！

- Syangden DT

---

“Custom chip Shape” 文字所使用的字体是什么？ - Nizamudeen Sherif

Answer 2

我必须将芯片放入容器中，然后匹配背景颜色。

  new Container(
    decoration: new BoxDecoration(
      color: Colors.blue.shade100,
      borderRadius: new BorderRadius.only(
          topRight: Radius.circular(30.0), bottomRight: Radius.circular(30.0)),
      border: new Border.all(color: Color.fromRGBO(0, 0, 0, 0.0)),
    ),
    child: new Chip(
      label: new Text('Order Created',
          style: new TextStyle(fontSize: 20.0, color: Colors.blueGrey)),      
    ),
  );

- F-1