如何对齐小部件

Align 小装置。如果你知道如何使用 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 绕着它转。也许一张图片会有帮助:

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

• 左上角对齐 是 Alignment(-1.0, -1.0)
• 上止点对齐 Alignment(0.0, -1.0)
• 右上角对齐 Alignment(1.0, -1.0)
• 左对齐 是 Alignment(-1.0, 0.0)
• 校准中心 Alignment(0.0, 0.0)
• 中右对齐 是 Alignment(1.0, 0.0)
• 左下角对齐 Alignment(-1.0, 1.0)
• 是 Alignment(0.0, 1.0)
• 右下角 是 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),
    ),
  );
}

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

你可以用 Positioned 和 Align Stack 小装置

堆栈允许您将元素堆叠在彼此的顶部,数组中的最后一个元素的优先级最高。你可以用 排列 定位 或 Container

排列

通过将对齐方式设置为 Alignment ,它具有静态属性,如 , 右下角 等等或者你可以完全控制并设置 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)),
    ],
  ),
)