[英]Align icon to left button expanded
I have a problem with button expanded in flutter, I need align the icon to the left of the button, I made it with widget Row, because is the best way that I found.我在 flutter 中扩展按钮时遇到问题,我需要将图标与按钮左侧对齐,我使用小部件 Row 制作它,因为这是我找到的最佳方式。 But, the text isnt centered correctly.但是,文本没有正确居中。
SizedBox(
width: double.infinity,
child: RaisedButton(
onPressed: () => {},
color: Colors.blue,
textColor: Colors.white,
child: Row(
children: <Widget>[
Icon(Icons.send),
Expanded(
child: Text('Enviar', textAlign: TextAlign.center)
)
],
)
),
),
and the result is结果是
Is there a better way to make a button with this style(text centered in all button not only in it's space)?有没有更好的方法来制作具有这种样式的按钮(文本在所有按钮中居中,不仅在它的空间中)?
There are two common approaches you can try, I have not implemented them but I am just giving you the core ideas:您可以尝试两种常见的方法,我没有实现它们,但我只是为您提供核心思想:
Icon
to the leading
property, and your aligned Text
to the title
property.使用ListTile并将您的Icon
设置为leading
属性,并将对齐的Text
设置为title
属性。 This approach might look cleaner and easier, but I suspect you might have the same problem regarding the aligned Text
.这种方法可能看起来更干净、更容易,但我怀疑您可能对对齐的Text
有同样的问题。Icon
with an Align
widget, setting its alignment
property to fit your needs.使用Stack并使用Align
小部件包装您的Icon
,设置其alignment
属性以满足您的需求。 Then, replace your Expanded
with a Center
widget for your Text
, and you will not need the textAlign: TextAlign.center
property.然后,将您的Expanded
替换为您的Text
的Center
小部件,您将不需要textAlign: TextAlign.center
属性。 I think this might work better for you.我认为这可能对你更有效。The problem is with the two elements inside the Row.问题在于行内的两个元素。 This code should work for you这段代码应该适合你
SizedBox(
width: double.infinity,
child: RaisedButton(
onPressed: () => {},
color: Colors.blue,
textColor: Colors.white,
child: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Icon(Icons.send),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Enviar'),
],
),
],
)
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.