关于 Shape

shape 是什么？

控件的形状，我们可以通过该shape来定制widget 的形状，来达到自己想还要的形状效果

1.一个很酷的框

Card(
             // 矩形边框 side 设置边框的颜色和厚度
         shape: BeveledRectangleBorder(
             borderRadius: BorderRadius.all(Radius.circular(15)),
             side: BorderSide(color: Colors.green, width: 1)),
         child: ListTile(
           trailing: Icon(Icons.shield),
           leading: Icon(Icons.shield_sharp),
         ),
)

2.一个边角不同颜色的

shape: Border(
          top: BorderSide(color: Colors.red, width: 2),
          right: BorderSide(color: Colors.green, width: 5),
          bottom: BorderSide(color: Colors.indigo, width: 7),
          left: BorderSide(color: Colors.pink, width: 12)),

3.一个圆

Card(
     // 圆形
     shape:
         CircleBorder(side: BorderSide(color: Colors.red, width: 10)),
     child: ListTile(
       trailing: Icon(Icons.shield),
       leading: Icon(Icons.shield_sharp),
     ),
   )

4.一像胶囊一样的

Card(
    // 药丸形状
    shape: StadiumBorder(
        side: BorderSide(color: Colors.redAccent, width: 10)),
    child: ListTile(
      trailing: Icon(Icons.shield),
      leading: Icon(Icons.shield_sharp),
    ),
  )

5.定制圆角的

Card(
  // 外边框可以定制圆角
  shape: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(15)),
      borderSide: BorderSide(color: Colors.redAccent, width: 10)),
  child: ListTile(
    trailing: Icon(Icons.shield),
    leading: Icon(Icons.shield_sharp),
  ),
)

6.带有下划线的

Card(
       // 下划线
       shape: UnderlineInputBorder(
           borderRadius: BorderRadius.all(Radius.circular(15)),
           borderSide: BorderSide(color: Colors.redAccent, width: 10)),
       child: ListTile(
         trailing: Icon(Icons.shield),
         leading: Icon(Icons.shield_sharp),
       ),
     )