带有文本和图标的圆形按钮
Posted
技术标签:
【中文标题】带有文本和图标的圆形按钮【英文标题】：Round button with text and icon in flutter 【发布时间】：2018-09-01 16:37:48 【问题描述】：如何为flutter 设置一个带有文本和图标的按钮？
我想要一个button，它看起来像带有文本的图标，可以放在屏幕底部
例如，图标在这里：android-button-with-icon-and-text
【问题讨论】：
【参考方案1】：编辑 1： 在 Flutter 1.20 版本中，Flutter 团队进行了重大更改，引入了新按钮。因此，不推荐使用下面提到的按钮类型。使用TextButton 代替FlatButton 和ElevatedButton 代替RaisedButton。
TextButton.icon(onPressed: null, icon: null, label: null);
Elevated.icon(onPressed: null, icon: null, label: null);
查看按钮及其主题的重大更改here
注意：FlatButton 和 RaisedButton 已弃用
您可以简单地使用命名构造函数来创建不同类型的带有图标的按钮。比如
FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);
但是，如果您有特定要求，那么您始终可以创建具有不同布局的自定义按钮，或者只需将小部件包装在 GestureDetector 中。
【讨论】：
我们可以用标签做这个后缀图标吗？ 因为icon和label只是小部件，所以可以切换icon和label来将icon向右移动：RaisedButton.icon(onPressed: null, icon: Text('Button'), label: Icon (Icons.cached)), 那么将图标移到顶部或底部呢？ 自定义这个可以参考TextButton.icon()的源码，具体是text_button.dart第462行的build函数【参考方案2】：您可以通过使用包含Column（用于在图标下方显示文本）或Row（用于图标旁边的文本）的FlatButton，然后使用Icon 小部件来实现此目的和一个 Text 小部件作为子级。
这是一个例子：
class MyPage extends StatelessWidget
@override
Widget build(BuildContext context) =>
Scaffold(
appBar: AppBar(
title: Text("Hello world"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
onPressed: () => ,
color: Colors.orange,
padding: EdgeInsets.all(10.0),
child: Column( // Replace with a Row for horizontal icon + text
children: <Widget>[
Icon(Icons.add),
Text("Add")
],
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => ,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
这将产生以下内容：
【讨论】：
FlatButton id 现已弃用。【参考方案3】：截图：
SizedBox.fromSize(
size: Size(56, 56), // button width and height
child: ClipOval(
child: Material(
color: Colors.orange, // button color
child: InkWell(
splashColor: Colors.green, // splash color
onTap: () , // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.call), // icon
Text("Call"), // text
],
),
),
),
),
)
【讨论】：
【参考方案4】：在 Button 子项中使用 Column 或 Row，Row 用于水平按钮，Column 用于垂直，并且不要忘记 包含您需要的大小：
Container(
width: 120.0,
height: 30.0,
child: RaisedButton(
color: Color(0XFFFF0000),
child: Row(
children: <Widget>[
Text('Play this song', style: TextStyle(color: Colors.white),),
Icon(Icons.play_arrow, color: Colors.white,),
],
),
),
),
【讨论】：
感谢您的回答。在 RaisedButton 中添加新行是将文本和图标放在一起的正确解决方案。 这是最好的答案。在尝试实现自定义布局时，使用.icon() 构造函数会对布局施加太多约束。【参考方案5】：
如果你需要这样的按钮：
您可以使用RaisedButton 并使用子属性来执行此操作。您需要添加一个 Row 和行内，您可以添加一个 Text 小部件和一个 Icon 小部件来实现此目的。如果你想使用 png 图像，你可以使用类似的小部件来实现这一点。
RaisedButton(
onPressed: () ,
color: Theme.of(context).accentColor,
child: Padding(
padding: EdgeInsets.fromLTRB(
SizeConfig.safeBlockHorizontal * 5,
0,
SizeConfig.safeBlockHorizontal * 5,
0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Continue',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
Icon(
Icons.arrow_forward,
color: Colors.white,
)
],
),
),
),
【讨论】：
【参考方案6】：我通常的做法是在 Raised 按钮中嵌入一个 Row：
class Sendbutton extends StatelessWidget
@override
Widget build(BuildContext context)
return RaisedButton(
onPressed: () ,
color: Colors.black,
textColor: Colors.white,
child: Row(
children: <Widget>[
Text('Send'),
Icon(Icons.send)
],
),
);
【讨论】：
RaisedButton 已弃用。请改用 ElevatedButton。【参考方案7】：你可以这样做，
RaisedButton.icon( elevation: 4.0,
icon: Image.asset('images/image_upload.png' ,width: 20,height: 20,) ,
color: Theme.of(context).primaryColor,
onPressed: getImage,
label: Text("Add Team Image",style: TextStyle(
color: Colors.white, fontSize: 16.0))
),
【讨论】：
【参考方案8】：FlatButton、RaisedButton 和 OutlineButton 小部件已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。
只需将此代码作为按钮放在下面。接受的答案也在 2021 年 9 月更新。
TextButton.icon(
style: TextButton.styleFrom(
textStyle: TextStyle(color: Colors.blue),
backgroundColor: Colors.white,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24.0),
),
),
onPressed: () => ,
icon: Icon(Icons.send_rounded,),
label: Text('Contact me',),
),
【讨论】：
【参考方案9】：恭喜前面的答案...但我意识到如果图标在一行中（比如上图所示的三个图标），您需要使用列和行。
这里是代码
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FlatButton(
onPressed: () ,
child: Icon(
Icons.call,
)),
FlatButton(
onPressed: () ,
child: Icon(
Icons.message,
)),
FlatButton(
onPressed: () ,
child: Icon(
Icons.block,
color: Colors.red,
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
' Call',
),
Text(
'Message',
),
Text(
'Block',
style: TextStyle(letterSpacing: 2.0, color: Colors.red),
),
],
),
],
),
Here is the result
【讨论】：
【参考方案10】：在最新版本的 Flutter 中，我认为您可以像这样使用 Just IconButton Widget：
@override
Widget build(BuildContext context)
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(Icons.volume_up),
onPressed: () ,
),
Text('Volume')
],
);
希望对您有所帮助，请通过此documentation 了解更多信息。
【讨论】：
【参考方案11】：如果你需要文本居中，图像在旁边，像这样：
然后你可以用这个小部件树来实现它：
RaisedButton(
onPressed: () ,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text(
'Push it! '*10,
textAlign: TextAlign.center,
),),
Image.network(
'https://picsum.photos/250?image=9',
),
],
),
),
Full example available on my dartpad.dev (link).
【讨论】：
【参考方案12】：颤振 2.4：
最好的推荐方法是使用 ShapeDecoration
这是一个使用 Inkwell 的示例（模拟按钮，但您可以使用按钮代替并获得相同的结果）。
InkWell(
onTap: (),
child: Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(), //here we set the circular figure
color: Colors.red
),
child: Center(
child: Icon(
Icons.email,
size: 30,
color: Colors.white,
)
),
)
)
这些是 ShapeDecoration 中可能的形状：
RoundedRectangleBorder(),
BeveledRectangleBorder(),
ContinuousRectangleBorder(),
CircleBorder(),
结果链接示例：https://images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png
【讨论】：
以上是关于带有文本和图标的圆形按钮的主要内容，如果未能解决你的问题，请参考以下文章