Question

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

我尝试了textAlign：TextAlign.right，但是它仍然在中间。我尝试使用mainAxisAlignment.end在按钮内创建一行，但是没有，仍然在中心。出于某种原因，如果我使用主轴对齐方式，它会起作用。在列而不是行上结束（放在底部而不是右边）

这是我到目前为止所拥有的：

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

Answer 1

对我有用

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

Answer 2

您应将“文本”置于“对齐”中，以使文本左，右，上，下等对齐。As-

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

Answer 3

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

0 (7,) 486.0666260029982 69.43808942899975
5 (2,) 162.75938362848922 81.37969181424461
10 (6,) 404.65207867981894 67.44201311330316
15 (4,) 216.561058153033 54.14026453825825
20 (4,) 158.6933597307469 39.67333993268672
25 (10,) 590.6337605765742 59.06337605765742
30 (8,) 499.48740241702797 62.435925302128496
35 (8,) 420.51694802312426 52.56461850289053
40 (4,) 142.7888162321809 35.69720405804522
45 (5,) 257.7772788672603 51.55545577345206
50 (3,) 143.1221738596666 47.70739128655553
55 (4,) 305.4444504680107 76.36111261700268
60 (3,) 101.81220129227752 33.937400430759176
65 (5,) 230.0416201277115 46.0083240255423
70 (4,) 207.47647619960338 51.869119049900846
75 (6,) 389.7446815957917 64.95744693263195
80 (2,) 148.1140683360823 74.05703416804116
85 (5,) 338.6856269475073 67.73712538950146
90 (4,) 211.83179680175812 52.95794920043953
95 (6,) 253.24855615591525 42.20809269265254

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

Answer 4

将其放入墨水池

->select('articles, category')

Answer 5

我发现在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

Answer 6

将其包裹在一个容器中并使用 align 属性：

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

Answer 7

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

Answer 8

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

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

如何在Flutter中对齐按钮中的文字？

8 个答案: