如何在顫振中改變切屑的形狀

Question

我正在嘗試創建一個類似於下圖所示的形狀。

我打算使用Chips來實現相同的目的。 但是，芯片的所有四個側面都具有圓形邊界。 有什么辦法可以覆蓋它，並在左側具有矩形角，在右側具有圓角。

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)
          ),
        )
      );

希望這可以幫助你！！

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)),      
    ),
  );