CustomMultiChildLayout使用

之前一直有個疑問,不用無界widget(ListView、Coulmn、Row等等)怎么樣實(shí)現(xiàn)線性布局,或者更加復(fù)雜的布局。因?yàn)槭褂脽o界widget實(shí)現(xiàn)上下排列的布局固然容易,但是,要是內(nèi)部嵌套的又是一個無界布局那這時候就麻煩了,無界與無界嵌套的話,sdk會不知道怎么布局,當(dāng)然可以通過設(shè)置shrinkWrap屬性或者包一層SizedBox來解決,但如果作為一個通用容器,需要使用者額外的去設(shè)置這樣?xùn)|西,似乎不太友好,所以找到了CustomMultiChildLayout的控件,他可以實(shí)現(xiàn)自定義布局,使用如下

他需要兩個參數(shù),一個是布局委托,一個是需要布局的widgets,其中widget需要是LayoutID,因?yàn)樵谖兄行枰鶕?jù)id來布局

return CustomMultiChildLayout(
  delegate:,
  children:,
);

然后實(shí)現(xiàn)自己的布局委托,需要重寫兩個方法

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;
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 本文的目的是為了讓讀者掌握不同布局類Widget的布局特點(diǎn),分享一些在實(shí)際使用過程遇到的一些問題,在《Flu...
    xqqlv閱讀 5,407評論 0 18
  • 轉(zhuǎn)自 Q吹個大氣球Q 本文主要介紹了Flutter布局相關(guān)的內(nèi)容,對相關(guān)知識點(diǎn)進(jìn)行了梳理,并從實(shí)際例子觸發(fā),進(jìn)一步...
    chilim閱讀 2,003評論 0 17
  • 1.Row 線性布局,將children排成一行,主軸為水平方向,交叉軸為垂直方向。 textDirection:...
    hxljy閱讀 846評論 0 5
  • 原文在此,此處只為學(xué)習(xí) Widget與ElementWidget主要接口Stateless WidgetState...
    lltree閱讀 4,622評論 0 1
  • 在職場中,有很多看似沒有你努力的人。他們每天到點(diǎn)就下班,而你時不時加班到很晚,你以為自己是勤勞的小蜜蜂。然而,每個...
    清芷兮兮閱讀 1,292評論 0 12

友情鏈接更多精彩內(nèi)容