如何在 flutter 中對齊按鈕中的文本？

Question

我只想做最簡單的事情：我只想有一個文本右對齊的按鈕。 出於某種原因，我無法弄清楚這一點。

我試過 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),
        ),
    ],
),

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

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

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

Answer 4

對於新的按鈕和按鈕主題：

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>(
      EdgeInsets.zero, // <-- had to set padding to zero
    ),
  ),
),

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

2021 年 8 月 2 日更新

以下示例使用 Flutter 文檔中推薦的新按鈕和按鈕主題。 有兩種簡單而優雅的方法來解決這個問題

🚀第一種方法：使用頂級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))

更多關於 styleFrom() 方法

Answer 7

使用“ButtonStyle”適用於新的 TextButton（不適用於舊的 FlatButton）。

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

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

Answer 9

我知道這是舊的，但這是我正在做的，以防它幫助任何人。

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

因為它與這里的 styleFrom 匹配https://api.flutter.dev/flutter/material/TextButton-class.html

Answer 10

將其包裝在 Container 中並使用 align 屬性：

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

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

Answer 12

提升按鈕示例

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

Answer 13

假設您正在使用高架按鈕。 如果您沒有添加其他屬性，如 Colum 或 Row 等，請在.StyleFrom 中使用 alignment 。

ElevatedButton(
                                      onPressed: () {}, // Your OnPress Sequence
                                      child: Text( "Hello"),
                                      style: ElevatedButton.styleFrom(
                                        minimumSize: const Size(360, 70), // Button Minimum Width
                                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), // For Rounded Corner
                                        side: const BorderSide(color: Colors.grey), // Border Color
                                        elevation: 0, // Elevation
                                        padding: const EdgeInsets.all(0), // Text Padding
                                        primary: Colors.white, // Primary Button Color
                                        onPrimary: Colors.black, // Text Color if didn't Specify with text
                                        alignment:Alignment.centerLeft,
                                      ),
                                    )

Answer 14

只需放入您的 TextButton 的樣式屬性：

style: TextButton.styleFrom(alignment: Alignment.centerLeft, padding: EdgeInsets.symmetric(horizontal: 0)),

Answer 15

使用 row 作為子級，這里是 Flutter 2 中的實現，帶有 TextButton

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