V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
toooo
V2EX  ›  Flutter

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

  •  
  •   toooo · 2020-04-18 22:53:26 +08:00 · 4673 次点击
    这是一个创建于 1462 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在我希望实现一个两个元素相对的布局, 其中元素 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 的高度不固定或者会动态变化则会很难处理.

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

    效果图

    7 条回复    2020-04-19 15:56:16 +08:00
    asionbo
        1
    asionbo  
       2020-04-18 23:40:22 +08:00 via Android
    center(
    column(
    B,
    sizebox,
    A
    ))

    可以这样试试
    a0000
        2
    a0000  
       2020-04-19 01:23:32 +08:00 via Android
    @asionbo 楼主要求 A 居中显示
    so1n
        3
    so1n  
       2020-04-19 03:00:50 +08:00 via Android
    太久没写了,方法名忘了
    大致是渲染后获取 a widget 的 context 的 offset,得出 a 所在位置,再把位置传给 b
    santiago009
        4
    santiago009  
       2020-04-19 03:48:46 +08:00 via Android
    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>
    toooo
        5
    toooo  
    OP
       2020-04-19 11:54:46 +08:00
    @so1n 这个办法是动态获取 A 的位置大小, 然后决定 B 的位置吧, 好像只能这样了!
    so1n
        6
    so1n  
       2020-04-19 15:55:28 +08:00 via Android
    @toooo 是啊,在做新手引导,指引拥护点击这个按钮做什么时就是用这个方法
    so1n
        7
    so1n  
       2020-04-19 15:56:16 +08:00 via Android
    @so1n 拥护→用户
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2814 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:22 · PVG 10:22 · LAX 19:22 · JFK 22:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.