现在我希望实现一个两个元素相对的布局, 其中元素 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 的高度不固定或者会动态变化则会很难处理.
现在请教各位大佬有没有更好的解决方案呢, 我特意画了个来简单展示这个布局的需求
1
asionbo 2020-04-18 23:40:22 +08:00 via Android
center(
column( B, sizebox, A )) 可以这样试试 |
3
so1n 2020-04-19 03:00:50 +08:00 via Android
太久没写了,方法名忘了
大致是渲染后获取 a widget 的 context 的 offset,得出 a 所在位置,再把位置传给 b |
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> |