全宽按钮，如何对齐文本答案

【问题标题】：Full width button, how to align text全宽按钮，如何对齐文本
【发布时间】：2019-02-08 21:20:39
【问题描述】：

试图弄清楚我是否可以在全宽按钮中对齐文本，即具有width: double.infinity的按钮

例如：

ButtonTheme(
  minWidth: double.infinity,
  child: FlatButton(
    onPressed: () {},
    child: Text('Sign Out', textAlign: TextAlign.left),
  ),
)

产生一个居中的文本按钮并且不能改变对齐方式。

我尝试了一些方法，但无法弄清楚，除非我尝试创建自定义按钮。

我正在尝试获得一个带有 text:left 的全宽按钮，以便用户可以单击行中的任意位置，并且仍然可以获得材料点击效果。

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

我发现RawMaterialButton的build-Method子是always centered：

child: Center(
  widthFactor: 1.0,
  heightFactor: 1.0,
  child: widget.child,
),

要使文本与开始/左对齐，您可以给它一个无限宽度，这将使其与其父级中心小部件一样宽。

child: FlatButton(
  child: SizedBox(
    width: double.infinity,
    child: Text(
      'Sign out',
      textAlign: TextAlign.left,
    ),
  ),
  onPressed: () {},
);

【讨论】：

我在 ListView 中使用它，但由于未设置高度，它引发了异常。如何设置高度？由于此解决方案不起作用，我将 Button 放在一行中，并将 mainAxisAlignment 设置为 start，请参阅我的答案 - stackoverflow.com/a/58551964/2594980

【解决方案2】：

一个简单的解决方法是将对齐按钮文本设置为Alignment.centerLeft as -

  MaterialButton(
  onPressed: () {},
    textColor: Colors.white,
    color: Colors.grey,
    child: Align(
       alignment: Alignment.centerLeft,
        child: Text(
           'SUBMIT',
            style: TextStyle(
            fontSize: 18, fontWeight: FontWeight.normal),
              ),
        ),
 ),

输出：

【讨论】：

这应该被标记为正确答案，因为当前的答案更像是一个“黑客”。您通常不希望周围有很多无限大的孩子。

【解决方案3】：

另一个简单的技巧是将按钮放在只有一个元素的 Row 中，并将 mainAxisAlignment 设置为 start。

Row(
 mainAxisAlignment: MainAxisAlignment.start,
 children: <Widget>[
  FlatButton(
   onPressed: () {},
   child: Text('Sign Out')
  ),  // end of FlatButton
 ], // end of widgets
), // end of Row

【讨论】：

【解决方案4】：

使用此代码

Container(
   color: Colors.grey,
   padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
   child: ButtonTheme(
    child: FlatButton(
      onPressed: _showDatePicker,
      child: SizedBox(
        width: double.infinity,
        child: Text('Sign Out',
          textAlign: TextAlign.right, // center, right
              ),
           ),
        ),
      ),
    ),

【讨论】：

【解决方案5】：

您需要使用Expanded 小部件

    Expanded(
      child: FlatButton(
        onPressed: (){},
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: Icon(Icons.description),
            ),
            Text("Detalles"),
          ],
        ),
      ),
    ),

【讨论】：