CustomMultiChildLayout使用

之前一直有个疑问,不用无界widget(ListView、Coulmn、Row等等)怎么样实现线性布局,或者更加复杂的布局。因为使用无界widget实现上下排列的布局固然容易,但是,要是内部嵌套的又是一个无界布局那这时候就麻烦了,无界与无界嵌套的话,sdk会不知道怎么布局,当然可以通过设置shrinkWrap属性或者包一层SizedBox来解决,但如果作为一个通用容器,需要使用者额外的去设置这样东西,似乎不太友好,所以找到了CustomMultiChildLayout的控件,他可以实现自定义布局,使用如下

他需要两个参数,一个是布局委托,一个是需要布局的widgets,其中widget需要是LayoutID,因为在委托中需要根据id来布局

return CustomMultiChildLayout(
  delegate:,
  children:,
);

然后实现自己的布局委托,需要重写两个方法

class _StatusPageLayoutDelegate extends MultiChildLayoutDelegate {
  static const String actionBar = 'action_bar';
  static const String body = 'body';

  @override
  void performLayout(Size size) {//布局
    //布局actionbar
    Size actionBarSize = layoutChild(actionBar,
        new BoxConstraints(maxHeight: size.height, maxWidth: size.width));
    //offset(0,0),放在顶部
    positionChild(actionBar, Offset(0.0, 0.0));
    //布局body,约束为剩下的空间
    layoutChild(body, BoxConstraints.tight(Size(size.width, size.height)));
    //offset(0,actionbar高度),排在actionbar下方
    positionChild(body, Offset(0.0, actionBarSize.height));
  }
    
  //是否需要重新布局
  @override
  bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {
    return false;
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本文的目的是为了让读者掌握不同布局类Widget的布局特点,分享一些在实际使用过程遇到的一些问题,在《Flu...
    xqqlv阅读 5,287评论 0 18
  • 转自 Q吹个大气球Q 本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步...
    chilim阅读 1,962评论 0 17
  • 1.Row 线性布局,将children排成一行,主轴为水平方向,交叉轴为垂直方向。 textDirection:...
    hxljy阅读 810评论 0 5
  • 原文在此,此处只为学习 Widget与ElementWidget主要接口Stateless WidgetState...
    lltree阅读 4,529评论 0 1
  • 在职场中,有很多看似没有你努力的人。他们每天到点就下班,而你时不时加班到很晚,你以为自己是勤劳的小蜜蜂。然而,每个...
    清芷兮兮阅读 1,122评论 0 12