如何在Flutter中制作一个小圆角矩形

Question

如何在Flutter中制作一个小圆角矩形

17

我的小部件的红色矩形中心太大，并且不会对宽度和高度参数进行响应。

我已经更新了Flutter和Android Studio。我先用一个圆形容器开始，然后使用FlatButton并给它一个形状。但是当它变成一个矩形时，它的大小与容器相同。当按钮被按下时，_isRecord是一个布尔值。

return Container(
  width: 80.0,
  height: 80.0,
  child: Container(
    child: FlatButton(
      onPressed: _press,
     ),
    decoration: new BoxDecoration(
      color: Colors.red,
      shape: _isRecording ? BoxShape.rectangle : BoxShape.circle,
      borderRadius: _isRecording ? BorderRadius.all(Radius.circular(8.0)) : null,
    ),
  ),
  decoration: new BoxDecoration(
    color: Colors.black,
    shape: BoxShape.circle,
    border: Border.all(width: 5.0, color: Colors.white),
  ),
);

它应该像语音备忘录的录制按钮一样看起来和运作。它应该是一个白色的圆形描边，中心为红色，当按下时会变成一个较小的、圆角矩形。

- TotallyGamerJet

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- EdHuamani · Accepted Answer

你可以在Padding中使用你的小部件。

示例：

    InkWell(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      onTap: () {
        setState(() {
          _isRecording = !_isRecording;
        });
      },
      child: DecoratedBox(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(width: 5.0, color: Colors.white),
        ),
        child: Padding(
          padding: EdgeInsets.all(32.0),
          child: Container(
            width: 40.0,
            height: 40.0,
            child: Container(
              decoration: new BoxDecoration(
                color: Colors.red,
                shape:
                    _isRecording ? BoxShape.rectangle : BoxShape.circle,
                borderRadius: _isRecording
                    ? BorderRadius.all(Radius.circular(8.0))
                    : null,
              ),
            ),
          ),
        ),
      ),
    )