flutter - 如何使文本适合带有图标的圆形按钮
问题描述
我正在尝试创建一个带有图标(左侧)和右侧文字的简单圆形按钮。
我关注了https://stackoverflow.com/a/63124491/13684332,它建议我们可以将Text
内部 a 设置为FittedBox
with fit:BoxFit.cover
。我也试过fit:BoxFit.scaleDown
和fit:BoxFit.fitWidth
。所有这些都会导致一些像素溢出文本小部件。
class RoundedButtonWithIcon extends StatelessWidget {
RoundedButtonWithIcon(
{@required this.text,
@required this.onPress,
this.icon,
this.color,
this.image});
final String text;
final Function onPress;
Icon icon;
Image image;
Color color;
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: FlatButton(
child: Row(children: [
Container(
margin: const EdgeInsets.only(right: 3),
child: image != null ? image : (icon != null ? icon : null)),
FittedBox(
fit:BoxFit.cover,
child:
Text(
text,
style: TextStyle(
//fontSize: 13,
fontWeight: FontWeight.w400,
fontFamily: 'Roboto',
color: color != null ? color : Colors.white),
)
)]),
onPressed: () {
onPress();
},
textColor: Colors.white,
color: Colors.gray,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red, width: 1.3),
borderRadius: BorderRadius.circular(5)),
));
}
}
解决方案
class RoundedButtonWithIcon extends StatelessWidget {
RoundedButtonWithIcon(
{@required this.text,
@required this.onPress,
this.icon,
this.color,
this.image});
final String text;
final Function onPress;
final Icon icon;
final Image image;
final Color color;
@override
Widget build(BuildContext context) {
return FlatButton(
child: Row(children: [
Expanded(
child: Row(
children: [
Container(
margin: const EdgeInsets.only(right: 3),
child: image != null ? image : (icon != null ? icon : null)),
Flexible(
child: FittedBox(
alignment: Alignment.centerLeft,
fit: BoxFit.scaleDown,
child: Text(
text,
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: 'Roboto',
color: color != null ? color : Colors.white),
)),
)
],
),
),
]),
onPressed: () {
onPress();
},
textColor: Colors.white,
color: Colors.grey,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.red, width: 1.3),
borderRadius: BorderRadius.circular(5)),
);
}
}
推荐阅读
- javascript - 如何在 React 中实现上一个和下一个按钮?
- c++ - nlohmann 和复制地图
- excel - 数据透视表项目 - 避免使用许多导致 Excel 崩溃的 INDEX 和 MATCH 函数
- node.js - 等待KafkaJS中的领导选举
- apache-kafka - 如何定期而不是连续地读取/轮询 kafka 消息
- html - 如何为 ID 中的类自定义 CSS
- css - 如何将 CSS 从“::before”选择器移动到 React?
- java - Spring Boot 卡夫卡监听器
- sql - SQL Server - 计算销售概览的每周目标值与实际值
- python - 通过shell脚本.bat文件自动连接到oracle的python脚本时出错