我正在尝试使小部件实现以下效果:
它是一个按钮,在图标上方或下方显示中间的图标和文本,具体取决于图标是否反转。
我做了以下操作,将图标和文本添加到按钮:
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也建议