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

问题内容：

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

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

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

问题答案：

如何对齐小部件要将子窗口小部件在其父窗口中对齐，请使用该Align窗口小部件。如果您知道如何使用Center小部件，那么您是对的，因为Center这只是的特例Align。

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

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

Other options are

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

Here is what that looks like:

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

任何相对位置在哪里 (x,y)

Alignment.topLeft is Alignment(-1.0, -1.0)
Alignment.topCenter is Alignment(0.0, -1.0)
Alignment.topRight is Alignment(1.0, -1.0)
Alignment.centerLeft is Alignment(-1.0, 0.0)
Alignment.center is Alignment(0.0, 0.0)
Alignment.centerRight is Alignment(1.0, 0.0)
Alignment.bottomLeft is Alignment(-1.0, 1.0)
Alignment.bottomCenter is Alignment(0.0, 1.0)
Alignment.bottomRight is 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),
    ),
  );
}

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

微信关注