Question

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

这是一个按钮，该按钮在中间显示一个图标，并在该图标的上方或下方显示文字（取决于是否反转）。

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

 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)),
            ],
          ),

问题在于按钮不是对称的。

如果按钮未反转但图标未居中，则效果很好。

也许有一种不使用任何填充的解决方案。

Answer 1

尝试这种方式

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建议

Answer 2

尝试一下：

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,
    )
  ],
),

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

2 个答案: