如何在 Flutter 中对齐单个小部件？

Question

我想在其父级中对齐 Flutter 小部件。 我知道我可以通过将小部件包装在中心小部件中来将其居中。

  Center(
    child: Text("widget"),
  )

但是我如何将它对齐到右边、底部、顶部中间等位置呢？

笔记：

我说的是一个孩子，而不是一行或一列中的多个孩子。 请参阅这些 SO 问题：

• 在一行小部件中对齐文本小部件
• 飘动 | 右对齐不起作用

这个是在正确的轨道上，但我试图提出一个更规范的问题：

• 如何在 Flutter 中左对齐 OutlineButton 图标

Answer 1

如何对齐小部件

要在其父控件中对齐子控件，您可以使用Align控件。 如果您知道如何使用Center小部件，那么您就走对了，因为Center只是Align的一个特例。

包装您希望与 Align 小部件对齐的小部件并设置其对齐属性。 例如，这会将文本小部件对齐到父级的中间右侧。

Align(
  alignment: Alignment.centerRight,
  child: Text("widget"),
)

其他选项是

• Alignment.topLeft
• Alignment.topCenter
• Alignment.topRight
• Alignment.centerLeft
• Alignment.center
• Alignment.centerRight
• Alignment.bottomLeft
• Alignment.bottomCenter
• Alignment.bottomRight

这是它的样子：

您不限于这些位置。 您可以在任何地方对齐您的小部件。 通过指定 x,y 对，其中(0,0)是视图的中心，边缘是它周围的1.0个单位。 也许图像会有所帮助：

其中对于任何相对位置(x,y)

• Alignment.topLeft是Alignment(-1.0, -1.0)
• Alignment.topCenter是Alignment(0.0, -1.0)
• Alignment.topRight是Alignment(1.0, -1.0)
• Alignment.centerLeft是Alignment(-1.0, 0.0)
• Alignment.center是Alignment(0.0, 0.0)
• Alignment.centerRight是Alignment(1.0, 0.0)
• Alignment.bottomLeft是Alignment(-1.0, 1.0)
• Alignment.bottomCenter是Alignment(0.0, 1.0)
• Alignment.bottomRight是Alignment(1.0, 1.0)

请注意，在图像中对齐(x,y)不需要在[-1, +1]范围内。 对齐(1,2)意味着它位于小部件的右侧，并且低于小部件高度的一半。

这是自定义对齐位置的示例。

Align(
  alignment: Alignment(0.7, -0.5),
  child: Text("widget"),
)

补充码

为了便于剪切和粘贴，这里是用于制作上述示例的main.dart代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: myLayoutWidget(),
      ),
    );
  }
}

Widget myLayoutWidget() {
  return Align(
    alignment: Alignment(0.7, -0.5),
    child: Text(
      "widget",
      style: TextStyle(fontSize: 30),
    ),
  );
}

Answer 2

  Expanded(
    child: Align(
      alignment: Alignment.centerRight,
      child: Text("widget"),
    ),
  )

Answer 3

我想在其父级中对齐 Flutter 小部件。 我知道我可以通过将小部件包装在一个中心小部件中来使其居中。

  Center(
    child: Text("widget"),
  )

但是如何将其与右侧、底部、顶部中间等对齐？

笔记：

我说的是一个孩子，而不是一行或一列中的多个孩子。 请参阅这些 SO 问题：

• 在行小部件中对齐文本小部件
• 颤振| 右对齐不起作用

这是在正确的轨道上，但我试图提出一个更规范的问题：

• 如何在 Flutter 中左对齐 OutlineButton 图标

Answer 4

Flutter Align Widget 也是 Flutter 动画对齐

您可以使用 flutter Align 小部件轻松对齐 flutter 中的任何小部件。

Align(
      alignment: Alignment.center,
      child: Text(
        "ALIGN WIDGET",
        style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
      )),

另外，您可以为其设置动画：

AnimatedAlign(
        alignment: clicked ? Alignment.bottomCenter : Alignment.topCenter,
        duration: const Duration(seconds: 2),
        child: const Text(
          "ANIMATED WIDGET",
          style: TextStyle(fontSize: 35, fontWeight: FontWeight.w800),
        )),