如何在颤动中对齐按钮中的文本？答案

【问题标题】：How to align text in a button in flutter?如何在颤动中对齐按钮中的文本？
【发布时间】：2019-10-09 13:44:28
【问题描述】：

我只想做最简单的事情：我只想拥有一个文本向右对齐的按钮。由于某种原因，我无法弄清楚这一点。

我试过 textAlign: TextAlign.right 但它仍然在中间。我尝试使用 mainAxisAlignment.end 在按钮内排一排，但不，仍然在中心。出于某种原因，如果我在列而不是行上使用主轴alignment.end（将其放在底部而不是右侧），它会起作用

这是我目前所拥有的：

FlatButton(
    color: Colors.black,
    child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
        Text(
            "M",
            textAlign: TextAlign.right,
            style: TextStyle(
            color: mColor, fontSize: 10.0),
        ),
    ],
),

【问题讨论】：

标签： button text dart flutter alignment

【解决方案1】：

你应该把你的“文本”放在“对齐”中，让你的文本左、右、上、下等对齐。As-

    FlatButton(
                color: Colors.blue,
                textColor: Colors.white,
                padding: EdgeInsets.all(8.0),
                splashColor: Colors.blueAccent,
                onPressed: () {
                  /*...*/
                },
                child: Align(
                  alignment: Alignment.center,
                  child: Text(
                    "Flat",
                    style: TextStyle(fontSize: 20.0),
                    textAlign: TextAlign.center
                  ),
                ))

【讨论】：

它没有用。 FlatButton( color: Colors.black, child: Align( alignment: Alignment.centerRight, child: Text( "M", style: TextStyle( color: mColor, fontSize: 10.0), ), ), 该代码产生 this. 但更改为 Alignment.topCentre 产生 this.
谢谢！这应该是公认的答案！

【解决方案2】：

把它放在墨水瓶里

InkWell(
    onTap: doSomething,
    child: SizedBox(
    height: 100,
    width: 100,
    child: Container(
        decoration: BoxDecoration(
            border: Border.all(color: Colors.black)),
            child: Text(
                'hello',
                textAlign: TextAlign.right,
            ),
        ),
    ),
),

【讨论】：

这工作谢谢！另外，我发现您可以使用堆栈将按钮覆盖在文本小部件的顶部，但这更整洁。

【解决方案3】：

对我有用

  ButtonTheme(
    child: FlatButton(
      padding: EdgeInsets.all(0),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          "Button text",
          style: TextStyle(
            color: ThemeColors.primaryDark,
            fontWeight: FontWeight.normal,
            fontSize: ThemeSizes.normalFont,
          ),
          textAlign: TextAlign.left,
        ),
      ),
      onPressed: () => _doSomething(),
    ),
  )

【讨论】：

FlatButton 和 ButtonTheme 不再使用，改用新的 TextButton 和 TextButtonTheme。在此处查看重大更改：flutter.dev/docs/release/breaking-changes/buttons

【解决方案4】：

我发现在 FlatButton 小部件中使用填充值效果很好。

请看下面的例子……

 FlatButton(
        onPressed: () {
           /*...*/
        },
        padding: EdgeInsets.only(right: 10.0, bottom: 1.0, top: 1.0),
        child: Text(
          'Getting Started',
          style: TextStyle(
                        color: Colors.blueGrey[900],
                        fontSize: 12.0
          ), //TextStyle
         ), //Text
        ), //FlatButton

【讨论】：

Emm，这是个糟糕的主意 :) 抱歉。如果文本更改并且按钮具有固定宽度或全屏宽度，您将遇到大问题，您甚至不会知道它:) 仅当按钮没有设置任何类型的宽度时，使用填充才有效

【解决方案5】：

对于新的按钮和按钮主题：

TextButton(
  onPressed: () => Navigator.pop(context),
  child: Text(
    'Cancel',
    style: Theme.of(context).typography.black.bodyText2,
  ),
  style: ButtonStyle(
    alignment: Alignment.centerLeft, // <-- had to set alignment
    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
      const EdgeInsets.all(0), // <-- had to set padding to 0
    ),
  ),
),

【讨论】：

【解决方案6】：

2021 年 8 月 2 日更新

