flutter解决重叠控件布局问题

基础问题

flutter 不支持负边距,不支持子元素越界.在这两个前提下,下面这个在 iOS 和原生看起来很简单的需求,在 flutter 中就变得有点不好写了:带有重叠的圆角边框展示.

解决思路

初学 flutter 时,这东西,我只能是用 stack 的绝对布局,用 position 的head固定高度,去展示出这块重叠的圆角,但是如果碰到了未知高度的 header,这东西就变得不好使了.
后来,偶然时间看到一个flutter 的 widgetFittedBox

fit参数表示了子控件的填充方式，说明如下：
fill：填充父组件，宽高比发生变化。
contain：等比拉伸，但子控件不能超出父控件。
cover：尽可能的小，等比拉伸充满父控件。
fitWidth：等比拉伸，宽充满父控件。
fitHeight：等比拉伸，高充满父控件。
none：默认子控件居中，不做拉伸处理，超出父控件的部分裁剪。
scaleDown：在子控件为Image且缩小的情况和contain一样，否则和none一样。

这东西,正常情况下是在图片填充里用的,但是我们可以注意到一个属性.

none：默认子控件居中，不做拉伸处理，超出父控件的部分裁剪。

意思是,在 none 的属性下,子控件可以突破父控件的约束,自定义宽高.所以 我尝试写了下面这个代码

Column(
      children: [
        CategoryHeaderView(), // 头部的控件
        Container(
          height: 0.1,
          color: Colors.blue,
          child: FittedBox(
            fit: BoxFit.none,
            alignment: Alignment.topCenter,
            child: Container(
                // padding: EdgeInsets.only(top: 10),
                width: ScreenUtil().screenWidth,
                height: 20,
                color: AppColors.lightMain),
          ),
        ),
        Expanded(
            // 下面的拖展
        ),
      ],
    ),

分析

这段代码的意思是,我在header 和 body 中间插入了一个0.1高度的 container,然后子 widget 使用FittedBox: BoxFit.none,alignment: Alignment.topCenter,拖展出了一个20高度的纯色伪元素,Alignment.topCenter是为了让子元素从父控件顶部开始布局.这样,就不需要使用绝对布局.也能解决头部高度不固定时,展示出重叠 widget 圆角的问题.

总结

当然,这方法只是我偶然想出来的,我目前不知道有没有更好的解决重叠子元素布局的方法(除stack 之外),如果各路大神们有知道的,可以在评论里告知一下,感激不尽.

更新不易,如有帮助到各位看官的,点个喜欢, 谢谢啦~