Flutte如何创建一个带有圆角的Icon?

5 min read

Flutter提供了一个Container小部件可以帮助我们创建具有圆角的图标。以下是一个简单的例子:

Container(
  width: 50.0,
  height: 50.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(color: Colors.black),
  ),
  child: Icon(Icons.person),
),

在上面的例子中,我们使用Container小部件来创建一个大小为50x50的圆形容器,并使用BoxDecoration属性将其形状设置为圆形。我们还使用Border属性在容器周围添加了一个黑色边框。最后,我们将Icon小部件添加到容器中以显示图标。

如果你想创建一个带有圆角的图标,你可以将BoxShape属性设置为矩形,并使用BorderRadius属性来指定圆角的大小。以下是一个带有圆角的图标的示例代码:

Container(
  width: 50.0,
  height: 50.0,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    border: Border.all(color: Colors.black),
  ),
  child: Icon(Icons.person),
),

在上面的例子中,我们使用BorderRadius属性将容器的角设置为10像素的圆角,将BoxShape设置为矩形。这将使容器带有圆角并显示带有圆角的图标。