Question

试图找出是否可以在全角按钮（即具有width: double.infinity

的按钮中对齐文本）

例如：

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

产生一个居中的文本按钮，并且无法更改对齐方式。

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

我正在尝试获得一个带有text：left的全角按钮，以便用户可以在该行中的任何位置单击，并仍然获得素材的点击效果。

Answer 1

我发现RawMaterialButton的构建方法是孩子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: () {},
);

Answer 2

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

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

输出：

Answer 3

另一种简单的技巧是将按钮放在仅包含一个元素的行中，然后将mainAxisAlignment设置为start。

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

Answer 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
              ),
           ),
        ),
      ),
    ),

Answer 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"),
          ],
        ),
      ),
    ),

全角按钮，如何对齐文本

5 个答案: