Flutter(57):Layout組件之SizedOverflowBox

Flutter教學目錄持續更新中

Github源代碼持續更新中

1.SizedOverflowBox介紹

一個特定大小的widget,但是會將它的原始約束傳遞給子控件,它可能會溢出。

2.SizedOverflowBox屬性

  • size:
  • alignment = Alignment.center:
  • child:

3.Alignment

  • Alignment.topLeft = Alignment(-1.0, -1.0):
  • Alignment.topCenter = Alignment(0.0, -1.0):
  • Alignment.topRight = Alignment(1.0, -1.0):
  • Alignment.centerLeft = Alignment(-1.0, 0.0):
  • Alignment.center = Alignment(0.0, 0.0):
  • Alignment.centerRight = Alignment(1.0, 0.0):
  • Alignment.bottomLeft = Alignment(-1.0, 1.0):
  • Alignment.bottomCenter = Alignment(0.0, 1.0):
  • Alignment.bottomRight = Alignment(1.0, 1.0):
  • Alignment()
  • Alignment.lerp()
    關于Alignment之前已經介紹過了:Flutter(44):Layout組件之Container

4.使用

image.png
          Container(
            color: Colors.blue,
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),

5.OverflowBox與SizedOverflowBox的區別

不了解OverflowBox可以看一下:Flutter(56):Layout組件之OverflowBox

  • OverflowBox自己是沒有寬高的,SizedOverflowBox是有的,尺寸就是size所設置的,下面這個例子就可以看得出來,SizedOverflowBox的父控件Container的尺寸就是100*50,Container自身沒有約束,那么它就會調節自己為子控件大小,但是OverflowBox的父控件Container寬度卻是屏幕寬度,由此可見OverflowBox自己是沒有寬高的。
  • SizedOverflowBox是會將原始約束傳遞給子控件,但是OverflowBox就不會了
          Container(
            color: Colors.blue,
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.blue,
            constraints: BoxConstraints(
              maxHeight: 50,
            ),
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.blue,
            height: 50,
            constraints: BoxConstraints(
              maxHeight: 50,
            ),
            child: OverflowBox(
              alignment: Alignment.topCenter,
              minWidth: 20,
              maxWidth: 100,
              maxHeight: 100,
              minHeight: 20,
              child: Container(
                width: 50,
                height: 120,
                color: Colors.amber,
              ),
            ),
          )
image.png
  • 這里可以看到OverflowBox自身是沒有尺寸的,但是SizedOverflowBox是有的
  • OverflowBox跟SizedOverflowBox的父控件在有BoxConstraints約束的時候,SizedOverflowBox將約束傳遞給了子控件,導致子控件受到約束后無法溢出,但是OverflowBox卻沒有

下一節:Layout組件之SizedBox

Flutter(57):Layout組件之SizedBox

Flutter教學目錄持續更新中

Github源代碼持續更新中

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。