关键词：
【中文标题】如何左对齐 Flutter 中的 OutlineButton 图标【英文标题】：How to left align the OutlineButton icon in Flutter 【发布时间】：2019-03-09 07:01:53 【问题描述】：如何在 Flutter 中左对齐OutlineButton 图标？
Icon 可以按如下方式添加，但图标和文本都在按钮中居中对齐。有没有办法让图标左对齐，文本居中？
return new OutlineButton.icon(
onPressed: onPressed,
label: new Text(title),
icon: icon,
highlightedBorderColor: Colors.orange,
color: Colors.green,
borderSide: new BorderSide(color: Colors.green),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)));
【问题讨论】：
【参考方案1】：有很多方法可以做到，但是使用你提到的工厂构造函数OutlineButton.icon是不可能的，你可以更深入地检查源代码以查看它是如何构建小部件的。
您可以创建自己的Widget，将图标放在左侧，文本居中。
您还可以使用OutlineButton 小部件并将堆栈/行作为子级传递，检查此示例
OutlineButton(
onPressed: () => null,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Icon(Icons.access_alarm)
),
Align(
alignment: Alignment.center,
child: Text(
"Testing",
textAlign: TextAlign.center,
)
)
],
),
highlightedBorderColor: Colors.orange,
color: Colors.green,
borderSide: new BorderSide(color: Colors.green),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)
)
)
【讨论】：
【参考方案2】：你可以尝试一些常用的方法，我已经实现了这个：
OutlineButton(
onPressed: () => null,
child: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Icon(Icons.save_alt_rounded),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title'),
],
),
],
),
highlightedBorderColor: Colors.orange,
color: Colors.green,
borderSide: new BorderSide(color: Colors.green),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)
)
);
【讨论】：
【参考方案3】：我用扩展小部件包裹文本小部件。
OutlinedButton.icon(
icon: Icon(
Icons.lock,
color: MyAppTheme.accentColor,
size: 20,
),
label: Expanded(
child: Text(
' Login',
style: TextStyle(
color: MyAppTheme.primaryColor,
fontSize: 16),
),
),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)),
side: BorderSide(color: MyAppTheme.primaryColor)
),
),
【讨论】：
如何在 Flutter 中将文本与左侧对齐
】如何在Flutter中将文本与左侧对齐【英文标题】：HowtoaligntexttoleftsideinFlutter【发布时间】：2021-04-1014:40:50【问题描述】：我正在尝试复制设计，但我不确定如何使我的所有文本都像设计而不是中心一样向左对齐，但不知道如何... 查看详情
如何左对齐到Android中的居中文本
】如何左对齐到Android中的居中文本【英文标题】：HowtoleftaligntoacenteredtextinAndroid【发布时间】：2021-09-2719:33:29【问题描述】：下面的代码正在产生这个。我想要这个布局：顶部的大textView占用了父级的全部内容，并且textsize使用an... 查看详情
如何使 React Table 中的某些列左对齐和某些列居中对齐 - React
】如何使ReactTable中的某些列左对齐和某些列居中对齐-React【英文标题】：HowtomakesomecolumnsalignleftandsomecolumnaligncenterinReactTable-React【发布时间】：2019-05-0510:20:52【问题描述】：HelloStack溢出成员这是列标题的数组。我希望第1列到第5... 查看详情
如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]
】如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]【英文标题】：Howtoleftalignandverticallyalignaimageinaheaderandkeeptextincenterofdivhorizontally[duplicate]【发布时间】：2020-02-2507:58:39【问题描述】：我正在寻求帮助，在... 查看详情
如何左对齐 Angular Material 拉伸 md 按钮中的文本？
】如何左对齐AngularMaterial拉伸md按钮中的文本？【英文标题】：HowcanIleftalignthetextinanAngularMaterialstretchedmd-button?【发布时间】：2015-08-0718:49:27【问题描述】：无需过多地修改我自己的CSS，是否有一个属性或配置我可以用来左对齐md-... 查看详情
如何在将项目保持在列中的同时将项目左对齐？
】如何在将项目保持在列中的同时将项目左对齐？【英文标题】：HowcanIalignitemsleftwhilekeepingtheminacolumn?【发布时间】：2018-02-2613:06:14【问题描述】：我试图将项目左对齐，同时将它们保持在一列中，但是，当我将项目放在一列中... 查看详情
如何在颤动中显示文本以使 RTL 语言右对齐而 LTR 左对齐？
...RTL语言右对齐而LTR左对齐？【英文标题】：HowtodisplaytextinfluttersothatRTLlanguageisalignedrightandLTRisalignedleft?【发布时间】：2019-09-2913:49:56【问题描述】：基本上我想在颤振应用程序中显示预先格式化的文本。我正在使用flutter_markdown。... 查看详情
如何将 <caption> 表中的文本向左对齐？
】如何将<caption>表中的文本向左对齐？【英文标题】：Howaligntextin<caption>tabletotheleft?【发布时间】：2013-01-2501:38:39【问题描述】：美好的一天。代码：<tableclass="tabletable-hovertable-bordered"><captionclass="pull-right">Pays<... 查看详情
如何在 Flutter 中对齐单个小部件？
】如何在Flutter中对齐单个小部件？【英文标题】：HowtoalignsinglewidgetsinFlutter?【发布时间】：2019-05-1123:55:20【问题描述】：我想在其父级内对齐Flutter小部件。我知道我可以通过将一个小部件包装在一个中心小部件中来居中它。Cent... 查看详情
CSS：如何将列表元素与左对齐文本居中对齐？
】CSS：如何将列表元素与左对齐文本居中对齐？【英文标题】：CSS:Howtocenteralignalistelementwithleftalignedtext?【发布时间】：2017-09-0118:01:38【问题描述】：我试图在div中居中对齐列表，但保持文本左对齐。所以，我希望所有项目符号... 查看详情
CSS：如何将列表元素与左对齐文本居中对齐？
】CSS：如何将列表元素与左对齐文本居中对齐？【英文标题】：CSS:Howtocenteralignalistelementwithleftalignedtext?【发布时间】：2017-09-0118:01:38【问题描述】：我试图在div中居中对齐列表，但保持文本左对齐。所以，我希望所有项目符号... 查看详情
如何使剑道工具提示内容左对齐
】如何使剑道工具提示内容左对齐【英文标题】：Howtomakethekendotooltipcontentleftjustified【发布时间】：2015-06-2820:53:12【问题描述】：我有一个剑道工具提示，当我将鼠标悬停在剑道网格中的一行上时会显示该工具提示。工具提示的... 查看详情
在Android中的按钮内左对齐文本
...:24【问题描述】：我想将按钮的文本向左对齐，我不知道如何做到这一点，请帮助我如何在xml文件中做到这一点。我没有找到这个的属性。【问题讨论】：请改写你的问题:)太不清楚了告诉人们使用谷歌搜索A)API文档中缺少的内... 查看详情
如何在 JPanel 中将所有元素左对齐？
】如何在JPanel中将所有元素左对齐？【英文标题】：HowcanIalignallelementstotheleftinJPanel?【发布时间】：2011-02-1211:13:09【问题描述】：我想让JPanel中的所有元素都向左对齐。我尝试通过以下方式进行：JPanelpanel=newJPanel();panel.setLayout(new... 查看详情
latex：多行公式如何左对齐
参考技术A有时候公式太长，用=号对齐很难看(有的公式左边很长，右边很短)，此时难免需要进行"公式左对齐"。所需要的环境还是"align"(或者是align*，不带公式编号)。语法如下：说明1：&符号就是"对齐的位置"，放置在最左边... 查看详情
markdown如何在drupal8中的restrictedhtmlckeditor中提供左，右，中心对齐按钮(代码片段)
如何使用 python 3 和 tkinter 模块从右到左对齐菜单栏中的项目？
】如何使用python3和tkinter模块从右到左对齐菜单栏中的项目？【英文标题】：HowcanIalignitemsinmenubarfromrighttoleftwithusingpython3andtkintermodule?【发布时间】：2015-05-1407:25:48【问题描述】：我正在使用python3和tkinter模块来创建GUI。我需要创... 查看详情
Flexbox - 如何左对齐最后一个弹性项目？ [复制]
】Flexbox-如何左对齐最后一个弹性项目？[复制]【英文标题】：Flexbox-howtoalignleftthelastflexitem?[duplicate]【发布时间】：2018-01-2917:22:55【问题描述】：你知道如何对齐flexbox块中的最后一个字符串吗？.wrapperdisplay:flex;flex-flow:rowwrap;.wrapp... 查看详情