如何在边框按钮上添加边框？

Z时代
2024-01-10
分类：问答

我最近才陷入困境，到目前为止，我一直很喜欢它，但是我一直在进行一些UI更改。任何帮助表示赞赏！

我的目标是要得到一个带有蓝色背景图标的圆形按钮，但在外部周围有一个较深的蓝色边框。附有图片。

我的方法是：

获取一个圆形的蓝色按钮。

在该按钮上放置一个图标。

添加边框。

我陷入了第3步，因为我不知道如何添加边框，或者考虑到我解决问题的方式，是否还有可能添加边框。目前，具体颜色对我来说并不重要，稍后我将更改主题。

这是我目前有代码明智的地方：

  var messageBtn = new Row(
  children: <Widget>[
    new Padding(
      padding: const EdgeInsets.all(20.0),
      child: new RawMaterialButton(
        onPressed: _messages,
        child: new Padding(
          padding: const EdgeInsets.all(20.0),
          child: new Icon(
            Icons.message,
            size: 30.0,
            color: Colors.white,
          ),
        ),
        shape: new CircleBorder(),
        fillColor: Colors.deepPurple,
      ),
    ),
    new Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Text(
          'Send Messages',
          style: new TextStyle(
            fontSize: 20.0,
          ),
        )),
  ],
);

产生的结果：请参阅屏幕截图

我想要这个：请看第二张截图

回答：

嗨，凯瑟琳，欢迎您！

通过深入研究组成的小部件，可以实现所需的功能MaterialButton。

首先，您需要Ink小部件。使用BoxDecoration可以提供更灵活的样式。

Ink然后可以包含一个InkWell小部件，该小部件可以识别onTap并绘制飞溅效果。默认情况下，飞溅将继续到包含框的边缘，但是您可以通过提供InkWell一个非常大的值使其变为圆形borderRadius。

这是您要使用的按钮的示例：

Material(
  type: MaterialType.transparency, //Makes it usable on any background color, thanks @IanSmith
  child: Ink(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.indigoAccent, width: 4.0),
      color: Colors.indigo[900],
      shape: BoxShape.circle,
    ),
    child: InkWell(
      //This keeps the splash effect within the circle
      borderRadius: BorderRadius.circular(1000.0), //Something large to ensure a circle
      onTap: _messages,
      child: Padding(
        padding:EdgeInsets.all(20.0),
        child: Icon(
          Icons.message,
          size: 30.0,
          color: Colors.white,
        ),
      ),
    ),
  )
),