如何对齐小部件

Question

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

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

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

注释：

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

这是正确的选择，但我想提出一个更规范的问题：

How to left align the OutlineButton icon in Flutter

这是一个自我解答。我的答案在下面。

Answer 1

如何对齐小部件

要将子窗口小部件在其父窗口中对齐，请使用Align窗口小部件。如果您知道如何使用Center小部件，那么您是正确的选择，因为Center只是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周围的单位。也许图片会有所帮助：

alignment

任何相对位置(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"),
)

alignment

补充代码

这里是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

您可以将 Positioned 和 Align 与 Stack 小部件一起使用

堆栈允许您将元素堆叠在一起，数组中的最后一个元素具有最高优先级。您可以使用 Align、Positioned 或 Container 来定位堆栈的子项。

对齐

通过使用 Alignment 设置对齐来移动小部件，它具有 topCenter、bottomRight 等静态属性。或者您可以完全控制并设置 Alignment(1.0, -1.0)，它采用从 1.0 到 -1.0 的 x,y 值，其中 (0,0) 是屏幕的中心。

Stack(
    children: [
        MyWidget(),
        Align(
            alignment: Alignment.topCenter,
            child: MyWidget(),
        ),
        Container(
            alignment: Alignment(-0.9, -0.9),
            child: MyWidget(),
        )  
    ]
);

定位

作为对齐的替代方法，您可以相对于父小部件定位子部件。

ConstrainedBox(
  constraints: BoxConstraints.tight(Size(double.infinity, 256)),
  child: Stack(
    alignment: AlignmentDirectional.center,
    children: <Widget>[
      Positioned(
        top: 0.0,
        child: Icon(Icons.calendar_today,
            size: 128.0, color: Colors.lightBlueAccent),
      ),
      Positioned(
          top: 4,
          right: 110,
          child: CircleAvatar(radius: 16, backgroundColor: Colors.red)),
    ],
  ),
)

Answer 3

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

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

3 个答案:

如何对齐小部件

补充代码