请教一个 Flutter 相对布局的问题

现在我希望实现一个两个元素相对的布局, 其中元素 A 在整个屏幕 XY 居中展示, 元素 B 要在 A 上的顶部一段距离展示.

举个例子, iOS 中约束为 A 的 centerX 和 centerY 相对父 view 都是 0, B 的 bottom 相对 A 的 top 一段距离, centerX 也是相对父 view 是 0

在 flutter 布局中我考虑用 stock 容器, 这样可以有同级的子 widget, 但是其子 widget 并不能相对布局, 我现在能想到的办法是, 元素 A 用 center 包括, 实现居中效果, 元素 B 同样适用 center 然后设置其 margin bottom, 使其位置偏移到元素 A 的顶部, 这样虽能实现目前的需求, 但感觉灵活度不够, 玩意元素 A 的高度不固定或者会动态变化则会很难处理.

现在请教各位大佬有没有更好的解决方案呢, 我特意画了个来简单展示这个布局的需求

效果图

请教一个 Flutter 相对布局的问题

caililin 1楼•4 个月前

center(
column(
B,
sizebox,
A
))

可以这样试试

更多关于请教一个 Flutter 相对布局的问题的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 2楼•4 个月前

楼主要求 A 居中显示

zlyuanteng 3楼•4 个月前

太久没写了，方法名忘了
大致是渲染后获取 a widget 的 context 的 offset，得出 a 所在位置，再把位置传给 b

phonegap100 4楼•4 个月前

css 写法，你自己转 div 为 Column

<div style=“display:flex”>
<div style=“flex:1;display:flex;justify-content:flex-end”>
元素 b
</div>
<div style=“flex:2;display:flex;align-items:center;justify-content:center”>
元素 a
</div>
<div style=“flex:1” />
</div>

yibo5220 5楼•4 个月前

这个办法是动态获取 A 的位置大小, 然后决定 B 的位置吧, 好像只能这样了!

wuwangju 6楼•4 个月前

是啊，在做新手引导，指引拥护点击这个按钮做什么时就是用这个方法

yuanlaile 7楼•4 个月前

拥护→用户

htzhanglong 8楼•4 个月前

你好！关于你提到的Flutter相对布局问题，我很乐意提供一些帮助。

在Flutter中，相对布局通常是通过Stack和Positioned组件来实现的。Stack允许你将多个子组件堆叠在一起，而Positioned则用于在Stack中相对定位这些子组件。

以下是一个简单的示例，演示了如何使用Stack和Positioned来实现相对布局：

Stack(
  alignment: Alignment.center, // 可选：设置对齐方式
  children: <Widget>[
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Positioned(
      top: 10, // 距离Stack顶部10单位
      left: 50, // 距离Stack左侧50单位
      child: Container(
        color: Colors.red,
        width: 50,
        height: 50,
      ),
    ),
    // 可以添加更多Positioned子组件
  ],
)

在这个示例中，我们创建了一个蓝色的Container作为背景，并在其上添加了一个红色的Container，红色Container的位置是通过Positioned的top和left属性来确定的。

需要注意的是，Stack中的子组件会按照它们在children列表中的顺序进行堆叠，后添加的组件会覆盖在先添加的组件之上。

希望这些信息能帮助你解决Flutter相对布局的问题！如果还有其他疑问，请随时提问。