如何在颤振中改变芯片的形状答案

【问题标题】：How to change the shape of chip in flutter如何在颤振中改变芯片的形状
【发布时间】：2018-09-18 06:14:28
【问题描述】：

我正在尝试创建一个类似于下图所示的形状。

我打算使用Chips 来实现相同的目标。但是，筹码的所有 4 面都有圆形边框。有什么办法可以覆盖它并在左侧有一个矩形角，在右侧有一个圆角。

【问题讨论】：

【解决方案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)
          ),
        )
      );

希望对你有所帮助！！

【讨论】：

“自定义芯片形状”文本中使用的字体是什么？

【解决方案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)),      
    ),
  );

【讨论】：