带有文本上方和下方图标的按钮

Posted 2021-05-03

我正在尝试使小部件实现以下效果：

它是一个按钮，在图标上方或下方显示中间的图标和文本，具体取决于图标是否反转。

我做了以下操作，将图标和文本添加到按钮：

 child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              isInverted
                  ? Icon(Icons.access_alarm)
                  : Text("Test")
              isInverted
                  ? Padding(padding: EdgeInsets.only(top: 20))
                  : Padding(padding: EdgeInsets.only(top: 20)),
              isInverted
                  ? Text("Test")
                  : Icon(Icons.access_alarm),
              isInverted
                  ? Padding(padding: EdgeInsets.only(top: 0))
                  : Padding(padding: EdgeInsets.only(bottom: 20)),
            ],
          ),

问题是按钮不对称。

如果按钮没有倒置但是如果图标不居中，它可以正常工作。

也许有一个解决方案没有使用任何填充。

答案

试试这种方式

child: RaisedButton(
          shape: Border.all(width: 2.0),
          onPressed: _onPressed,
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: Icon(Icons.home),
              ),
              Align(
                alignment:
                    isInverted ? Alignment.bottomCenter : Alignment.topCenter,
                child: Text("home"),
              )
            ],
          ),
        )

@ishaan也建议

另一答案

试试这个：

Stack(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.all(18.0),
      child: Icon(Icons.access_alarm),
    ),
    Positioned(
      child: Text("Test"),
      left: 15,
      bottom: isInverted?0:null,
      top: !isInverted?0:null,
    )
  ],
),