以下示例使用 Flutter 文档中推荐的 new Buttons and Button Themes。解决这个问题有两种简单而优雅的方法

? 第一种方法：使用顶级TextButtonTheme，它将相同的样式传递给所有TextButton后代小部件

Container(
  width: double.maxFinite,
  child: TextButtonTheme(
    data: TextButtonThemeData(
      style: TextButton.styleFrom(
        primary: Colors.black87,
        alignment: Alignment.centerLeft,
      ),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.account_circle_outlined),
          label: Text('Manage your account'),
        ),
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.favorite_border),
          label: Text('Favorites'),
        ),
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.reviews_outlined),
          label: Text('Reviews'),
        ),
        TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.logout_outlined),
          label: Text('Sign out'),
        ),
      ],
    ),
  ),
);

? 第二种方法：为每个单独的按钮单独设置样式（每个按钮都有不同的样式），而不是使用与上面相同的样式一次性设置所有按钮的样式

TextButton.icon(style: TextButton.styleFrom(primary: Colors.blue))
TextButton.icon(style: TextButton.styleFrom(primary: Colors.green))

More about the styleFrom() method

【讨论】：

【解决方案7】：

使用“ButtonStyle”适用于新的 TextButton（不适用于旧的 FlatButton）。

TextButton(
    style: ButtonStyle(alignment: Alignment.centerLeft),
    child: Text(
        'Push!',
        textAlign: TextAlign.start,
    ),
    onPressed:() {
        // Do something.
    },
);

【讨论】：

【解决方案8】：

这是一个使用 TextButton 的示例，但这应该适用于所有新按钮小部件：ElevatedButton、OutlinedButton、TextButton

// ...your widget hierarchy...
TextButton(
  onPressed: () => print('Logic goes here'),
  child: Text('Button Alignment Example'),
  style: TextButton.styleFrom(
      alignment: Alignment.centerRight,
  ),
),
// ...

【讨论】：

【解决方案9】：

我知道这是旧的，但这是我正在做的，以防它帮助任何人。

                  TextButton(
                    onPressed: () {},
                    style: Theme.of(context)
                        .textButtonTheme
                        .style!
                        .copyWith(alignment: Alignment.centerLeft),

因为它匹配来自这里的 styleFrom https://api.flutter.dev/flutter/material/TextButton-class.html

【讨论】：

【解决方案10】：

将其包装在一个 Container 中并使用 align 属性：

                child: ElevatedButton(
                  onPressed: () {},
                  child: Container(
                      alignment: Alignment.center, child: Text('Your text')),

【讨论】：

【解决方案11】：

您不会相信，但有时高度的小瑕疵是由于文字的高度造成的。在本例中，我使用的是TextButton（但它实际上也适用于其他情况）。

   TextButton(
          onPressed: () {
            print("Do this");
          },
          child: Text(
            "Title",
            style: TextStyle(
              height: 1, //I set this to one.
              color: Color(0xff191919),
              letterSpacing: 0,
            ),
          ),
          style: TextButton.styleFrom(
            backgroundColor: Colors.white,
            primary: Colors.white,
          ),
        ),

【讨论】：

【解决方案12】：

ElevatedButton 示例

ElevatedButton.icon(
  icon: Icon(
    Icons.search,
    color: Colors.grey.shade600,
  ),
  label: Text(
    'ElevatedButton',
    style: TextStyle(color: Colors.grey.shade600),
    textAlign: TextAlign.left,
  ),
  onPressed: () {},
  style: ButtonStyle(
    alignment: Alignment.centerLeft,
    backgroundColor:
        MaterialStateProperty.all(Colors.grey.shade300),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(4.0),
    )),
  ),
),

基本

ElevatedButton.icon(
  icon: Icon(
    Icons.search,
  ),
  label: Text(
    'Search',
  ),
  onPressed: () {},
  style: ButtonStyle(
    alignment: Alignment.centerLeft,
  ),
),

【讨论】：

【解决方案13】：

使用 row 作为子元素，这里是 Flutter 2 中的 TextButton 实现

TextButton(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Text('Text', style: TextStyle(
        color: Colors.black54
      )),
    ],
  ),
  onPressed: _action,
)

【讨论】：