时间戳

首页 > 解决方案 > 使用 Align 或使用 Positioned Flutter 有什么区别

layout - 使用 Align 或使用 Positioned Flutter 有什么区别

问题描述

她是同时使用 Positionned Widget 和 Align Widget 的具体示例！但是我在弄清楚要使用什么时遇到了问题！虽然最初的问题是相对于其容器而不是屏幕设置一些 FAB 的偏移量

Stack(
      children: <Widget>[
        Positioned(left: 0.0, child: Text("Top\nleft")),
        Positioned(bottom: 0.0, child: Text("Bottom\nleft")),
        Positioned(top: 0.0, right: 0.0, child: Text("Top\nright")),
        Positioned(bottom: 0.0, right: 0.0, child: Text("Bottom\nright")),
        Positioned(bottom: 0.0, right: 0.0, child: Text("Bottom\nright")),
        Positioned(left: width / 2, top: height / 2, child: Text("Center")),
        Positioned(top: height / 2, child: Text("Center\nleft")),
        Positioned(top: height / 2, right: 0.0, child: Text("Center\nright")),
        Positioned(left: width / 2, child: Text("Center\ntop")),
        Positioned(left: width / 2, bottom: 0.0, child: Text("Center\nbottom")),
      ],
    )
    Example #2 (Using Align in Stack)

    Stack(
      children: <Widget>[
        Align(alignment: Alignment.center, child: Text("Center"),),
        Align(alignment: Alignment.topRight, child: Text("Top\nRight"),),
        Align(alignment: Alignment.centerRight, child: Text("Center\nRight"),),
        Align(alignment: Alignment.bottomRight, child: Text("Bottom\nRight"),),
        Align(alignment: Alignment.topLeft, child: Text("Top\nLeft"),),
        Align(alignment: Alignment.centerLeft, child: Text("Center\nLeft"),),
        Align(alignment: Alignment.bottomLeft, child: Text("Bottom\nLeft"),),
        Align(alignment: Alignment.topCenter, child: Text("Top\nCenter"),),
        Align(alignment: Alignment.bottomCenter, child: Text("Bottom\nCenter"),),
        Align(alignment: Alignment(0.0, 0.5), child: Text("Custom\nPostition", style: TextStyle(color: Colors.red, fontSize: 20.0, fontWeight: FontWeight.w800),),),
      ],
    );

> Blockquot

e

标签： layoutdartflutteralignment

解决方案

  • Positioned是以 DP 为单位的基于偏移的对齐方式
  • Align使用父尺寸的 %

因此，Alignment(0.1, 0.1)不能用Positioned. 同样，Align不能代表 a Positioned(top: 10, left: 10)。

其次，Positioned是在不同的流程上。

Stack可以根据不包括小部件的其中一个子 项的大小来调整自身大小。Positioned

因此，使用AlignvsPositioned可能会导致Stack采用不同的大小。

推荐阅读